Accessibility: Form elements in bp-templates/

[mercime]

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

[mercime]

Forums: Bind labels to form controls.

[mercime]

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

[mercime]

Members: Bind labels to form controls for registration page.

[mercime]

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

[mercime]

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

[mercime]

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

[hnla]

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

[mercime]

Thank you @hnla :)

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

[mercime]

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.

[mercime]

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.

[mercime]

In 10103:

Add 'for' attributes to labels in Registration form.

Accessibility fix binds labels to respective radio input fields.

See #6618.

[mercime]

In 10104:

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

Accessibility fix binds label to text input field.

See #6618.

[mercime]

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.

[mercime]

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.

[mercime]

In 10107:

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

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

See #6618.

[mercime]

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

[mercime]

In 10124:

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

See #6618.

[mercime]

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:

• Twenty Sixteen: ​https://www.dropbox.com/s/eagakhummsxoim7/2016-manage-before-after.jpg?dl=0
• Twenty Fifteen: ​https://www.dropbox.com/s/vv2ml1u5m8z7c8h/2015-manage-before-after.jpg?dl=0
• Twenty Fourteen: ​https://www.dropbox.com/s/w4x63pezyzs9st4/2014-manage-before-after.jpg?dl=0

[mercime]

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:

• Twenty Sixteen: ​https://www.dropbox.com/s/wit7k5apu37wkpi/2016-create-before-after.jpg?dl=0
• Twenty Fifteen: ​https://www.dropbox.com/s/xtxwtoofl2caafj/2015-create-before-after.jpg?dl=0
• Twenty Fourteen: ​https://www.dropbox.com/s/cbbawxuc7wa5e51/2014-create-before-after.jpg?dl=0

[mercime]

correction on aria-describedby value for public group

[mercime]

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.

[mercime]

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.

[mercime]

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.

[hnla]

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.

[mercime]

In 10167:

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

See #6618.

[mercime]

In 10168:

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

See #6618.

[mercime]

In 10169:

Add label to textarea of Activity reply form.

See #6618.

[mercime]

In 10170:

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

See #6618.

[mercime]

In 10171:

Add label tag for textarea of Forum edit post screen.

See #6618.

[mercime]

In 10172:

Add label tag for textarea of Forum reply screen.

See #6618.

[mercime]

In 10173:

Add label for checkbox to create a new Blog.

See #6618.

[mercime]

In 10174:

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

See #6618.

[mercime]

@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.

[DJPaul]

@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?

[mercime]

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.