Dropdown Menu Test: Simply Accessible
This is one of several dropdown menus tested on Terrill Thompson's Dropdown Menus Test Page.
This page applies techniques described in Derek Featherstone's article Better For Accessibility, and specifically uses code from his Option 6 example.
To exit the menu, press tab again and you should land safely in this paragraph.
- This is a highly accessible menu that uses ARIA markup to provide additional semantics that help screen reader users to fully understand the interface as they interact with it.
- This menu closely closely follows the DHTML Style Guide.
- Differs from YUI and OAA menus in that all menu items are accessible via tab.
- The original menu (Option 6) doesn't work as well as I would expect it to with screen readers. Although it uses all the same ARIA markup as the YUI and OAA menus, screen readers don't seem to recognize it as a menu (for example, they announce "Link About", rather than "Menu About, to read the items press up or down arrow keys". The problem seems to be that the ARIA markup (role="menuitem" and aria-haspopup="true") are added to the LI element, but the focusable item is the link inside that element. If focus is moved to the LI (using tabindex="0"), this problem is corrected.
- I left some of the CSS intact from Derek's original, as it provides a great example of CSS3 style effects such as rounded corners and gradient backgrounds.