template-no-duplicate-landmark-elements.md

ember/template-no-duplicate-landmark-elements

💼 This rule is enabled in the 📋 template-lint-migration config.

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).

Rule Details

List of elements & their corresponding roles:

• header (banner)
• main (main)
• aside (complementary)
• form (form, search)
• nav (navigation)
• footer (contentinfo)

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>

References

• WAI-ARIA specification: Landmark Roles
• Understanding Success Criterion 1.3.1: Info and Relationships
• Using aria-labelledby to name regions and landmarks
• Using aria-label to provide labels for objects