aria-hidden elements do not contain focusable elements

Who might be affected


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 focus sequence 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>
8<input type="text" aria-hidden="true" ... />
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)

Recommended Reading