aria-hidden elements do not contain focusable elements
Who might be affected
Description
The aria-hidden attribute removes elements from the accessibility tree to be ignored by screen readers,however, it does not remove them or its descendant children from the tabbing focus sequence(if they are focusable). You have to make sure to add the appropriate attributes to make the focussequence skip elements within elements with aria-hidden="true".
Quick Fixes
Add to focusble elements tabindex="-1". This will make the element focusable only programmatically (e.g. using JavaScript).
1 <div aria-hidden="true">
2 <!-- Screen readers will still reach and
3 read this button -->
4✗ <button>Play animation</button>
5✓ <button tabindex="-1">Play animation</button>
6 </div>
7
8✗ <input type="text" aria-hidden="true" ... />
9
If the element is not displayed at all, you can remove it from the render tree.
1 <div aria-hidden="true">
2✓ <button style="display: none;">Play animation</button>
3 </div>
How Users Are Affected
Users will encounter elements that were supposed to be hidden for them.These cases can easily disorient the user and prevent him from using the interface correctly.
WCAG Success criteria
This issue might cause elements to fail one or more of the following Success criteria:
4.1.2 Name, Role, Value (A)
