Ensure landmarks are unique

The landmark-unique rule ensures that all landmark regions on a page have a unique combination of role, aria-label, or title. Landmarks help screen reader users navigate a page efficiently, and duplicate landmark names or roles can cause confusion.

What is being tested?

This rule checks that:

• Each landmark (such as <main>, <header>, role="navigation", etc.) has a unique role or unique role + aria-label or role + title combination.

Correct markup examples

<main id="pass-main">Only main</main>

<header id="pass-header">Only header</header>

<form aria-label="form-label-1"></form>
<form aria-label="form-label-2"></form>

<div id="form-label-1">form-with-label-1</div>
<form aria-labelledby="form-label-1"></form>

<footer id="pass-footer">Only footer</footer>

Incorrect markup examples

<main id="violation-main-1">First main</main>
<main id="violation-main-2">Second main</main>

<header>First header</header>
<header>Second header</header>

<form aria-label="form-label"></form>
<form aria-label="form-label"></form>

<nav aria-label="duplicate label for nav"></nav>
<nav aria-label="duplicate label for nav"></nav>

These examples fail because they reuse the same role or the same role + label combination multiple times.

Why it matters

Landmarks allow screen reader users to quickly navigate between sections of a page. When multiple landmarks have the same role or label, it becomes unclear which section each one represents, reducing usability and increasing user frustration.

Best practices

• Ensure each landmark has a unique role, or a unique combination of role and aria-label or title.
• For repeated landmarks (like multiple nav regions), add distinct aria-label values (e.g., “Primary Navigation,” “Footer Navigation”).
• Audit your page for repeated landmark roles and add labels where needed to make them unique.