• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Digital A11Y

Digital A11Y

Your Accessibility Partner

  • About
  • Articles
  • WAI-ARIA
  • WCAG
  • Resources
    • Cheat Sheets
    • A11Y Blogs
    • A11Y Toolkit
  • Contact

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

  • Understanding SC 4.1.3 Status messages
  • Understanding SC 2.5.4 Motion Actuation
  • Understanding SC 2.5.3 Label in Name
  • Knowbility looking for mentors in its Accessible Internet Rally
  • Understanding SC 2.5.2 Pointer Cancellation

Recent Comments

  • Al on Understanding SC 4.1.2 Name, Role, Value
  • Randy on Screen Readers & Browsers! Which is the Best Combination for Accessibility Testing?
  • Raghavendra Satish Peri on Screen Readers & Browsers! Which is the Best Combination for Accessibility Testing?
  • Raghavendra Satish Peri on Understanding SC 1.4.12 Text Spacing
  • Raghavendra Satish Peri on Understanding SC 4.1.2 Name, Role, Value

A11Y Categories

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

  • Privacy Policy
  • Sitemap
© 2021 Digital A11Y