SiteLint documentation and guidelines

Pages should contain landmarks

Description

HTML landmarks are semantic elements that divide web pages into meaningful regions, helping users understand and navigate content structure. These landmarks serve as signposts that organize content into distinct areas like headers, footers, navigation bars, and main content sections.

Disabilities impacted

Visual impairments

  • Screen reader users can jump directly to specific sections using landmark navigation.
  • Provides quick access to main content, bypassing repetitive navigation elements.
  • Helps users understand page structure without relying on visual scanning.

Cognitive disabilities

  • Clear structure helps users with short attention spans stay oriented.
  • Consistent landmark placement reduces confusion in navigation.
  • Logical organization aids users with memory limitations in finding content.

Motor impairments

  • Keyboard users can skip repetitive content using landmark navigation.
  • Reduces number of keystrokes needed to reach desired content.
  • Improves efficiency for users who rely on assistive technologies.

Why it matters

  • Allows users to bypass repetitive content blocks.
  • Provides immediate access to main content.
  • Enables quick orientation within complex pages.

Structure understanding

  • Creates predictable page organization.
  • Helps users maintain context during navigation.
  • Supports consistent user experience across similar pages.

Coding problems and solutions

Common coding problems

  • Missing landmark elements.
  • Incorrect landmark implementation.
  • Insufficient labeling.
  • Poor nesting structure.

How to fix it

Ensure that the page has defined minimum landmarks like header, main and footer.

Correct example
<header role="banner">
    <h1>Company Name</h1>
</header>

<nav role="navigation">
    <!-- Navigation links -->
</nav>

<main role="main">
    <article>
        <h1>Article Title</h1>
        <section role="region" aria-label="Related Articles">
            <!-- Related content -->
        </section>
    </article>
</main>

<aside role="complementary">
    <!-- Supporting content -->
</aside>

<footer role="contentinfo">
    <!-- Footer content -->
</footer>

Known limitations

Browser support

  • Some older browsers may not fully support landmark navigation.
  • Screen reader support varies across platforms.

Implementation challenges

  • Complex nested structures can be confusing.
  • Dynamic content may require careful landmark management.
  • Multiple instances of same landmark type need clear differentiation.

Resources

Rule

  • Audit: Accessibility.
  • Standard: SiteLint.
  • Level: Best Practices.
  • Success Criteria: Not applicable.
  • ID: landmarks-none