presentational-children-focusable-absent

Les rôles à enfants présentationnels ne doivent pas contenir de contenu focalisable

automaticWCAG 4.1.2 (A)confiance : highgravité : seriousrobust

Vérifie qu’un élément dont le rôle rend les enfants présentationnels (button, checkbox, img, option, radio, slider, switch, tab, ...) ne contient aucun descendant qui prend un arrêt de tabulation.

Applicabilité. S’applique aux éléments dont le rôle sémantique est l’un des rôles WAI-ARIA définis comme ayant des enfants présentationnels (button, checkbox, img, menuitemcheckbox, menuitemradio, meter, option, progressbar, radio, scrollbar, separator, slider, switch, tab, ainsi que doc-pagebreak et graphics-symbol des modules DPUB-ARIA/Graphics-ARIA, qui héritent de la même caractéristique). Le rôle peut être explicite (role="tab") ou natif (<button>, <meter>, <progress>, <option>). Un élément personnalisé auquel ses ElementInternals donnent l’un de ces rôles (this.attachInternals().role), sans attribut role qui en nomme un autre, compte comme un élément natif doté de ce rôle.

Attendu. Aucun descendant de l’élément ne fait partie de la navigation séquentielle au focus. Le mécanisme des enfants présentationnels retire tous les descendants de l’arbre d’accessibilité : un descendant qui prend encore un arrêt de tabulation reçoit donc le focus sans rôle ni nom à annoncer.

Ce que rapporte un constat.

  • role : le rôle qui rend présentationnels les enfants de l’élément.
  • focusableElements : le nom de balise de chaque arrêt de tabulation trouvé dans l’élément, un élément par arrêt de tabulation, dans l’ordre du document.

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
<button>Save</button>

Aucun contenu présentationnel qui serait aussi focalisable.

fail
<button>
Save
<span role="button" aria-label="save options" aria-expanded="false" tabindex="0">▼</span>
</button>

Le <span> imbriqué porte son propre rôle interactif et son propre arrêt de tabulation dans le contenu présentationnel du bouton.

Voir le code source