Element with aria-hidden is focusable
Last updated:
How to fix the aria-hidden focus accessibility issue?
Elements with the aria-hidden="true" attribute should not be focusable, and neither should their children be focusable.
This html is not accessible because it contains an element that is focusable
while the parent has the aria-hidden="true" attribute.
<div aria-hidden="true">
<a href="/">Link</a>
</div>
The purpose of aria-hidden is to let assistive technologies know that an element is not visible on the screen and should therefore not be announced by for example screen readers.
The aria-hidden attribute should for example be used when an element is hidden behind another element.
Possible solutions are
The element should not have an aria-hidden="true" attribute
Remove the aria-hidden="true" attribute if the element is visible on the page.
The correct HTML would be:
<div>
<a href="/">Link</a>
</div>
Hide the child element
Setting the display to none removes the ability to focus the element since it is no longer visible.
<div aria-hidden="true">
<a href="/" style="display:none">Link</a>
</div>
Add tabindex="-1" attribute to remove focus
Setting the tabindex to -1 removes the ability to focus the element.
<div aria-hidden="true">
<a href="/" tabindex="-1">Link</a>
</div>
Disable the input element
Adding disabled state to the input element removes the ability to focus the element.
<div aria-hidden="true">
<input name="email" disabled />
</div>
Why is this important?
Adding aria-hidden="true" to an element removes the element and its children from the Accessibility tree.
When aria-hidden="true" is applied, the element is no longer announced by screen readers.
However, adding aria-hidden=true does not automatically remove the element from the tabindex.
So if you have added aria-hidden=true but the element is still focusable, either you aria-hidden=true is not appropriate on this element or the element should not be focusable.
Free Website Accessibility Audit
Checkout the ExcellentWebCheck services
ExcellentWebCheck's goal is to improve the online user experience. The tools of ExcellentWebCheck help to detect and improve usability problems on your website.