What does this accessibility issue mean?
Issue summary: page is missing an <h1> element (level-one heading)
To comply with digital accessibility best practices, there should be at least one <h1> (level one heading) per page on your website.
This should contain the main heading of the page and it should be the first heading element on the page.
If your page does not include an h1, it may cause issues for visitors using assistive technologies like screen readers.
Solution:
Ensure that each page — or at least one of its frames — contains a level-one heading (h1).
Example HTML violation: Page is missing level-one (h1) heading (A11y Best Practice Violation)
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Products</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
<div> Welcome to our ecommerce website!
<!-- More content... -->
</div>Explanation: This code violates the accessibility rule because it is missing a level-one heading (<h1>). According to the accessibility rule (rule-id: 'page-has-heading-one'), each page should begin with an </h1> <h1> heading as it helps with the overall structure of the webpage and makes it easier for assistive technologies to understand the main content of the page.</h1>
Here's the corrected code with a level-one heading:
How to fix "Page is missing level-one (h1) heading (A11y Best Practice Violation)" issue
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Products</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
<div>
<h1>Welcome to our ecommerce website!</h1>
<!-- More content... -->
</div>Now, the corrected code has a level-one heading (<h1>) which gives the overall context and provides structure to the webpage content.
