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 tab order. So if you have added aria-hidden="true" but the element is still focusable, either aria-hidden="true" is not appropriate on this element or the element should not be focusable.
More info:
Free Website Accessibility Audit