What does this accessibility issue mean?
Accessibility issue summary: aria-hidden elements are set to be ‘focusable’
Using an aria-hidden state can ‘hide’ visually displayed content from accessibility APIs or screen readers, preventing that part of your page from being read by screen readers. It is recommended that, if you are using aria-hidden on any elements on your site, you proceed with caution and also ensure that equivalent content, meaning, or functionality is accessible by assistive technologies.
Additionally, if an element is set as aria-hidden while still being focusable, it can cause confusion for screen readers, as its inclusion in the focus order (despite having aria-hidden=”true” in place) makes it unclear to assistive technologies whether the element should be accessible or hidden.
This accessibility issue is related to WCAG Level A rules around Name, Role, Value.
If elements with aria-hidden=”true” are also set to tabindex=”-1″, it violates the accessibility rules of WCAG, Level A.
Solution:
Ensure aria-hidden elements are not focusable nor contain focusable elements.
Example HTML violation: Focusable aria-hidden element (WCAG Level A Issue)
<header>
<nav>
<a href="/home-page.html">Home</a>
<div aria-hidden="true">
<a tabindex="0" href="product-page.html">Product</a>
</div>
</nav>
</header>
<main>
<!-- Main content here -->
</main>The above HTML violates the aria-hidden-focus accessibility rule because the "Product" link, which is focusable, is nested inside an element with aria-hidden="true". This attribute is intended to hide elements from assistive technologies like screen readers. However, the inclusion of tabindex="0" makes the "Product" link focusable by keyboard. As a result, this creates a situation where keyboard or screen reader users cannot access the link, contradicting accessibility rules.
How to fix "Focusable aria-hidden element (WCAG Level A Issue)" issue
<header>
<nav>
<a href="home-page.html">Home</a>
<a href="product-page.html">Product</a>
</nav>
</header>
<main>
<!-- Main content here -->
</main>In this corrected version, we simply removed the parent div with aria-hidden="true" from the "Product" link. This makes the "Product" link both visible and accessible to assistive technologies, as well as keyboard navigation.Here's a brief summary of what was corrected:
-
Removed the div containing
aria-hidden="true"from around the "Product" link. Due to the presence of this attribute, assistive technologies would not have been able to 'see' or announce this link to users. -
Removed
tabindex="0"from the "Product" link as it is not needed. By default, links are focusable, so it's redundant and can occasionally cause tabbing order issues.
For future reference, you can take a look at the W3C guidelines on using ARIA to learn more about its proper use to enhance the accessibility of your web content.
