Skip to:
Content

BuddyPress.org

Opened 5 years ago

Closed 5 years ago

Last modified 4 years ago

#6618 closed enhancement (fixed)

Accessibility: Form elements in bp-templates/

Reported by: mercime Owned by: mercime
Milestone: 2.4 Priority: normal
Severity: minor Version:
Component: Templates Keywords:
Cc:

Description

Bind labels to form inputs because some assistive technologies do not understand implicit relationships between labels and widgets.

Attachments (12)

6618-forums-index-for.patch (1.4 KB) - added by mercime 5 years ago.
6618-group-forum-postform-for.patch (1.1 KB) - added by mercime 5 years ago.
6618-member-register-for.patch (1.5 KB) - added by mercime 5 years ago.
6618-member-register-for.2.patch (1.5 KB) - added by mercime 5 years ago.
6618-group-forum-post-edit-for.patch (796 bytes) - added by mercime 5 years ago.
6618-member-register-for.2.2.patch (703 bytes) - added by mercime 5 years ago.
6618-group-admin-for.patch (1.8 KB) - added by mercime 5 years ago.
6618-group-create-for.patch (952 bytes) - added by mercime 5 years ago.
bp-template-members-delete-account.patch (859 bytes) - added by mercime 5 years ago.
6618-group-manage-settings-for-id-html.patch (5.7 KB) - added by mercime 5 years ago.
6618-group-create-for-id.patch (5.0 KB) - added by mercime 5 years ago.
6618-group-manage-settings-for-id-html.2.patch (5.7 KB) - added by mercime 5 years ago.
correction on aria-describedby value for public group

Download all attachments as: .zip

Change History (48)

#1 @mercime
5 years ago

  • Component changed from API to Appearance - Template Parts
  • Keywords has-patch added

Forums: Bind labels to form controls.

Last edited 5 years ago by mercime (previous) (diff)

#2 @mercime
5 years ago

Groups: Bind labels to form controls in single group forum post form

#3 @mercime
5 years ago

Members: Bind labels to form controls for registration page.

#4 @mercime
5 years ago

Members: Bind label to form control in user capabilities.
patch: 6618-member-register-for.2.2.patch

Last edited 5 years ago by mercime (previous) (diff)

#5 @mercime
5 years ago

Groups: Bind label to form control in single group forum post edit.

#6 @mercime
5 years ago

Groups: Bind labels to form controls in single group admin.

#7 @hnla
5 years ago

  • Severity changed from normal to minor
  • Type changed from defect (bug) to enhancement

Best practise is always to make explicit associations really regardless of wrapping controls in labels. I would commit all of these. Good job!

#8 @mercime
5 years ago

Thank you @hnla :)

Groups: Bind label to checkbox to add forum to group.

#9 @mercime
5 years ago

In 10101:

Add 'for' attributes to labels in Forums index page.

Accessibility fix binds labels to respective textarea, select,
and text input fields.

See #6618.

#10 @mercime
5 years ago

In 10102:

Add 'for' attributes to labels in Forum new post form.

Accessibility fix binds labels to respective textarea and
text input fields.

See #6618.

#11 @mercime
5 years ago

In 10103:

Add 'for' attributes to labels in Registration form.

Accessibility fix binds labels to respective radio input fields.

See #6618.

#12 @mercime
5 years ago

In 10104:

Add 'for' attribute to label in Group forum topic form.

Accessibility fix binds label to text input field.

See #6618.

#13 @mercime
5 years ago

In 10105:

Add 'for' attribute to label in form to mark user as spammer.

Accessibility fix binds label to checkbox field in the member
capabilities form.

See #6618.

#14 @mercime
5 years ago

In 10106:

Add 'for' attributes to labels in single Group admin screen.

Accessibility fix binds labels to respective checkboxesin group
admin settings: one to enable discussion forum and the other to delete
the group.

See #6618.

#15 @mercime
5 years ago

In 10107:

Add 'for' attribute to label in Groups > Create screen.

Accesibility fix binds label to checkbox field to enable
discussion forum.

See #6618.

#16 @mercime
5 years ago

Settings > Delete Account: Add 'for' attribute to the label for the checkbox input field to delete own account.
bp-template-members-delete-account

#17 @mercime
5 years ago

In 10124:

Member Delete Account: Add 'for' attribute to label tag.

See #6618.

#18 @mercime
5 years ago

  • Milestone changed from Awaiting Review to 2.4

Attached 6618-group-manage-settings-for-id-html.patch fixes Group Manage > Settings:

  • unwrap labels from uls for valid markups
  • remove <strong> tags surrounding label texts
  • add 'id' attributes to radio inputs
  • add 'aria-describedby' attributes to radio inputs
  • add 'id' attributes to uls to bind to 'aria-describedby' in radio inputs
  • add 'for' attributes to labels

Before and after screenshots for the following themes:

#19 @mercime
5 years ago

Attached 6618-group-create-for-id.patch fixes Group Create Step 2:

  • remove <strong> tags surrounding label texts
  • add 'id' attributes to radio inputs
  • add 'aria-describedby' attributes to radio inputs
  • add 'id' attributes to uls to bind to 'aria-describedby' in radio inputs
  • add 'for' attributes to labels

Before and after screenshots for the following themes:

@mercime
5 years ago

correction on aria-describedby value for public group

#20 @mercime
5 years ago

In 10128:

Accessibility fix for Group Manage > Settings page.

This changeset:

  • unwrap labels from uls for valid markups
  • add 'id' attributes to radio inputs
  • add 'aria-describedby' attributes to radio inputs
  • add 'id' attributes to uls to bind to 'aria-describedby' in radio inputs
  • add 'for' attributes to labels
  • remove <strong> tags surrounding label text

See #6618.

#21 @mercime
5 years ago

In 10129:

Accessibility fixes for Group Create - Step 2.

This changeset:

  • add 'id' attributes to radio inputs
  • add 'aria-describedby' attributes to radio inputs
  • add 'id' attributes to uls to bind to 'aria-describedby' in radio inputs
  • add 'for' attributes to labels
  • remove <strong> tags surrounding label text.

See #6618.

#22 @mercime
5 years ago

The second phase of improving accessibility for the Group Create Step 2 and Group Manage > Settings panels is to reconfigure the HTML markup by surrounding the radio elements within fieldsets and replace h4 headings with legends. This change however, has some stylistic consequences which would require support in buddypress.css and buddypress-rtc.css.

#23 @hnla
5 years ago

Think we may need to be careful here, starting to change markup is not only a stylistic matter but might well affect themes in ways hard to account for, this is why really I wanted to get a new set of template files underway where we had the freedom to strip back markup and re-build with no need to worry about existing sites.

#24 @mercime
5 years ago

In 10167:

Add label tag for file input in Member Change Avatar screen.

See #6618.

#25 @mercime
5 years ago

In 10168:

Add label tag for file input in Group Change Avatar screen.

See #6618.

#26 @mercime
5 years ago

In 10169:

Add label to textarea of Activity reply form.

See #6618.

#27 @mercime
5 years ago

In 10170:

Add label tag for file input of Group upload avatar screen.

See #6618.

#28 @mercime
5 years ago

In 10171:

Add label tag for textarea of Forum edit post screen.

See #6618.

#29 @mercime
5 years ago

In 10172:

Add label tag for textarea of Forum reply screen.

See #6618.

#30 @mercime
5 years ago

In 10173:

Add label for checkbox to create a new Blog.

See #6618.

#31 @mercime
5 years ago

In 10174:

Correct 'for' value of label tag in Member change avatar screen.

See #6618.

#32 @mercime
5 years ago

@hnla Thank you for your feedback. Sorry for the late reply. Perhaps we should discuss the second phase further in a new ticket to hold recommendations such as this? Or we can continue discussion here if you prefer re specific cases where change of markup to fieldset (comment:22) plus backward-compatible styles could wreak havoc on layouts in existing sites.

#33 @DJPaul
5 years ago

@mercime is there more to do here? If there's more to do but you need to discuss it a bit more, how about creating a new ticket for that for 2.5 so we can close this for 2.4?

#34 @DJPaul
5 years ago

  • Keywords has-patch removed

#35 @mercime
5 years ago

  • Owner set to mercime
  • Resolution set to fixed
  • Status changed from new to closed

In 10250:

Move label texts for screen readers after the checkbox fields.

The label of a checkbox field is part of the control and should
be positioned to the right of the input where it normally expected
to be read by assistive technologies.

Fixes #6618.

#36 @DJPaul
4 years ago

  • Component changed from Appearance - Template Parts to Templates
Note: See TracTickets for help on using tickets.