On this page
Goal
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
- Ensure that the local navigation component’s navigational content is wrapped in a
<nav>
element and has anaria-label
oraria-labelledby
attribute that identifies what this specific navigational set is called. - Ensure that the
aria-label
oraria-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
- 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 anaria-label
attribute or anaria-labelledby
attribute. - Confirm that no other element on the page has the same
<label>
element value oraria-label
oraria-labelledby
attribute value.