What does this accessibility issue mean?
Issue summary: Accessibility landmark with “contentinfo” role is not top-level
The “contentinfo” landmark role attribute is used to identify “footer” content on a page and should only be used once on a page. It should always be used as a top-level accessibility landmark.
On websites, accessibility landmarks enable blind or visually impaired visitors using screen readers to jump to various sections of a web page.
Other landmark roles that should only be used on top-level landmarks include:
- banner
- main
- complementary
Solution:
Ensure the contentinfo landmark is at the top level.
Example HTML violation: “Contentinfo” landmark not top level (A11y Best Practice Violation)
<!DOCTYPE html>
<html lang='en' class='no-js'>
<head>
<title>Online Store</title>
</head>
<body>
<main>
<h1>Welcome to our store</h1>
<!-- ... -->
<nav>
<ul>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>Products</a>
</li>
<!-- ... -->
</ul>
<footer role='contentinfo'>
<!-- Here lies the issue -->
<p>Copyright © 2022. All Rights Reserved.</p>
</footer>
</nav>
</main>
</body>
</html>Explanation: In this code, the 'contentinfo' landmark (the <footer> with role='contentinfo') is nested within a <nav> landmark, which is inside of a <main> landmark. This violates the 'Contentinfo landmark not top level' accessibility rule because it's not at the top level of the HTML document, it's contained within other landmarks.
Here's how you can correct this issue:
How to fix "“Contentinfo” landmark not top level (A11y Best Practice Violation)" issue
<!DOCTYPE html>
<html lang='en' class='no-js'>
<head>
<title>Online Store</title>
</head>
<body>
<main>
<h1>Welcome to our store</h1>
<!-- ... -->
<nav>
<ul>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>Products</a>
</li>
<!-- ... -->
</ul>
</nav>
</main>
<footer role='contentinfo'>
<!-- Now the footer is at the top level -->
<p>Copyright © 2022. All Rights Reserved.</p>
</footer>
</body>
</html>In the corrected code, the <footer> with role='contentinfo' is now at the top level, directly inside the <body> of the document. It's no longer contained within any other landmark, bringing it in compliance with the 'Contentinfo landmark not top level' accessibility rule.
