Skip to main content

landmark-roles

  • Whether banner, main, complementary and contentinfo are top-level landmarks
  • Whether a specific landmark roll has unique label when used multiple times on a page
  • Whether perceptible content exists on any landmark (Work in progress)

Check the above and warn if it is not satisfied.

It is based on W3C Landmark Regions.

❌ Examples of incorrect code for this rule

<!doctype html>
<html>
  <body>
    <header>...</header>
    <nav>...</nav>
    <main>
      <header>...</header>
      <footer>...</footer>
      <nav>Duplicate navigation landmarks without a label</nav>
      <aside>Complementary landmark not at the top level</aside>
    </main>
    <footer>...</footer>
  </body>
</html>

✅ Examples of correct code for this rule

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

Interface​

{
  "landmark-roles": boolean
}

Options​

{
  "landmark-roles": {
    "options": {
      "ignoreRoles"?: ("banner" | "main" | "complementary" | "contentinfo" | "form" | "navigation" | "region")[]
      "labelEachArea"?: boolean
    }
  }
}
PropertyTypeDefault ValueDescription
ignoreRoles("banner" | "main" | "complementary" | "contentinfo" | "form" | "navigation" | "region")[]"[]"Excludes the specified landmark roll from the warning.
labelEachAreaboolean"true"Warn if there is a unique label if a particular landmark role is used multiple times on the page.

Default Severity​

warning