WAI-ARIA: Role=Navigation
A collection of navigational elements (usually links) for navigating the document or related documents.
Description
A collection of navigational elements (usually links) for navigating the document or related documents.
User agents SHOULD treat elements with the role of navigation as navigational landmarks.
Screen Reader Support For Role=Navigation
| Expectation | JAWS | Narrator | NVDA | Orca | TalkBack | VoiceOver (iOS) | VoiceOver (macOS) | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Edge | Chrome | Edge | Firefox | Firefox | Chrome | Safari | Safari | |
| MUST convey its role | supported | supported | supported | partial | supported | supported | supported | unknown | partial | supported | supported |
| MUST convey its name | supported | supported | supported | partial | supported | supported | supported | unknown | partial | supported | supported |
| MUST convey the boundaries of the element | supported | supported | supported | some partial support | supported | supported | supported | unknown | none | supported | supported |
| SHOULD provide shortcuts to jump to this role | supported | supported | supported | supported | supported | supported | supported | unknown | supported | supported | supported |
Role=Navigation Example
One Navigation Landmark
When only one navigation landmark on a page, a label is optional.
<div role="navigation">
<h2>title for navigation area<h2>
<ul>
<li><a href="/page1.html">Link 1</a></li>
<li><a href="/page2.html">Link 2</a></li>
<li><a href="/page3.html">Link 3</a></li>
<li><a href="/page4.html">Link 4</a></li>
.....
</ul>
</div>More Than One Navigation Landmark
When there is more than one navigation landmark on a page, each should have a unique label.
<div role="navigation" aria-labelledby="nav1">
<h2 id="nav1">title for navigation area 1<h2>
<ul>
<li><a href="/page11.html">Link 1</a></li>
<li><a href="/page12.html">Link 2</a></li>
<li><a href="/page13.html">Link 3</a></li>
<li><a href="/page14.html">Link 4</a></li>
.....
</ul>
</div>
....
<div role="navigation" aria-labelledby="nav2">
<h2 id="nav2">title for navigation area 2<h2>
<ul>
<li><a href="/page21.html">Link 5</a></li>
<li><a href="/page22.html">Link 6</a></li>
<li><a href="/page23.html">Link 7</a></li>
<li><a href="/page24.html">Link 8</a></li>
.....
</ul>
</div>HTML5 Example
<header>
<h1>...</h1>
<nav role="navigation">
<ul>...</ul>
<form role="search">
<!-- search form -->
</form>
</nav>
</header>Characteristics
Superclass Role
- landmark
Related Concepts
- HTML nav
Inherited States and Properties
- aria-atomic
- aria-busy (state)
- aria-controls
- aria-current (state)
- aria-describedby
- aria-details
- aria-disabled (state)
- aria-dropeffect
- aria-errormessage
- aria-expanded (state)
- aria-flowto
- aria-grabbed (state)
- aria-haspopup
- aria-hidden (state)
- aria-invalid (state)
- aria-keyshortcuts
- aria-label
- aria-labelledby
- aria-live
- aria-owns
- aria-relevant
- aria-roledescription
Name From
- author
Semantic HTML
Use the HTML5 <nav> tag.
<nav>
<ul>
<li><a href=”/”>Home</a></li>
<li><a href=”/events”>Current Events</a>
</li>
</ul> </nav>
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
Reference
- W3C (opens new window)
- A11Y Support
