What does this accessibility issue mean?
Accessibility issue summary: heading elements are not accessible
Heading elements help break up a page’s content into logical sections. For users who are visually impaired and relying on assistive technology like screen readers, use of bold text or other non-header elements instead of a logical h1, h2, etc. structure can make it more difficult to understand and navigate your site’s content. Likewise, use of heading elements for purely visually stylistic reasons (for example, to create a pull-quote effect or similar) can be confusing for assistive technology users.
Solution:
Ensure headings on a page have discernible text and are used appropriately.
Example HTML violation: Indiscernible heading element (A11y Best Practice Violation)
<h1></h1>
<!-- rest of content -->In the above code, the h1 tag doesn't contain any text or relevant description of the page content, which means screen reader users may not understand the context or the purpose of the page when they navigate through it. This violates the "empty-heading" accessibility rule as defined by the 'W3.org ACT Rules' standards.
Here is how to resolve this issue:
How to fix "Indiscernible heading element (A11y Best Practice Violation)" issue
<h1>Welcome to My E-commerce Website</h1>
<!-- rest of content -->In the revised code, the h1 tag includes a descriptive text "Welcome to My E-commerce Website", which clearly describes the purpose of the page. The 'accessible name' of the h1 HTML element is no longer null or empty, which resolves the violation of the 'empty-headed' rule. To learn more about web accessibility rules and guidelines, consider visiting W3.org Web Accessibility Initiative.
