no-aria-hidden-on-focusable.md

No aria-hidden on focusable

Rule Details

Elements that are focusable should never have aria-hidden="true" set.

aria-hidden="true" hides elements from assistive technologies. aria-hidden="true" should only be used to hide non-interactive content such as decorative elements or redundant text. If a focusable element has aria-hidden="true", it can cause confusion amongst assistive technology users who may be able to reach the element but not receive information about it.

Resources

• Accessibility insights: aria-hidden-focus
• Deque: aria-hidden elements do not contain focusable elements
• W3: Element with aria-hidden has no content in sequential focus navigation

Examples

Incorrect code for this rule 👎

<button aria-hidden="true">Submit</button>

<div role="menuitem" aria-hidden="true" tabindex="0"></div>

Correct code for this rule 👍

<button>Submit</button>

<div role="menuitem" aria-hidden="true" tabindex="-1"></div>