Ask the Community
landmark-contentinfo-is-top-level
Rule Severity : Moderate
Description
The landmark-contentinfo-is-top-level rule ensures that the contentinfo landmark (represented by a top-level <footer> element or an element with role="contentinfo") is a direct child of the <body> element and is not nested inside any other landmark region. When the contentinfo landmark is nested inside another landmark (such as <main> or <section>), it loses its document-level scope and may not be discoverable by screen reader users navigating by landmark.
This rule meets WCAG requirements by:
- Exposing Document Structure (WCAG 1.3.1 Info and Relationships): It ensures the document’s footer content is correctly positioned in the accessibility tree at the top level, making its structural role programmatically determinable.
- Enabling Efficient Navigation (WCAG 2.4.1 Bypass Blocks): It allows users of assistive technologies to jump directly to the page footer via landmark navigation, providing an efficient mechanism to reach or bypass the document’s closing information.
To comply with this rule, ensure that <footer> elements carrying the contentinfo role are direct children of <body>, not nested inside <main>, <article>, <section>, or any other landmark.
Examples
This example shows the <footer> placed inside the <main> element, which nests the contentinfo landmark inside another landmark and removes its document-level scope.
Here, the <footer> is placed as a direct sibling of <main> and a direct child of <body>, giving it the correct top-level document scope.
How to fix?
To fix violations of the landmark-contentinfo-is-top-level rule, follow these steps:
-
Move the
<footer>element (or element withrole="contentinfo") so that it is a direct child of the<body>element, not nested inside any other landmark region. -
Ensure the footer contains document-level information such as copyright notices, contact links, and privacy policy links: content that applies to the whole page rather than a specific section.
-
Note that
<footer>elements placed inside<article>,<section>,<aside>, or<nav>do not carry thecontentinforole; only a top-level<footer>does. This is by design and is acceptable for section-scoped footers.
Reference
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!