What does this accessibility issue mean?
Accessibility issue summary: Page content is not contained by accessible landmark
Web accessibility best practices suggest that all page content should be contained by an accessibility landmark to make it easier for assistive technology users to navigate the site and understand the structure of a page.
Solution:
Create accessible landmark region containers for all your page content.
Example HTML violation: Page content not contained in landmark (A11y Best Practice Violation)
<h1>Welcome to our E-commerce site</h1>
Here are some of our popular products:
<ul>
<li>Product A</li>
<li>Product B</li>
<li>Product C</li>
</ul> This example HTML violates the accessibility rule (Rule-id=region) because none of the content is contained within HTML5 landmark regions. This makes it difficult for screen reader users to navigate the site, as they rely on these landmarks to understand the structure of the page.
Below you will find a corrected version of the HTML that complies with the accessibility rule:
How to fix "Page content not contained in landmark (A11y Best Practice Violation)" issue
<header>
<h1>Welcome to our E-commerce site</h1>
</header>
Here are some of our popular products:
<ul>
<li>Product A</li>
<li>Product B</li>
<li>Product C</li>
</ul>
<footer>Copyright 2024
</footer> In this corrected version, the site's content is divided into distinct regions using the <header>, <main> and <footer> HTML5 landmark elements.
This allows screen reader users to easily navigate and understand the structure of the page.
