Best Practices

Distinguishing Multiple Navigation Regions

It is incredibly common for modern websites to feature more than one navigation block, such as a primary header menu and a secondary profile or footer menu. When utilizing multiple <nav> elements on a single page, you must provide unique accessible names using aria-label. This allows users relying on assistive technology to immediately understand the purpose of each menu without having to read through the links inside.

(Note: Singular, unique regions like <main> automatically announce their purpose and generally do not require additional ARIA labeling).

<nav aria-label="Primary">
    <ul>
        <li><a href="/dashboard">Dashboard</a></li>
        <li><a href="/profile">Profile</a></li>
    </ul>
</nav>

<nav aria-label="Account Links">
    <ul>
        <li><a href="/help">Help Center</a></li>
        <li><a href="/logout">Log Out</a></li>
    </ul>
</nav>

Leveraging Existing Headings for Labels

Whenever possible, prefer using visible text to label your regions rather than hiding the label in the code. If a structural area (like an <aside>) already contains a descriptive heading, you can establish a programmatic connection between the two using the aria-labelledby attribute. This approach ensures the accessible name perfectly matches the visual experience.

<aside aria-labelledby="toc-heading">
    <h2 id="toc-heading">On this Page</h2>
    <ul>
        <li><a href="#intro">Introduction</a></li>
        <li><a href="#details">Details</a></li>
    </ul>
</aside>

WCAG Considerations

• WCAG 2.4.6: Headings and Labels (Level AA): Providing descriptive, clear labels for distinct landmarks helps users confidently navigate complex interfaces.
• ARIA Landmarks Example: The WAI-ARIA Authoring Practices Guide strongly recommends unique labels whenever multiple structural landmarks of the exact same type are present.