How navigation should work for keyboard users
Posted 22nd March 2025
in
Accessibility
and Development
Navigation is a central concept in web design, the web being a network of interconnected pages and all that. Navigation is found in a few standard places; almost always in the header of each page, sometimes in the footer, and every now and then in amongst the main page content.
I’ve written about how button groups work for keyboard users, so in the interests of completion I thought it would be worth doing the same thing for navigation. Spoiler alert: it’s much, much simpler.
Note: although this is about keyboard users, like the article about button groups there’s example markup, and it would remiss of me not to explain how it serves screen reader users too, so you’re getting a two-for-one!
An example of navigation
Let’s start with some example markup:
<nav aria-label=“Primary“>
<ul>
<li><a href=“/home“>Home</a></li>
<li><a href=“/about“>About</a></li>
<li><a href=“/contact“>Contact</a></li>
</ul>
</nav>
Unlike the button group markup, I haven’t left anything out here. And there’s no [...]