Accessibility bp-legacy templates: Controls and media elements should have labels or aria-labelledby

[mercime]

Found one issue and decided to do a sweep of the templates rendered. Accessibility issues were found in the following:

• What’s New - for textarea
• Change Avatar (upload) - for input element
• Change Avatar (take photo) - for video element
• Notifications - for select and inputs
• Messages (inbox)- for input (checkboxes)
• Messages (starred)- for input (checkboxes)
• Messages (sent)- for input (checkboxes)
• Messages (compose)- for input and textarea
• Messages (responding to message) - for textarea
• Settings (general) - for input (pass2)
• Settings (email) - for all input-type radios
• Settings (profile visibility) - for all select elements
• Group (send invites) - for all input elements
• Group (manage details) - for input element
• Group (manage photo) - for input element

[mercime]

Add label to the What’s New textarea.

[mercime]

Attached patch to add label to the What’s New textarea.

[mercime]

Attached patch to add label to the Change Avatar upload input element.

[mercime]

Attached patch add labels to the select and input elements in the Notifications screens.

[imath]

About 6531-change-avatar-upload.patch, apart from a line feed i don't see any difference, am i missing something ?

[mercime]

@imath Sorry about that. I replaced the patch I originally uploaded. It worked in the test install but white-screened when I tested the patch in another installation.

[mercime]

Attached patches as follows:

6531-group-manage-details.patch

• Add missing ID to the select tag as label is bound to the ID not name in a group's Manage > Details screen.

6531-message-compose-patch

• Add label for input tag in Messages > Compose screen.
• Bind the label to the textarea ID and not name, in same screen.

6531-message-respond.patch

• Add label for textarea shown when you respond to a message.

6531-notifications.2.patch -replacement

• Bind the label tag to the select tag ID and not name in the notifications template.
• Add label for the input tag in the notifications loop.

6531-settings-general.patch

• Add label to input tag in the member's Settings > General screen.

[imath]

No problemo, as this part is built dynamically in JS a can imagine the problem. Could you add the patch back even if it's not working, i'll try to see why.

[mercime]

Merci @imath. Attached 6531-change-avatar-upload.2.patch fixes accessibility for "Member > Change Avatar" and "Group - Manage > Photo" screens, and it's working :)

[mercime]

Also attaching additional patches:

6531-settings-email.patch

• Add labels to input tags in the Settings > Email screen.

6531-settings-profile-visibility.patch

• Add IDs to select tags in the Profile Visibility screen.
• Add labels to select tags as well.

[imath]

Replying to mercime:

Merci @imath. Attached 6531-change-avatar-upload.2.patch fixes accessibility for "Member > Change Avatar" and "Group - Manage > Photo" screens, and it's working :)

Ok will check it out asap. Thanks a lot.

[mercime]

Thanks @imath :)

Attached patches as follows:

6531-messages-inbox-starred-sent.patch

• Add label and screen reader text to messages.loop. Fixes accessibility for Messages' Inbox, Sent, and Starred screens noted in original post.

6531-settings-email.2.patch - replacement

• Improve previous patch by adding text for screen readers

[mercime]

6531-whats-new-label.1.patch - added label to a select tag

[imath]

@mercime, tested the 6531-change-avatar-upload.2.patch. I'm not sure the title attribute for the input (type=button) is necessary as there is a label element. According to ​this site, using the title attribute for an input is only advised when adding a label is not possible.

So i'm suggesting 6531-change-avatar-upload.3.patch. If you're ok with this, i'll still need to test the patch on Internet Explorer and touch devices to be completely sure there's no problem before committing it :)

[mercime]

@imath Thank you for your patch. Two thumbs up. I agree that the title attribute is redundant, 'twas a careless mistake on my part.

[imath]

In 9978:

Avatar UI: Improve the accessibility of the uploader view

Props mercime

See #6531

[mercime]

@imath unfortunately the automated accessibility check missed what a manual check (second step) would have found in the Avatar UI as reported in forums ​https://buddypress.org/support/topic/request-feature-improvement-to-help-visually-challenged-people/

Confirmed the issue reported above using keyboard navigation: Use Tab key to navigate the profile photo upload page, and then use the Enter key to open up the file selection window when you focus on the input. Keyboard navigation works in wp-admin/media-new.php upload UI where the Space bar in addition to the Enter key works in this case because input type="button", same as in the _attachment/uploader.php.

Would appreciate your help in resolving this for the blind BP user. Thanks.

[imath]

I'm sorry, i'm not sure to understand what i need to do. Just tested and it's possible to tab to the upload button and then hit space or enter to open the file browser. The only thing that differs from the WordPress media editor is that the button does not have blue borders to inform it has the focus.

What should we do ?

Should we add a role attribute eg: role="browse" to the input ?
Should we add a css rule to add borders, but this is visual so.. ?

i'm not a specialist :(

[mercime]

@imath Thank you for checking the issue. I tested in another laptop and the keyboard navigation is working. I rebooted the first laptop where I tested the report locally and tested at your wpserveur site using FF/Chrome/IE and keyboard nav is now working after reboot. Strange that this happened in the first place. I will contact the OP again. Thanks again.

[imath]

no problem :) Weird i agree. Hope it will be ok.

[imath]

in r9978 i forgot the case when the BP Uploader is loaded inside the WP Admin > Users > Extended profile.

We have 2 choices :

• Add a css rule to src/bp-core/admin/css/common.css > see 6531.bpuploader-wpadmin.patch
• Or simply use 'screen-reader-text' instead of 'bp-screen-reader-text' if is_admin() > see 6531.bpuploader-wpadmin.alternative.patch

What is the best one ?

[imath]

In 10051:

BuddyPress Uploader Accessibility: "screen-reader" classes

Use the "screen-reader-text" class inside the WP Administration and use the "bp-screen-reader-text" one into the front-end.

See #6531

[mercime]

In 10078:

Fix 'for' value of label in Messages > Compose.

Accessibility fix to bind label and textarea by matching the 'for'
value of the label tag with the 'id' value of the textarea input
field in the Message > Compose template.

See #6531

[mercime]

In 10079:

Fix 'for' value of label in Notifications page.

Accessibility fix to bind label and select field by matching the 'for'
value of the label tag with the 'id' value of select field rendered
in the Notifications page.

See #6531.

[mercime]

In 10080:

Add 'id' attribute to "Notify group members of these changes" input element.

Accessibility fix to add the missing 'id' attribute of checkbox field to
match the 'for' value of associated label tag in Groups > Manage >
Details page.

See #6531.

[mercime]

In 10081:

Add label and 'id' for radio input type.

Accessibility fix which adds a label for every radio input field
generated in the Settings > Notifications page when any or all of the
following components are activated: Activity, Friends, Groups, and/or
Messages.

See #6531.

[mercime]

In 10082:

Add label and 'id' for select control field.

Accessibility fix which adds a label for every select form control, as
seen in Settings > Profile, that is dynamically generated whenever a
profile field added by a site administrator is set to a visibility level
that allows any member to override it.

See #6531.

[mercime]

In 10083:

Add label and 'id' for checkboxes in Messages.

Accessibility fix adds label tag and dynamic 'id' for every checkbox form
control generated in the Messages screens.

See #6531.

[mercime]

In 10085:

Add label tags for Activity post form controls.

Accessibility fix which adds label tags for textarea and select fields
in the Activity status update form for logged in users.

See #6531.

[mercime]

In 10086:

Add label for checkbox in Messages > Compose.

Accessibility fix adds label tag for checkbox input field to send the
notice to all users in the Messages > Compose screen.

See #6531.

[mercime]

In 10087:

Add label for textarea in Messages screen.

Accessibility fix adds label tag to the textarea form control to reply
to the message received in the view message screen.

See #6531.

[mercime]

In 10088:

Add label for checkbox in all Notifications.

Accessibility fix adds label tag for every checkbox form control generated
in the Notifications screens.

See #6531.

[mercime]

In 10089:

Add label for the password confirmation input field.

Accessibility fix in the Settings > General page.

See #6531.

[DJPaul]

@mercime is there more to do here?

[mercime]

@DJPaul Will be moving the video issue in another ticket and closing this ticket now. Thanks :)