Accessible website navigation beyond the desktop menu
Plan understandable links, keyboard operation, mobile menus, focus, and route changes so people can move through your website.
Navigation is successful when a visitor can understand the available destinations, choose one, and keep their place while moving around. An elegant desktop menu is only one part of that experience. Review the same journey with a keyboard, on a narrow screen, and after opening a direct link to a deeper page.
Make the destinations and structure clear
Use labels that describe the content people will find. Creative names can support a brand, but the important destinations should not depend on guessing a metaphor. A service business usually needs visitors to understand its offering, evidence, and next step quickly. Test the labels by asking someone where they would look for a specific answer.
Use semantic navigation regions for major groups of links. MDN recommends the HTML nav element for navigation landmarks and distinguishing multiple navigation regions with appropriate labels when needed. Keep the structure purposeful rather than wrapping every small link collection in a competing landmark. The underlying organisation should remain understandable without the visual layout.
Design opening, closing, and choosing as complete interactions
A mobile menu needs an obvious control, a clear open state, and a dependable way to close it. Keep the visitor’s position predictable when it closes. For expandable groups, make the relationship between the group label and its destinations clear. Avoid requiring precise hovering to reach an important page or revealing essential links only on pointer movement.
Review every action using the keyboard. The focus indicator should remain visible against each background, including overlays and visual effects. A menu or project panel should not trap people after they finish with it. When an overlay closes, return focus to a sensible place so the next keyboard action is predictable.
Preserve orientation across routes and content states
Show the current section in a way that does not rely only on colour. Keep navigation wording consistent between the header, footer, and relevant in-page links. After changing routes, ensure the page title and focus behaviour communicate the new destination. A visual transition should not leave someone interacting with controls from the previous page.
Test navigation as a sequence, not a set of isolated clicks. Open a detail, return to its list, change a filter, and use the browser’s Back control. Verify that a direct link works after refresh. These everyday paths expose hidden assumptions that a demonstration beginning on the home page may never reveal.
Practical checklist
- Use destination labels people can predict.
- Make mobile open and close states clear.
- Keep essential links available without hover.
- Review visible focus and return focus after overlays.
- Test direct links, refresh, Back, and filtered-list return paths.
Example: a portfolio detail journey
A hypothetical studio lets visitors open a project from a filtered work list. Closing the detail returns them to the same filter and a sensible focus position. They can then reach Services from the primary navigation without having to restart at the home page or discover a hidden gesture.
Common questions
Can a navigation menu be visually unusual?
Yes, provided the destinations and controls remain understandable through ordinary interaction. Give an unconventional visual treatment a conventional, usable underlying structure.
Is keyboard testing enough to establish accessibility?
It is an important check, but it is only part of a broader review. Content structure, assistive technology behaviour, visual clarity, and user needs also matter.
Further reading
Start with your actual workflow.
Turn the useful parts of this guide into a focused project brief.
Shape your project