Site Navigation

A site navigation component is used to navigate between pages in a site. It is typically placed in the header of a site. It may be a simple list of links or a more complex structure with disclosure controls that reveal panels of links. It may also contain a combination of both.

A navigation component should be marked up as a navigation landmark.

The best way to achieve this is to use the semantic HTML <nav> element. Alternatively, a non-semantic HTML element such as a <div> can be used with the role="navigation" attribute.

A navigation component must contain at least one link. Each link must meet the accessibility requirements of the link pattern.

1<!-- A simple site navigation widget that presents a list of links -->
2<nav>
3 <ul>
4 <li><a href="/">Home</a></li>
5 <li><a href="/about">About</a></li>
6 <li><a href="/products">Products</a></li>
7 </ul>
8</nav>

In addition to the requirements outlined in the link pattern, each link must have a unique destination and accessible name.

ARIA current

The aria-current attribute is used to indicate the current page within a navigation component. If the current page is presented as one of the links in a navigation component then the aria-current attribute must be set to true or page so that assistive technologies can identify it as the current page.

1<nav>
2 <ul>
3 <li><a href="/" aria-current="page">Home</a></li>
4 <li><a href="/about">About</a></li>
5 <li><a href="/products">Products</a></li>
6 </ul>
7</nav>

List structure

A navigation component, whether it is a simple list of links or a more complex structure, should convey its structure using lists.

1<!-- A simple site navigation widget that presents a list of links -->
2<nav>
3 <ul>
4 <li><a href="/">Home</a></li>
5 <li><a href="/about">About</a></li>
6 <li><a href="/products">Products</a></li>
7 </ul>
8</nav>
9
10<!-- A site navigation widget that presents a list of links with disclosure controls -->
11<nav>
12 <ul>
13 <li>
14 <a href="/">Home</a>
15 </li>
16 <li>
17 <a href="/about">About</a>
18 </li>
19 <li>
20 <a id="products_link" href="/products">Products</a>
21 <button aria-expanded="false" aria-controls="products_menu" aria-labelledby="products_link">
22 <ul id="products_menu" class="collapsed">
23 <li><a href="/products/1">Product 1</a></li>
24 <li><a href="/products/2">Product 2</a></li>
25 <li><a href="/products/3">Product 3</a></li>
26 </ul>
27 </li>
28 </ul>
29</nav>

Forbidden roles

A navigation component should not be implemented using ARIA menu and menubar roles. These roles require implementing keyboard interactions that are unnecessary and cumbersome for a navigation component. A navigation component implemented using links and disclosure controls is much simpler to implement and provides a better user experience.

Disclosures

A navigation component may contain disclosure controls that reveal panels of links. Each disclosure control must meet the accessibility requirements of the disclosure pattern. Each disclosure must contain at least one link and have a unique accessible name.

When a disclosure is used as part of a navigation component, it should be possible to close the panel using the Escape key when the focus is on the disclosure control or within the panel. See the Escape key section in the disclosure entry for more details.

Unexpected interactives

A navigation component should not contain any interactive elements other than links and disclosure controls.

Summary of Tests

NameConformance LevelWCAG Success Criteria
Navigation landmarkA4.1.2 Name, Role, Value, 1.3.1 Info and Relationships
Site navigation has linksA4.1.2 Name, Role, Value
Links namesA4.1.2 Name, Role, Value
ARIA currentA1.3.1 Info and Relationships
List structureA1.3.1 Info and Relationships
Forbidden rolesA2.1.1 Keyboard
Unexpected interactivesA4.1.2 Name, Role, Value, 1.3.1 Info and Relationships