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
<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.
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 if the element is visible on the page.
The correct HTML would be:
<div> <a href="/">Link</a> </div>
Hide the child element
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>
tabindex="-1" attribute to remove focus
-1 removes the ability to focus the element.
<div aria-hidden="true"> <a href="/" tabindex="-1">Link</a> </div>
Disable the input element
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?
aria-hidden="true" to an element removes the element and its children from the Accessibility tree.
aria-hidden="true" is applied, the element is no longer announced by screen readers.
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
We are sorry to hear that you are not satisfied with the content on this page.
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.