Code examples
Use semantic HTML
This semantic HTML contains all accessibility features by default.
<a href="#nav-example">Skip to example navigation</a>
<a href="#">Not the navigation</a>
<nav tabindex="-1" class="nav-example" id="nav-example">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/contact/">Contact</a></li>
<li><button aria-haspopup="true">Sign in</button></li>
</ul>
</nav>
Keep custom menus as simple as possible
Use semantic elements where possible.
<nav id="example-expanding-nav" class="menu">
<ul>
<li>
<a class="home" href="/">
Home
</a>
</li>
<li class="expander-group">
<button type="button"
class="menu expander-toggle"
aria-expanded="false"
aria-haspopup="true">
Menu
</button>
<ul class="subnav expander-content">
<li>
<a href="/about/">About</a>
<button type="button"
class="subnav expander-toggle"
aria-expanded="false"
aria-haspopup="true">
<span class="hidden">About</span>
</button>
<ul class="expander-content">
<li>
<a href="/history/">Our history</a>
</li>
<li>
<a href="/values/">Our values</a>
</li>
</ul>
</li>
<li>
<a href="/contact">Contact</a>
</li>
</ul>
</li>
</ul>
</nav>
When you can’t use semantic HTML
This custom navigation requires extra attributes.
<div role="navigation">
<ul>
<li><a href="/">Website name</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/contact/">Contact</a></li>
<ul/>
</div>
Multiple navigation elements
When there is more than one navigation element, they must have a name.
<nav tabindex="-1" id="nav" aria-label="Main">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/contact/">Contact</a></li>
<ul/>
</nav>
<h2 id="cat-heading">Categories</h2>
<nav id="cat-nav" aria-labelledby="#cat-heading">
<ul>
<li><a href="/alpha/">Alpha</a></li>
<li><a href="/bravo/">Bravo</a></li>
<li><a href="/charlie/">Charlie</a></li>
<ul/>
</nav>
<footer>
<nav aria-label="Site map">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/contact/">Contact</a></li>
<ul/>
</nav>
</footer>
Developer notes
Name
- If there are multiple
<nav>
elements (site menu, pagination, categories) it may be helpful to name them- Use
aria-label="Menu name"
when there is not a visible nav title. aria-describedby="menu-name-id"
can be used when the nav title is a visible heading.
- Use
Role
- Identifies itself as navigation
- DO NOT add ‘menu’ or ‘option’ roles with arrow key event listeners unless you’re building an actual application like Gmail.
Focus
- When skip links are used, add
tabindex="-1"
so that focus can move to thenav
element, (not just bring it into view).