Make sure the contentinfo landmark is at top level
The landmark-contentinfo-is-top-level
rule checks that any element with
role="contentinfo"
or
<footer>
is not nested inside another landmark.
Footer and content information are meant to be at the top level so screen reader users can easily locate them.
What is being tested?
This rule verifies that:
- Elements with
role="contentinfo"
or<footer>
are placed at the top level of the page, outside other landmarks likemain
orcomplementary
.
Why it matters
The contentinfo
landmark is intended to help screen reader users quickly find site-wide footer information, such as copyright notices or contact details.
If it’s nested inside another landmark, this navigation benefit is lost, making it harder for users to locate important information.
Failing example
<main> <p>Page content</p> <footer>Site footer</footer> </main>
Here, the <footer>
is incorrectly placed inside
<main>
.
Passing example
<main> <p>Page content</p> </main> <footer>Site footer</footer>
Here, the <footer>
is correctly placed at the top level.
Best practices
- Place the
contentinfo
landmark or<footer>
at the root level of the page. - Do not nest the footer inside other landmarks like
main
orcomplementary
. - Use landmarks and headings together to create a clear, navigable page structure.
Other Rules
Interested in other web accessibility rules? Please see these other rules: