ADA Compliance Professionals

    Contentinfo landmark must be top-level

    Last updated:

    Who it helps:
    Blind
    Standard:
    WCAG 2.2 Level A

    Related Guides

    Contentinfo landmark must not be inside other landmarks

    Place the contentinfo landmark at the top level of the page. Do not nest it inside main, navigation, complementary, or any other landmark region. This usually applies to the site-wide footer, which should be separate from the main content and header.

    Why It Matters

    Screen reader users rely on landmarks to jump quickly to major regions. If the contentinfo landmark is nested, it may be hidden, duplicated, or appear in the wrong place in landmark lists.

    Excess or misplaced landmarks increase cognitive load and slow navigation. Users with vision or mobility impairments may need more keystrokes to reach the footer or may miss it entirely.

    Correct landmark structure supports WCAG 2.2 success criteria such as 1.3.1 Info and Relationships and 2.4.1 Bypass Blocks.

    Common Causes

    • Placing the site footer inside <main> or <nav> containers
    • Assigning role="contentinfo" to component-level footers (e.g., card or article footers)
    • Wrapping the entire page in a landmark (or role="application") that also contains the footer
    • Multiple contentinfo roles on one page without clear purpose
    • SPA layouts where the routed <main> also wraps the footer

    How to Fix

    1. Put the site-wide footer at the top level.
      • Make the footer a sibling of banner/header and main, not a child of them.
      • Recommendation: Use <footer> as a direct child of <body> when feasible.
    2. Use the correct role.
      • A top-level <footer> maps to contentinfo automatically in modern browsers. Adding role="contentinfo" is optional but acceptable.
      • Do not give role="contentinfo" to footers inside article, section, nav, aside, or main.
    3. Keep one site-wide contentinfo.
      • Have one primary contentinfo landmark per page for the global footer.
      • If you must include additional region footers, leave them without a landmark role or use role="group" with an aria-label.
    4. Avoid enclosing landmarks that break semantics.
      • Do not wrap the whole document in role="application".
      • Ensure layout wrappers (grids, containers) do not carry landmark roles that would swallow the footer.
    5. Verify the order and scope.
      • Typical order: banner → navigation → main → complementary → contentinfo.
      • Ensure contentinfo is discoverable as a separate, last region.

    How to Test

    Keyboard check

    • Tab through the page. Ensure footer links are reachable and focus is not trapped inside other regions.

    Screen reader check (desktop)

    • NVDA: Press NVDA+F7, open Landmarks. Confirm one Content info entry at the end and that its items match the site-wide footer.
    • JAWS: Open the list of landmarks. Verify a single Content Information region that is not nested under Main.
    • VoiceOver (macOS): VO+U, Landmarks. Confirm Content Information appears once and is last/sibling to Main.

    Mobile/touch check

    • iOS VoiceOver: Use the rotor set to Landmarks. Navigate to Content Information and confirm it jumps to the site footer.
    • Android TalkBack: Use the Navigation menu → Landmarks. Ensure Content Information goes to the global footer.

    Quick checklist

    • Contentinfo is present exactly once for the site-wide footer
    • The footer is not inside main, nav, complementary, or other landmarks
    • Component or article footers do not use role="contentinfo"
    • No role="application" wrapper around the page
    • Landmark order is logical; contentinfo appears last at the page level
    • Screen reader landmark lists show one top-level Content Information

    Good Example

    HTML
    <header role="banner">
  <h1>Site Name</h1>
</header>
<nav aria-label="Primary">
  <ul><li><a href="#">Home</a></li></ul>
</nav>
<main id="content" role="main">
  <h2>Page Title</h2>
  <p>Page content...</p>
</main>
<footer role="contentinfo" aria-label="Site footer">
  <p>© 2026 Example Co. • <a href="/privacy">Privacy</a></p>
</footer>

    Bad Example

    HTML
    <main role="main">
  <h2>Page Title</h2>
  <p>Page content...</p>
  <footer role="contentinfo">
    <p>© 2026 Example Co. • <a href="/privacy">Privacy</a></p>
  </footer>
</main>

    Quick Checklist

    • Site-wide footer is a top-level region
    • Only one contentinfo landmark exists per page
    • No contentinfo inside main, nav, aside, or section
    • Component footers do not declare contentinfo
    • Avoid role="application" on page wrappers
    • Landmarks list shows Content Information at the end
    • Footer content is reachable and announced correctly