An element with aria-hidden was found in sequential focus navigation
| Field | Value |
|---|---|
| Rule code | Html_AriaHidden_Tabable |
| WCAG conformance level | A |
| WCAG success criterion | 4.1.2 Name, Role, Value |
| Must be fixed at source | No |
Description
We detected an element with an aria-hidden attribute value that is set to true and is also part of the page's sequential focus navigation. When an element has the attribute of aria-hidden set to true, the element hides itself and all of its content from assistive technologies. If the element is given a positive tabindex attribute or is still tabable, users will encounter this element and this may cause confusion for users of assistive technologies because the element can be reached via sequential focus navigation, but it should be hidden and not included in the accessibility tree.
How to fix
Add a tabindex="-1" attribute on all elements that are interactive and nested in an element that has an [aria-hidden=true] attribute. In cases where non inherently interactive elements were given an ARIA-role, the role can be changed to [role="presentation"] or the elements can be given a [tabindex="-1"]. For example:
<div aria-hidden="true">
<button tabindex="-1">Click me</button>
<input type="text" tabindex="-1" disabled />
<div role="button" tabindex="-1">Not a real button</div>
</div>
```",