Dropdown menu assessment
Part of the How to do a web accessibility assessment series #a11y
Playlist: • How to do a web accessibility assessm...
The navigation menu on this page includes sub-menus that appear when users hover over the menus with a mouse. However, these same menus do not appear for non-mousers. If a user navigates to the menu by pressing tab, the sub-menus do not appear; nor do the main menu items send the user to a new page. They simply don't work. If they did work, screen reader users would depend on supplemental markup added to the HTML that informs them that an item has a sub-menu, and whether that submenu is expanded or collapsed. This supplemental markup can be provided using Accessible Rich Internet Applications (ARIA). ARIA is a W3C specification is designed to communicate roles, states, and properties of user interface elements to assistive technologies. ARIA is essential for the accessibility of today's modern web interfaces. The W3C has created a companion guide WAI-ARIA Authoring Practices, which includes a set of recommended design patterns for common widgets, including a menu design pattern. These standard design patterns include detailed recommendations for how users should be able to interact with the widget using the keyboard, as well as recommendations for which ARIA attributes should be used in order to make the widget accessible using assistive technologies. All dropdown menus should be coded in accordance with these recommendations so users can count on dropdown menus everywhere having a consistent interface.
Other menu systems can be found on the ARIA Authoring Practices Guide (APG)
https://www.w3.org/WAI/ARIA/apg/patte...
https://www.w3.org/WAI/ARIA/apg/examp...
Before example:
https://tinyurl.com/access-before
After example:
https://tinyurl.com/access-after
Link to the playlist:
• How to do a web accessibility assessm...