• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Logo for DigitalA11Y

Digital A11Y

Your Accessibility Partner

  • About
    • Bio
      • Conference Speaking
      • Videos
      • mentions
  • Articles
  • Resources
    • WAI-ARIA
    • WCAG
    • Cheat Sheets
    • A11Y Blogs
    • A11Y Toolkit
  • Contact
You are here: Home / WAI-ARIA: Role=Navigation

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.

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)

Share A11Y Love

  • Twitter
  • LinkedIn
  • Facebook
  • Reddit

Primary Sidebar

Get Digital A11Y in Your Inbox

Recent A11Y Articles

  • WCAG 2.1 Checklist
  • A Sneak peek into WCAG 3.0 First Public Draft
  • Understanding SC 4.1.3 Status messages
  • Understanding SC 2.5.4 Motion Actuation
  • Understanding SC 2.5.3 Label in Name

Recent Comments

  • Isaac Williams on Digital Accessibility Companies Roundup
  • Vaibhav Mishra on Understanding SC 3.3.1 Error Identification
  • Vaibhav Mishra on Understanding SC 1.3.2 Meaningful Sequence
  • Donal Rice on Digital Accessibility Companies Roundup
  • Rajath on A Sneak peek into WCAG 3.0 First Public Draft

A11Y Categories

  • Design
  • Events
  • HTML
  • IOS
  • Mobile Accessibility
  • News
  • Tools
  • WAI-ARIA
  • WCAG
  • Web Accessibility

  • Privacy Policy
  • Sitemap
© 2021 Digital A11Y