Navigation is the part of a website people use without thinking about, right up until they cannot.
Somebody using a keyboard tabs into a menu and cannot get out of it. Somebody using a screen reader hits fourteen navigation links before reaching the content, on every page. Somebody with low vision zooms to 200 per cent and the menu disappears entirely.
Accessible website navigation is mostly avoiding a short list of specific failures, all of which are well understood and most of which are introduced deliberately for visual reasons.
Accessible Website Navigation
1. Use the elements that already work
A navigation region should be a `<nav>` containing a list of links. That is not a formality: it tells assistive technology what the block is, so somebody can jump straight to it or skip past it.
Links should be `<a>` elements with `href` attributes. Anything else styled to look like a link is not keyboard operable and is not announced as a link, whatever it looks like.
Menus that expand need the right state information, so a screen reader announces whether a submenu is open or closed. This is where custom components most often go wrong.
2. Make focus visible, always
The single most damaging habit in navigation design is removing the focus outline because it interferes with the visual.
Without it, a keyboard user has no idea where they are. Tabbing becomes guesswork, and on a menu with twenty items that is not a minor inconvenience.
If the default outline does not suit the design, replace it with something clearly visible. Do not remove it. WCAG 2.1 Level AA requires focus to be visible, and it is one of the easiest criteria to fail by accident.
3. Provide a skip link
A link at the very top allowing somebody to jump past the navigation to the main content.
For a screen reader user or a keyboard user, without it, every single page begins with the same fourteen links. A skip link turns that into one keystroke.
It can be visually hidden until focused, which is the usual implementation, and it is one of the highest-value additions available for the effort involved.
4. Keep the order and structure logical
Tab order should follow the visual order. When it does not, usually because of CSS positioning, keyboard users experience the page in an order nobody designed.
Use real headings in a sensible hierarchy, since screen reader users navigate by them more than by links.
Keep navigation consistent between pages. Somebody who has learned where things are should not have to relearn on the next page, which matters particularly for people with cognitive differences.
5. Mobile menus need extra care
The hamburger pattern introduces several failures at once.
The trigger needs a text label or an accessible name, since an unlabelled icon announces as nothing useful. It needs to communicate whether the menu is open or closed.
When the menu opens, focus should move into it. When it closes, focus should return to the trigger rather than to the top of the page. Escape should close it.
And focus should not be able to wander behind an open overlay menu into the page underneath, which is a common and disorienting bug.
6. Write labels people recognise
Accessibility is not only technical. A menu labelled around your internal structure rather than customer vocabulary excludes people through confusion rather than through markup.
Plain, predictable labels help people with cognitive differences, people reading in a second language, and everybody in a hurry.
Fewer top-level items is generally better. Four or five visible labels beat twelve hidden behind a menu, and reaching that number usually means confronting a content structure nobody has questioned.
7. Testing it
Put the mouse aside and tab through. Can you reach everything, see where you are, open and close submenus, and escape?
Then zoom to 200 per cent and check the menu still works.
Then, if you can, watch somebody using a screen reader navigate the site. Ten minutes of that surfaces more than any checklist.
Where performance and environmental impact both apply, treat them as the same lever: clear navigation reduces how many pages somebody loads to find what they need, and reducing unnecessary data transfer and processing supports a faster experience while lowering estimated digital carbon, though environmental figures remain modelled rather than directly measured.
Our sustainable web design work tests navigation by keyboard before anything is signed off.