The site footer needs to sit outside other landmarks

Rule: axe/landmark-contentinfo-is-top-level
Checks: Contentinfo landmark should not be contained in another landmark
WCAG: none; a best practice, not a WCAG success criterion
Fix class: mechanical: A fix needs no authored text or visual decision.

Who it affects

People who use a screen reader or a braille display, most of them blind.

How to fix it

A footer inside an article, a section or `<main>` has `role="contentinfo"`

Remove role="contentinfo". A <footer> inside <article>, <aside>, <main>, <nav> or <section> belongs to that part of the page and needs no role. Keep the contentinfo landmark for the one footer that holds site-wide information.

<main>
  <h1>Blog</h1>
  <article>
    <h2>Spring release</h2>
    <p>This release adds saved searches.</p>
    <footer>
      <p>Filed under product news</p>
    </footer>
  </article>
</main>

The site footer sits inside `<main>` or inside a wrapper with a landmark role

Move the footer out so that it follows <main> as its sibling, and take any landmark role off the wrapper around them.

<main>
  <h1>Orders</h1>
  <p>You have no open orders.</p>
</main>
<footer>
  <p>Acme Inc.</p>
</footer>

Fixes that fail

Removing `role="contentinfo"` while the site footer stays inside `<main>`

axe stops reporting it, because a <footer> inside <main> is not a contentinfo landmark. Screen reader users then lose the landmark that takes them to the footer, and hear its links as part of the page content.

More on the rule

axe-core’s documentation of the rule

CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.