Skip to main content

aria-hidden-focus

Severity: Serious

Description

No element defined as aria-hidden="true" should contain focusable elements.

Setting an element to aria-hidden="true" makes it invisible to screen readers and assistive technologies. This attribute can be useful for instructing these technologies to ignore non-essential elements on a webpage. However, if an element with aria-hidden="true" contains focusable elements (such as links, buttons, or form fields), it can create a confusing experience for users who rely on assistive technologies. Therefore, you should avoid placing focusable elements inside elements marked with aria-hidden="true".

Example

In the following example, the div with aria-hidden="true" contains a button and a link, which are focusable elements. Screen readers and other assistive technologies will ignore the entire div with aria-hidden="true". This makes the following code inaccessible and breaks the aria-hidden-focus rule.

Incorrect sample - focusable elements
Copy icon Copy snippet

In contrast, the following code snippet has only non-essential information under the div with aria-hidden="true". The focusable button and link are moved outside the div with aria-hidden="true". This makes the following code accessible and doesn’t break the aria-hidden-focus rule.

Correct sample with non-essential info
Copy icon Copy snippet

How to fix?

You can follow these steps to fix issues if this rule gets flagged:

  • Check if any element on your webpage sets the aria-hidden attribute as true. If so, ensure that it doesn’t have any focusable elements.

Reference

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback!

Talk to an Expert
Download Copy