require-landmark-label

Warns when a landmark role (banner, main, complementary, contentinfo, form, navigation, or region) appears more than once in a tree and an occurrence lacks a unique accessible name (aria-label or aria-labelledby), per APG's Landmark Regions practice.

The document is one tree, and the content of a template element and a declarative shadow root are trees of their own, where it is not known from the markup where they are inserted: the landmarks of each tree are counted by themselves. In React and Vue, the children of a template element without a directive are in the tree of the document.

Split out of the former landmark-roles rule, alongside no-nested-top-level-landmark.

❌ Examples of incorrect code for this rule

<!doctype html>
<html>
  <body>
    <nav>...</nav>
    <main>
      <nav>Duplicate navigation landmark without a label</nav>
    </main>
  </body>
</html>

✅ Examples of correct code for this rule

<!doctype html>
<html>
  <body>
    <nav aria-label="main">...</nav>
    <main>
      <nav aria-label="sub">...</nav>
    </main>
  </body>
</html>

Interface

{
  "require-landmark-label": boolean
}

Default Severity

warning