## Why is this an issue?

If a page contains multiple `<nav>` or `<aside>` elements, each one should have an `aria-label` or `aria-labelledby` attribute so that they can be differentiated. The same rule applies when multiple elements have a `role` attribute with the same "landmark" value.

Landmark roles are: `banner`, `complementary`, `contentinfo`, `form`, `main`, `navigation`, `search`, `application`.

The use of ARIA markup helps users of screen readers navigate across blocks of content. For example it makes groups of links easier to locate or skip.

### Noncompliant code example

Multiple `<nav>` element

    <nav> <!-- Noncompliant -->
        <ul>
            <li>A list of navigation links</li>
        </ul>
    </nav>

    <article>
        <nav> <!-- Noncompliant -->
            Another list of navigation links
        </nav>
    </article>

Repeated "landmark" role `"navigation"`

    <div id="mainnav" role="navigation"> <!-- Noncompliant -->
        <h2 id="mainnavheading">Site Navigation</h2>
        <ul>
           <li>List of links</li>
        </ul>
    </div>
    <div id="secondarynav" role="navigation"> <!-- Noncompliant -->
        <h2 id="secondarynavheading">Related links</h2>
        <ul>
           <li>List of links</li>
        </ul>
    </div>

### Compliant solution

    <nav aria-label="Site menu">
        <ul>
            <li>A list of navigation links</li>
        </ul>
    </nav>

    <article>
        <nav aria-label="Related links">
            Another list of navigation links
        </nav>
    </article>

    <div id="mainnav" role="navigation" aria-labelledby="mainnavheading">
        <h2 id="mainnavheading">Site Navigation</h2>
        <ul>
           <li>List of links</li>
        </ul>
    </div>
    <div id="secondarynav" role="navigation" aria-labelledby="secondarynavheading">
        <h2 id="secondarynavheading">Related links</h2>
        <ul>
           <li>List of links</li>
        </ul>
    </div>

## Resources

- WCAG2, ARIA11 - Using ARIA landmarks to identify regions of a page
- WCAG2, H97 - Grouping related links using the nav element
- WCAG2 1.3.1 Info and Relationships