Nav

Referred HTML Tags

<nav>

Essential A11y Requirements

The <nav> element represents a collection of navigational elements (usually link elements). Do not use the <nav> element for toolbars or other non-navigational buttons collection. The <nav> element is not required to be unique, so this allows you to have more than one navigational component on each page.

Accessible name

The <nav> element does not require an accessible name, though it is good practice to label it - especially if there is more than one navigational component on the page. This will allow screen reader users to get an idea about the purpose of each of them. However, if there are two similar navigational components in the page (main navigation that appears on the header and footer for example), they should be labeled the same. You can add an accessible name to <nav> elements using one of the WAI-ARIA’s labeling attributes, e.g., aria-label, aria-labelledby.

1<nav aria-label="primary">
2    <!-- navigational content -->
3</nav>
4
5<nav aria-labelledby="archive-nav-heading">
6    <h2 class="sr-only" id="archive-nav-heading">
7        Posts Archive
8    </h2>
9    <!-- navigational content -->
10</nav>

Note that when labeling a <nav> element, you shouldn't use the word "navigation" in its name since screen readers signify it by default based on the element's semantics.

Equivalent WAI-ARIA Role

role=”navigation”