Opened 8 years ago
Closed 6 years ago
#40677 closed defect (bug) (fixed)
Widgets page is not accessible for keyboard users
Reported by: | juliemoynat | Owned by: | |
---|---|---|---|
Milestone: | 5.1 | Priority: | normal |
Severity: | normal | Version: | |
Component: | Widgets | Keywords: | has-patch has-screenshots |
Focuses: | accessibility, javascript | Cc: |
Description
Hi,
I noticed that widgets page is not accessible for users that navigate with keyboard.
A good point is that drag and drop is not the only solution to add a widget into an area but this page needs some enhancements to be accessible for keyboard users (blind people, people with motor disability, and even people with no handicap).
This is my list:
- Available widgets can't be focused.
Solution : If we add a "tabindex="0"" attribute on ".widget.ui-draggable" elements, we can focus them and open it just like a click. And we need to add a focus style to see focus on elements.
- A keyboard user can't select the area where he wants to add the widget because a TAB or arrow navigation automatically select the following choice. So he can just add widgets in the last area.
Solution : deactivate TAB navigation on elements and just allow arrow navigation. This would be equivalent to radio buttons navigation. TAB would be just to go to "Cancel" or "Add widget" button. Also add a screen reader text to tell which choice is selected (blind people can't see the checked icon).
- This page is divided into 3 parts : "Available widgets", "Inactive widgets" and all widgets areas. The "all widgets areas" has not title to quickly navigate into it.
Solution : add a "h2" title on the third zone ("Widgets areas" for example) and replace "h2" title of widgets areas by "h3" (logical, right?)
- Widgets in areas can't be deactivated with keyboard because we need to drag them back.
Solution : Add a link "Deactivate" next to the "Delete" one.
- Widgets areas can't be opened with keyboard because arrows are "div"s and not buttons.
Solution : be inspired by the left column of the page to add menus (there is tabindex and screen reader text to explain)
- Widgets in areas also have an arrow to hide / show. The arrow is a link and that's a good point but there no text in it.
Solution : add a screen reader text to explain what that link does (blind people can't see the arrow)
Thank you for your help
Attachments (2)
Change History (25)
#1
@
8 years ago
- Milestone Awaiting Review deleted
- Resolution set to duplicate
- Status changed from new to closed
#2
@
8 years ago
- Version 4.7.4 deleted
See [40569] and [40480]. However, they fix just a part of the accessibility issues in the Widgets screen. Worth noting this screen has also an alternate mode, can be enabled from the Screen Options, see Enable accessibility mode
, that's recommended especially for keyboard users and screen reader users.
#3
@
8 years ago
Hi,
Thank you for your replies.
@joedolson I've installed WordPress 4.8-alpha-40576. Can you confirm that #31476 correction is in that version?
If so, I confirm that my ticket is not a duplicate of #31476 because Widgets page doesn't work better with keyboard.
@afercia I didn't know this option exists and users can't imagine there is some accessibility options in it. I never remind of this "screen options" button...
An accessibility mode should be accessible into the screen, not hidden into an accordion. I will test this accessibility mode as well.
#4
@
8 years ago
- Milestone set to Awaiting Review
- Resolution duplicate deleted
- Status changed from closed to reopened
An accessibility mode should be accessible into the screen, not hidden into an accordion.
Yep, right. Ideally, the same content should be served to all users. Personally, I don't support alternative modes or "accessible versions" as a viable solution for better accessibility. The Widgets screen "accessibility mode" is there for historical reasons, and I guess it was implemented years ago with a good intent. However, modern applications should be accessible out of the box. As noted in #40678 this screen, together with the Menus one, the media views, and the customizer, are the most critical areas in WordPress for accessibility. The Widgets screen would need some big refactoring primarily because the drag and drop functionality is hard to use with a keyboard. I really hope there will be the chance to improve this screen in the next future and contributors interested in helping out.
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
8 years ago
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
7 years ago
#7
@
7 years ago
- Keywords needs-patch added
- Milestone changed from Awaiting Review to Future Release
Moving to future release as something that should be addressed, as per today's bug scrub. Some points outlined here are already fixed. Some of the other suggestions would be very simple and there are no reasons why they shouldn't be implemented :)
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
7 years ago
#9
@
7 years ago
See also #42778 which aims to make the "Accessibility mode" link more discoverable.
#11
@
7 years ago
- Owner set to afercia
- Status changed from reopened to assigned
Note: working on a patch for this.
#12
@
7 years ago
- Focuses javascript added
- Keywords has-patch has-screenshots added; needs-patch good-first-bug removed
I've split the issues this ticket aims to solve in 2 separate patches.
Keyboard accessibility
40677.diff makes the left part of the Widgets screen (the "Available Widgets") operable with a keyboard, manages focus when appropriate, adds label and feedback for screen reader users, improves color contrast. I'm not saying this will make this screen fully accessible but it's an improvement. Looks good to me and it's contained in the admin-widgets
JS which doesn't touch the Customizer. I think it's ready for review and commit. Screenshot:
Headings
40677-headings.diff it's just a proof of concept, please do not merge. Adding a new heading on the right, for example "Available Sidebars", would be trivial:
However, all the headings below should be bumped up by one level. It's possible to do that in a slightly hacky way, which doesn't make me so happy. However, things get even more hacky because when adding a widget, or dragging a widget from the left column to the right one and vice-versa, then the widget heading should be changed on the fly, for example from a h3 to a h4 or vice-versa, in order to preserve a correct headings hierarchy. 40677-headings.diff experiments this approach but I think it's extremely fragile, and I'm really not sure it should be done. Better ideas welcome.
Off the top of my head, an alternative solution could be keeping the current headings unchanged and just prepend to the sidebar names some visually hidden text, for example:
<span class="screen-reader-text">Available sidebar: </span>Blog Sidebar <span class="screen-reader-text">Available sidebar: </span>Footer 1 <span class="screen-reader-text">Available sidebar: </span>Footer 2
Last point
A couple fixes have already been implemented in previous WordPress releases. There's one thing left to do from the original points described in the ticket:
Widgets in areas can't be deactivated with keyboard because we need to drag them back. (Add a link "Deactivate" next to the "Delete" one.)
I'd recommend to split this in a separate ticket as I think it should be discussed with the Customizer and Design teams.
#13
@
7 years ago
I'm going to commit the first part related to the "Available Widgets" section because it's a good improvement. Screenshot of the visual changes (darker blue for the selected item, underline for the focused item):
Still to do:
- headings for the available Sidebars
- Add a link "Deactivate" next to the "Delete" one
Thanks for your ticket, @juliemoynat! This issue was being tracked in #31476, and should be entirely fixed as of 2 days ago in 40569. If you can install the beta version of WordPress 4.8 and verify that all your issues are addressed, that would be great, but if there are further issues, please comment on #31476 to address them!
Thanks for sharing and helping out!