Is the local navigation identified with a <nav> tag and an aria label?


Ensure that navigation blocks are explicitly coded as navigation in the HTML so that assistive technology (AT) can programmatically identify them to the user.

Why this matters

The <nav> element identifies when a section of content is specifically being used for navigation. Identifying the navigation using semantic HTML helps to ensure users can locate and skip past these elements, which are frequently repeated on every page, if they’re using AT such as screen readers.

Read Why does it matter if our HTML is semantic? for more on semantic HTML. 

This test satisfies 1.3.1 Information and Relationships – Level A and 1.3.6 Identify Purpose – Level AAA

How to implement

  1. Ensure that the local navigation component’s navigational content is wrapped in a <nav> element and has an aria-label or aria-labelledby attribute that identifies what this specific navigational set is called.
  2. Ensure that the aria-label or aria-labelledby attribute is unique, because if there are two elements on the page with the same label, voice recognition assistive technology can be confused on which one to pick.

How to test

  1. Right-click each of the navigational sections in the page and inspect the page to ensure that the navigational content is wrapped in a <nav> element with either an aria-label attribute or an aria-labelledby attribute.
  2. Confirm that no other element on the page has the same <label> element value or aria-label or aria-labelledby attribute value.