WAI-ARIA: Role=Navigation

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated : Roles
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.

Screen Reader Support For Role=Navigation

ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
MUST convey its rolesupportedsupportedsupportedpartialsupportedsupportedsupportedunknownpartialsupportedsupported
MUST convey its namesupportedsupportedsupportedpartialsupportedsupportedsupportedunknownpartialsupportedsupported
MUST convey the boundaries of the elementsupportedsupportedsupportedsome partial supportsupportedsupportedsupportedunknownnonesupportedsupported
SHOULD provide shortcuts to jump to this rolesupportedsupportedsupportedsupportedsupportedsupportedsupportedunknownsupportedsupportedsupported

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

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

Share A11Y Love

Avatar for Raghavendra Satish Peri

Raghavendra Satish Peri empowers enterprises with his expertise in digital accessibility and marketing. Through his impactful work, he collaborates with both small businesses and large enterprises, spearheading digital transformation initiatives. Raghavendra is the author behind the influential Accessibility Blog hosted at DigitalA11Y.com, where he delves into the intricate realm of digital accessibility and its significance.
Passionate about fostering change within the tech landscape, Raghavendra actively inspires local tech communities through engaging meetups and mentorship. He is the driving force behind HelloA11Y.com, a vibrant platform that unites accessibility professionals, developers, and enthusiasts, propelling the adoption of accessible practices.
Beyond the digital realm, Raghavendra seeks diverse experiences. You might find him exploring various cuisines at local cafes and restaurants or immersing himself in thought-provoking audio books. His insights and musings also find a home on his Personal Blog at raghava.in, where he shares his thoughts and experiences with a wider audience.

Similar Posts

WAI-ARIA: Role=Note

WAI-ARIA: Role=Note

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

A section whose content is parenthetic or ancillary to the main content of the resource. Description A section whose content is parenthetic or ancillary to the main content of the resource. Role=Note Example HTML Example 1 HTML Example 2 Characteristics Superclass Role Inherited States and Properties Name From Semantic HTML No HTML element equivalent. Reference

WAI-ARIA: ROLE=FIGURE

WAI-ARIA: ROLE=FIGURE

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

A perceivable section of content that typically contains a graphical document, images, code snippets, or example text. The parts of a figure MAY be user-navigable. Description New in ARIA 1.1 A perceivable section of content that typically contains a graphical document, images, code snippets, or example text. The parts of a figure MAY be user-navigable….

WAI-ARIA :Role=Searchbox

WAI-ARIA :Role=Searchbox

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

A type of textbox intended for specifying search criteria.Widget role Description New in ARIA 1.1A type of textbox intended for specifying search criteria. See related textbox and search. Role=Searchbox Example HTML Example HTML Example 2 Characteristics Superclass Role Base Concept Inherited States and Properties Name From Accessible Name Required Semantic HTML No HTML element equivalent.The…

Leave a Reply

Your email address will not be published. Required fields are marked *