navigation

ARIA landmark role, which defines the area for site navigation.

The role navigation is default for <nav>.

        
          
          <div role="navigation">  <ul>    <li>      <a href="#tapirs-life">Where tapirs live</a>    </li>    <li>      <a href="#tapirs-food">What tapirs eat</a>    </li>  </ul></div>
          <div role="navigation">
  <ul>
    <li>
      <a href="#tapirs-life">Where tapirs live</a>
    </li>
    <li>
      <a href="#tapirs-food">What tapirs eat</a>
    </li>
  </ul>
</div>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Screen readers will read the demo approximately like this: "Navigation, landmark. List, three items." Users will also be able to navigate to the navigation through a special list of all landmarks.

Add to the tag role="navigation". It is better if these are semantically neutral <div> or <span>. One of the rules for using ARIA is to not overwrite roles without necessity.

An element with the role navigation contains other elements for navigation within the current document or those that refer to other documents. Usually, this is done with links.

In most cases, it's better to use <nav> instead of the role navigation.

If there are several <nav> or elements with the role navigation on the page, each should have its unique name using aria-label. However, when there are multiple navigations with the same set of links, assign them the same name. When there are two navigations on the page with the same name, the user will understand that they have the same links and can choose either.

For an element with the role navigation, all global ARIA attributes can be used.

The role navigation creates a landmark on the page. This means that users screen readers can quickly jump to this part of the page using hotkeys or through a menu with landmarks.