aria-hidden-focus

aria-hidden elements do not contain focusable elements

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 focus sequence skip elements within elements with aria-hidden="true".

Quick Fixes

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

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

• Understanding Name, Role, Value