aria-hidden-focus

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.

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.

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

• WCAG 4.1.2: Name, Role, Value
• aria-hidden HTML attribute