Inappropriately ARIA Hidden Focusable Content Check

RuleSets of AccessMonitor - the validator of web accessibility practices

Inappropriately ARIA Hidden Focusable Content Check

Description

The “Inappropriately ARIA Hidden Focusable Content Check” whether there is any element with aria-hidden="true" containing focusable or interactive content.

Example outcome

I found 1 element with the aria-hidden attribute that has focusable content.

Impact

Fixes

To address inappropriately focusable hidden content:

  1. Locate the element that contains aria-hidden="true".
  2. If that’s appropriate, remove focusable children from hidden containers.
  3. If the children element(s) are interactable, remove the aria-hidden="true" attribute.
  4. Finally, is most suitable, you can also disable the focusable element while it is hidden from assistive tech.

Resources