Assign a navigation landmark role to the page’s main navigation
no. 018
Make sure the page navigation is identified using the navigation landmark role
It is common practice to assign descriptive ID values such as id=”nav” to navigation, but this information conveys no semantics to assistive technologies. The navigation landmark role is intended to fix this, by defining a collection of links for navigating the page or related documents. Its purpose is to identify a specific region of a page as the main navigation section, or as one of the major navigation sections available and convey that information to assistive technologies. Reserving this landmark role to the main navigation menu provides the added benefit of defining some level of hierarchy in all available navigation menus.
To do this, simply make sure the “navigation” ARIA landmark role is assigned to the main navigation of the page, or its parent container, when appropriate. As a complementary practice to provide additional confirmation about the object’s purpose, consider providing an aria-label attribute with a value of “Site Navigation” to add a descriptive label to this region.
User Story
Simple Code Example
<ul id=”nav” role=”navigation”>
<li><a href=”page1.html”>Menu Item 1</a></li>
<li><a href=”page2.html”>Menu Item 2</a></li>
<li><a href=”page3.html”>Menu Item 3</a></li>
</ul>
Testing Methodology
Using [...]