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