How to Get Accessible Navigation Menus Right
Dropdown and mega menus that work with keyboards, screen readers and touch.
Marcus Adeyemi
The key figures
- Keyboard
- menus must open and close with the keyboard
- Hover
- hover-only reveal excludes many users
- Escape
- should close open menus
- Structure
- navigation belongs in a nav landmark with a list
Why this is worth getting right
Menus are the most-used component on most sites, and hover-only menus exclude keyboard and touch users.
Do this, not that
Do
- Support keyboard opening and closing
- Use buttons for controls that expand menus
- Close menus with Escape and return focus
- Keep menu structure as lists in a nav landmark
- Test on touch devices
Don’t
- Menus that open only on hover
- Links used as expand controls
- Focus lost when menus close
- Deep nesting with no keyboard path
When to bring in help
Our advice Bring in help when navigation fails accessibility audits.
Where this comes from
- W3C ARIA Authoring Practices Guide — Disclosure pattern
- W3C Web Accessibility Initiative — Menus tutorial
The figures and practices above come from the sources listed.
Working on something like this?
We take on Performance & Accessibility work for teams who want it done once, properly. Tell us what you are building and we will tell you honestly whether we are the right studio for it. Start a project.
Where to go next
Spotted something wrong? Report an error on this page. We correct on the page and say what changed.
