localgov
localgov copied to clipboard
Content menu does not use standard controls
Steps to replicate
- Logged in and viewing a page (not editing)
- tab to toolbar “Content”
Expected Results
Toolbar is declared to screen reader users and Toolbar is programmed to be usable for keyboard only users including screen reader users, using keys for Toolbars that will work for all users.
Following Accessible Rich Internet Application (ARIA) authoring practice guide.
Observed results
On landing on the first element of the toolbar instead of being able to navigate out of the toolbar with the tab key, tab takes you to each element in the toolbar including the submenus.
There is no way to close the toolbar other than to tab through all the elements, including the sub menus.
Having to visit all the elements in the tool bar is going to cause fatigue for keyboard only users and screen reader users.
When you leave the toolbar at the end, the menu doesn't close and is obscuring the next button to receive focus.
WCAG reference
WCAG 4.1.2 : https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html: Screen Reader - Use standard controls, or ensure that non-standard controls are properly marked up using WAI-ARIA.
https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/examples/toolbar/#kbd_label_1
On this one, I seem to recall there was a Drupal core issue for it somewhere with some information about why this would be difficult to implement, but I'm struggling to track it down. If anyone else finds it, please link to it here.