aria-hidden-focus

Les éléments masqués par ARIA ne doivent pas pouvoir recevoir le focus

automaticWCAG 4.1.2 (A)confiance : highgravité : seriousrobust

Vérifie que les éléments aria-hidden="true" ne peuvent pas recevoir le focus et ne contiennent pas de descendants qui le peuvent.

Applicabilité. S’applique aux éléments qui ont aria-hidden="true", la valeur étant lue sans tenir compte de la casse et sans les espaces qui l’entourent (aria-hidden="TRUE" masque aussi le contenu dans les navigateurs).

Attendu. Aucun élément avec aria-hidden="true" ne doit lui-même être focalisable, et aucun élément focalisable ne doit se trouver dans un sous-arbre aria-hidden="true".

Ce que rapporte un constat.

metrics.focusableTotal : le nombre d’éléments focalisables que contient l’élément masqué, lui-même compris s’il est focalisable.
metrics.focusableDescendants : combien d’entre eux se trouvent à l’intérieur.
metrics.rootIsFocusable : si l’élément masqué lui-même peut recevoir le focus.
offenders : jusqu’à 5 des éléments focalisables. Chaque élément indique son tag, son tabindex, son href (un lien), son type (un input) et ses visibilityHints. metrics.offendersCaptured indique combien sont listés.
metrics.visibilityHints : les façons dont les éléments focalisables sont rendus invisibles tout en recevant le focus : opacityZero, offscreen, clipped, zeroSizeOverflowHidden. Un tel élément est un arrêt de focus qu’une personne voyante naviguant au clavier ne peut pas voir.
metrics.modalOpen : si une boîte de dialogue modale était ouverte ailleurs sur la page, ce qui fait de ce constat un constat à examiner.
runtimeProbe : null sauf si donner le focus à l’unique élément focalisable a fait sortir le focus directement de l’élément masqué. Il contient alors redirected: true, la balise et l’id de l’élément vers lequel le focus est passé (redirectedToTag, redirectedToId) et focusTrace, les éléments par lesquels le focus est passé. Une sentinelle de focus masquée qui transmet ainsi le focus est signalée pour examen.

Ces champs de data.details aident à lire et à reproduire un constat. À part reasonCode et les quelques champs que la page Schéma de sortie donne comme stables, ils ne constituent pas un contrat stable : un champ peut être renommé ou supprimé dans une version mineure, ne vous appuyez donc pas dessus.

Exemples

pass

<div aria-hidden="true">
  <p>Decorative text</p>
</div>

Rien dans le sous-arbre masqué ne peut recevoir le focus ; le masquer aux technologies d’assistance ne laisse donc aucun arrêt de focus fantôme.

fail

<div aria-hidden="true">
  <a href="/x">Link</a>
</div>

Le lien reste dans l’ordre de tabulation alors qu’aria-hidden le retire de l’arbre d’accessibilité.

Comment vérifier

Quand cette règle ne peut pas trancher, elle renvoie cantTell et laisse la question à une personne. Chaque question qu’elle peut poser figure ici sous son code de raison, avec les étapes pour y répondre. Un constat porte les mêmes étapes dans howToCheck, dans la langue de l’analyse. Voir Schéma de sortie.

`ariaHiddenFocusable_modalOpen_needsReview`

Repérez l’élément indiqué par le rapport, derrière la boîte de dialogue modale ouverte sur la page, et notez ce qui peut y recevoir le focus.
La boîte de dialogue ouverte, appuyez plusieurs fois sur Tab, puis sur Maj+Tab, et regardez où va le focus.
Chaque fois que le focus semble quitter la boîte de dialogue, vérifiez document.activeElement dans la console des outils de développement.

Réussite. Le focus reste dans la boîte de dialogue ouverte et n’atteint jamais le contenu masqué derrière elle.

Échec. Le focus atteint du contenu derrière la boîte de dialogue, à l’intérieur d’aria-hidden="true", où un lecteur d’écran n’annonce rien, ce qui ne respecte pas le critère WCAG 4.1.2.

`ariaHiddenFocusable_runtimeRedirect_needsReview`

Cliquez juste avant l’élément indiqué par le rapport, puis appuyez sur Tab jusqu’au moment où le focus devrait l’atteindre.
Regardez où arrive le focus et vérifiez document.activeElement dans la console des outils de développement.
Appuyez sur Maj+Tab depuis le contrôle suivant et voyez si le focus s’arrête sur l’élément masqué ou passe directement.

Réussite. Le focus ne reste jamais sur l’élément masqué : il passe directement à un contrôle visible, comme le fait la sentinelle d’un piège à focus.

Échec. Le focus peut rester sur l’élément à l’intérieur d’aria-hidden="true", où un lecteur d’écran n’annonce rien, ce qui ne respecte pas le critère WCAG 4.1.2.

Règles associées

Voir le code source