Menus that everyone can use.
WHAT WORKS
A simple list of links A clearly marked menu button on mobile Dropdowns that open on click or focus, not only on hover
THE HOVER PROBLEM
A dropdown opening only on mouse hover cannot be used by keyboard or touch.
It must also open on focus and on click.
MOBILE MENUS
The button must be a real button, reachable by keyboard, with a label stating what it does.
An icon alone with no accessible name is announced as "button" and nothing more.
When the menu opens, focus should move into it. When it closes, focus should return.
CURRENT PAGE
Indicate which page the user is on, in text or with an appropriate attribute, not by colour alone.
NESTING
Two levels at most. Deeply nested menus are difficult for everyone and particularly difficult by keyboard.
NUMBER OF ITEMS
Fewer is better. A menu with thirty items is a list nobody can navigate.
TESTING
Open and use the entire menu with the keyboard only.
On mobile, check the button announces itself properly.
