Accessible Dropdown Menus

Slender SuckerfishTen 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.

Accessible Alternatives

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.

Menu example from YUIDropdown 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.
  • Most dynamic menus depend on users being able to see. Dropdown menus are typically hidden with display:none in CSS, and revealed by changing that to display:block using JavaScript (triggered, as noted above, by a hover event). If screen reader users can somehow trigger the change from hidden to visible, that change is not likely to be communicated to them, so even if the dropdown menu is visible it isn’t necessarily accessible.

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.

Adobe Mega Menu

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.

Published by Ted

Accessibility is more than making sure images have alternate text. I work with engineers, product managers, and designers to understand how accessibility impacts the users, set realistic deadlines, and create the solutions to provide a delightful experience to all users, regardless of their physical, sensory, or cognitive ability.

Leave a comment

Your email address will not be published. Required fields are marked *