Web projects
Add a menu that works with the keyboard
By SI100x · Published
A navigation menu should work when someone uses Tab and Enter as well as a pointer. Start with ordinary links and a clear disclosure control rather than treating a site navigation list like a complex application menu.
Try this exercise
- Give the opening button a visible name and an expanded state. Keep hidden links out of the focus order while the panel is closed.
- Open the panel, visit its links with Tab and activate one. Provide Escape to dismiss it, and return focus to a sensible position.
- Test dismissal by choosing a destination and by clicking outside the panel. On mobile, make sure the panel fits the screen and its close control is easy to find.
Check your result
No interaction should leave focus on an invisible control. Verify the actual routes as well as the menu animation. A visually open panel is not complete if a keyboard user cannot reach its links.
Explore your next step
Compare course curricula or try a free live demo to ask about prerequisites and practice work.