Element with aria-hidden is focusable

Last updated:

This evaluation is included in the Accessibility audit offered by ExcellentWebCheck. Ensuring website accessibility is essential to ensure everyone can use the internet without barriers.

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>


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:

    <a href="/">Link</a>

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>

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>

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 />

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.

Was this article helpful?
Thanks for your feedback!

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.