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.
Navigation landmark
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.
Site navigation has links
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>
Links names
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>910<!-- 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.
Hidden links
All links in the site-navigation should be accessible to all users. If some links are unreachable by keyboard, for example if their controlling disclosure cannot be activated with the keyboard, then the Unit Tester will report a hidden links violation. Additionally, if some links could not be reached, this test would warn that they were not analyzed for accessibility issues.
ARIA owns
If the site navigation should contain elements that cannot be implemented as descendants of the site navigation,
the aria-owns attribute can be used to indicate that the site navigation owns the elements.
However, since the aria-owns attribute is not supported by some assistive technologies,
it is best practice to avoid it. If it must be used, the aria-owns attribute should be set
on the site navigation and should point to the IDs of the owned elements.
Unexpected interactives
A navigation component should not contain any interactive elements other than links and disclosure controls.