Ten years ago, web developers were introduced to a light-weight dropdown menu system that seemed like a perfect solution for complex, nested navigation. Suckerfish Dropdowns used the :hover state to show/hide children of the top nav element. It didn’t take long for people to realize :hover didn’t work without a mouse, meaning a large portion of a web site’s users could not activate: the submenus.
Patrick Griffiths and Dan Web introduced Son of Suckerfish, which fixed the :hover issue by placing a class on the top navigation item when it received focus or hover. This allowed it to be used by mouse and keyboard users.
Fast forward to 2013 and dropdown menu options haven’t changed much. Unfortunately, there’s also been a resurgence of :hover based navigation, thanks to the popularity of some inaccessible jQuery plugins and coding examples.
There are plenty of options for making your dropdown menus accessible. Terrill Thompson researched the options extensively for her presentation and article Accessible DropDown Menus.
Dropdown and flyout menus on websites are great for reducing clutter, simplifying page content, and providing a consistent navigation structure that (if done well) makes it easy to find content from anywhere on the site. Unfortunately, very few of the dynamic menus in use today are fully accessible:
- Most dynamic menus depend on users being able to use a mouse. Mousers hover over menu items, which makes dropdown menus appear. If non-mousers tab to those same top-level menu items, they typically can’t make the dropdown menus appear.
Accessible DropDown Menus – Terrill Thompson
Thompson introduces the importance of keyboard accessibility, allowing users to escape menus, the use of arrow keys, and adding ARIA attributes. The suggested pattern that comes the closest to most jQuery sites is the DropDown Menu from Simply Accessible. Another great option is the menu component from the Yahoo! User Interface Library. YUI components have accessibility baked in, so developers don’t have to worry about keyboard control or ARIA.
If you are looking for something more complex than a dropdown menu, look at the recently released Mega Menu from Adobe. They’ve just released their code as open source. It incorporates full keyboard accessibility and ARIA support. It allows you to include nested navigation within your topnav hierarchy.
Testing Your Menu
How does your site navigation measure up? It’s easy to test. Just push your mouse to the side and try tabbing through your web page. Are you able to navigate the submenus? What happens when you focus on a top level menu item and hit the enter key? What happens when you use the arrow keys? The escape key?
If your answer is nothing, you will need to update to an accessible drop down menu.