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
<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.
How to implement
- Ensure that the local navigation component’s navigational content is wrapped in a
<nav>element and has an
aria-labelledbyattribute that identifies what this specific navigational set is called.
- Ensure that the
aria-labelledbyattribute 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 an
aria-labelattribute or an
- Confirm that no other element on the page has the same
<label>element value or