no-duplicate-landmark-elements

✅ The extends: 'recommended' property in a configuration file enables this rule.

If multiple landmark elements of the same type are found on a page, they must each have a unique label (provided by aria-label or aria-labelledby).

List of elements & their corresponding roles:

Examples

This rule forbids the following:

<nav></nav>
<nav></nav>

<nav></nav>
<div role="navigation"></div>

<nav aria-label="site navigation"></nav>
<nav aria-label="site navigation"></nav>

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

This rule allows the following:

<nav aria-label="primary site navigation"></nav>
<nav aria-label="secondary site navigation within home page"></nav>

<nav aria-label="primary site navigation"></nav>
<div role="navigation" aria-label="secondary site navigation within home page"></div>

<form aria-label="shipping address"></form>
<form aria-label="billing address"></form>

<form role="search" aria-label="search"></form>
<form aria-labelledby="form-title"><div id="form-title">Meaningful Form Title</div></form>