SiteLint documentation and guidelines

Navigation landmark restrictions

Description

Landmark roles, such as navigation, main, header, footer, aside, and section, help define the structure of a webpage. These roles make it easier for users of assistive technologies to understand and navigate the content. Restrictions on these landmarks ensure they are used appropriately and effectively to create a clear and accessible structure.

Disabilities impacted

  • Visual impairments: users with visual impairments who rely on screen readers benefit from landmarks, as they provide a way to navigate quickly to different sections of the page.
  • Cognitive disabilities: users with cognitive disabilities benefit from a well-structured page, as landmarks help them understand and focus on different parts of the content.
  • Motor impairments: users with motor impairments who navigate using keyboards or assistive devices can use landmarks to move efficiently through the page without excessive tabbing.

Why it matters

Proper use of landmark roles ensures that the structure of the webpage is clear and navigable, which enhances accessibility and usability for all users. Misuse of landmarks can lead to confusion and a poor user experience, particularly for those relying on assistive technologies.

Coding problems and solutions

Common coding problems

  • Multiple navigation landmarks: using multiple nav elements without distinguishing them can confuse users.
  • Improper nesting: nesting landmarks improperly, such as placing main within another main, can disrupt the page structure.
  • Lack of unique identifiers: failing to provide unique identifiers for multiple landmarks of the same type, making it difficult for users to distinguish between them.

How to fix it

Use unique identifiers for multiple navigation landmarks

When using multiple nav elements, ensure they have unique identifiers and labels.

Incorrect example
<nav>
    <!-- Navigation links -->
</nav>
<nav>
    <!-- Additional navigation links -->
</nav>
Correct example
<nav id="primary-nav" aria-label="Primary navigation">
    <!-- Navigation links -->
</nav>
<nav id="secondary-nav" aria-label="Secondary navigation">
    <!-- Additional navigation links -->
</nav>

Avoid improper nesting of landmarks

Ensure that landmarks are not nested improperly.

Incorrect example
<main>
    <main>
        <h1>Nested Main Content</h1>
    </main>
</main>
Correct example
<header>
    <h1>Website Title</h1>
</header>
<main>
    <article>
        <h2>Article Title</h2>
        <p>Article content...</p>
    </article>
</main>
<footer>
    <p>Footer content...</p>
</footer>

Provide clear labels and roles

Ensure that each landmark has a clear role and, if necessary, an ARIA label for further distinction.

Incorrect example
<header>
    <h1>Website Title</h1>
</header>
<nav>
    <!-- Navigation links -->
</nav>
<main>
    <article>
        <h2>Article Title</h2>
        <p>Article content...</p>
    </article>
</main>
<footer>
    <p>Footer content...</p>
</footer>
Correct example
<header role="banner">
    <h1>Website Title</h1>
</header>
<nav role="navigation" aria-label="Main navigation">
    <!-- Navigation links -->
</nav>
<main role="main">
    <article>
        <h2>Article Title</h2>
        <p>Article content...</p>
    </article>
</main>
<footer role="contentinfo">
    <p>Footer content...</p>
</footer>

Known Limitations

  • Complex layouts: for complex layouts, ensure that landmarks are used correctly to maintain a clear and accessible structure.
  • Dynamic content: when content is loaded dynamically, ensure that landmarks are updated appropriately to reflect the new structure.
  • Browser and assistive technology variability: different browsers and assistive technologies may handle landmarks differently. Comprehensive testing across multiple platforms is recommended.

Resources