[wp-trac] [WordPress Trac] #40677: Widgets page is not accessible for keyboard users

[WordPress Trac]

#40677: Widgets page is not accessible for keyboard users
---------------------------+-----------------------------
 Reporter:  juliemoynat    |      Owner:
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Widgets        |    Version:  4.7.4
 Severity:  normal         |   Keywords:
  Focuses:  accessibility  |
---------------------------+-----------------------------
 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

--
Ticket URL: <https://core.trac.wordpress.org/ticket/40677>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform