HTML Guide for navigation

The role attribute value navigation is invalid for a ul element, as it should be used with a nav element or similar suitable elements.

In HTML, the role attribute defines what an element represents in the context of accessible web technologies, primarily for assistive tools like screen readers. The nav element represents a section of a page intended for navigational links, and it inherently provides the role of navigation. If you want to make a ul element serve as navigation, it is more appropriate to use it inside a nav element, or alternatively, set a valid ARIA role on the element itself.

Detailed Explanation

HTML5 introduced a specific set of elements with implicit ARIA roles and behaviors, like the nav element, which implicitly has the navigation role. For backward compatibility or advanced use cases, developers might explicitly set ARIA roles using the role attribute. However, setting an invalid role can lead to accessibility issues, as seen with trying to assign navigation to a ul element.

Instead of applying the navigation role to a ul directly, wrap your ul with a nav element.

The allowed ARIA roles for an ul element are directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar and tree, but not navigation.

Examples

Here is how you can use the nav element with a ul.

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

The navigation landmark role is used to identify major groups of links used for navigating through a website or page content. It can be added to an element that contains navigation links by using role="navigation", but instead it’s preferable to just use the <nav> element. In that case, it’s unnecessary to make the navigation role explicit.

Examples:

<div role="navigation">
  <!-- this is a valid way to define a navigation role -->
</div>

<nav>
   <!-- but this is shorter and uses correct semantic HTML  -->
</nav>