iframe-focusable-content

Les cadres avec tabindex="-1" ne doivent pas contenir de contenu focalisable

automaticWCAG 2.1.1 (A)confiance : highgravité : moderateoperable

Vérifie que les éléments <iframe>/<frame> de même origine dotés de tabindex="-1" ne contiennent pas de contenu focalisable, que les utilisateurs du clavier ne peuvent pas atteindre : le tabindex négatif retire de l’ordre de tabulation tout le contenu du cadre.

Applicabilité. S’applique aux éléments <iframe>/<frame> dotés d’un tabindex négatif explicite, dont le document intégré est de même origine et atteignable via contentDocument. Un cadre d’origine croisée ou autrement hors d’atteinte ne peut pas être examiné ; rien n’est donc affirmé à son sujet.

Attendu. Le document intégré du cadre ne contient aucun élément de son ordre de navigation séquentielle du focus. Un tabindex négatif sur l’<iframe> retire tout son contexte de navigation de l’ordre de tabulation : Tab saute tout ce qu’il contient, si bien qu’un lien ou un contrôle qui s’y trouve n’est pas atteignable au clavier (ACT akn7bn ; dans Chromium, Tab passe de l’élément qui précède le cadre à celui qui le suit). Un élément fait partie de cet ordre selon les règles HTML, appliquées dans le document propre du cadre : pas s’il est désactivé (:disabled, qui inclut un <fieldset> désactivé mais pas son premier <legend>) ou inert ; un tabindex qui s’analyse comme un entier décide, et un tabindex invalide ("", "abc") est ignoré ; sinon, en font partie les liens avec href, les contrôles de formulaire sauf les inputs hidden, les cadres, les médias avec controls, un <area> d’une carte d’image qu’utilise un <img> affiché (usemap mis en correspondance exacte), le premier <summary> d’un <details> et les hôtes d’édition (contenteditable "", "true" ou "plaintext-only"). Exception : une iframe dont les attributs HTML width et height valent tous deux 2px ou moins (un motif courant de « pixel de suivi ») ne peut afficher aucun contenu perceptible ; le contenu focalisable qu’elle contient ne satisfait donc jamais l’exigence « visible » d’ACT akn7bn et n’est pas pris en compte.

Exemples

pass
<iframe tabindex="-1" width="300" height="150" srcdoc="<p>No focusable content</p>"></iframe>

tabindex="-1" retire le cadre de l’ordre de tabulation, et rien à l’intérieur ne peut non plus recevoir le focus.

fail
<iframe tabindex="-1" width="300" height="150" srcdoc="<a href='/x'>Link inside</a>"></iframe>

Le cadre hôte est exclu de la tabulation par tabindex="-1", mais le lien qu’il contient reste atteignable avec Tab : le navigateur ne propage pas le tabindex négatif dans le document intégré.

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.

IFRAME_TABINDEX_NEGATIVE_CONTENT_RUNTIME_REDIRECT

  1. Cliquez sur la page juste avant le cadre indiqué par le rapport, puis appuyez sur Tab pour vous en rapprocher.
  2. Continuez d’appuyer sur Tab et observez si le focus arrive un jour à l’intérieur du cadre, et où il va au moment où il devrait y arriver.
  3. Inspectez l’élément focalisable situé dans le cadre dans le panneau Éléments : notez s’il s’agit d’une garde de focus vide ou d’un vrai lien ou contrôle avec du contenu.
  4. S’il s’agit d’un vrai lien ou contrôle, essayez tous les autres chemins clavier pour l’atteindre (Maj+Tab, les contrôles propres au cadre) pour voir s’il peut être atteint et utilisé.

Réussite. Le seul élément focalisable du cadre est une garde de focus vide qui fait passer le focus plus loin, et rien de ce dont l’utilisateur a besoin dans le cadre n’est hors de portée du clavier.

Échec. Un vrai lien ou contrôle du cadre ne peut pas être atteint ou utilisé au clavier parce que le focus le saute ou en est renvoyé, ce qui ne respecte pas le critère WCAG 2.1.1.

Voir le code source