scrollable-region-focusable
Les régions défilantes sans contenu focalisable devraient être focalisables au clavier
Signale, pour une revue manuelle, les éléments dont le CSS déclare overflow:auto/scroll, qui ne contiennent aucun descendant focalisable et qui ne sont pas eux-mêmes focalisables au clavier, afin de vérifier si leur contenu déborde réellement et nécessite un défilement au clavier.
Applicabilité. Volontairement limitée à un ensemble fixe de balises de conteneur susceptibles de défiler (div, section, article, aside, main, nav, pre, table, blockquote, ul, ol, textarea) dont overflow-x/overflow-y calculé vaut auto ou scroll, et non à tous les éléments de la page, pour rester déterministe et performante (même type de restriction que region). Lorsqu’elle ne trouve rien à mettre en question, elle renvoie notApplicable, et non pass : elle ne s’applique qu’à ce que son contrôle signale, et ne rien y trouver ne montre pas que tout va bien.
Attendu. Une région dont le CSS déclare qu’elle peut défiler (auto/scroll) devrait être atteignable au clavier : soit elle contient déjà un descendant présent dans l’ordre de tabulation séquentiel (un lien, un bouton, un contrôle de formulaire ou un élément doté d’un tabindex non négatif sur lequel un utilisateur au clavier peut se positionner avec la touche Tab pour faire ensuite défiler la région avec les flèches ; un élément en tabindex="-1", un contrôle désactivé ou type="hidden", ou un élément que la page masque ne compte pas), soit la région elle-même est atteinte par Tab : par un tabindex non négatif, ou nativement, comme un <textarea> ou une région éditable. Un <textarea> désactivé est laissé de côté, car un champ désactivé n’a pas à être utilisable.
Exemples
<style>.scrollY { overflow-y: auto; height: 100px; }</style><div class="scrollY">Plain long text content with no interactive children at all.</div>
La région peut défiler, mais elle n’a pas de tabindex propre et ne contient aucun descendant focalisable : un utilisateur au clavier ne peut jamais l’atteindre pour la faire défiler.
<style>.scrollY { overflow-y: auto; height: 100px; }</style><div class="scrollY" tabindex="0">Long content, but the region itself is focusable.</div>
tabindex="0" rend la région défilante elle-même atteignable au clavier.
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.
SCROLLABLE_OVERFLOW_NOT_FOCUSABLE
- Repérez l’élément indiqué par le rapport et vérifiez, aux tailles auxquelles la page est utilisée, si son contenu déborde (une barre de défilement apparaît ou du contenu est coupé).
- S’il ne déborde pas, la vérification est réussie.
- S’il déborde, cliquez juste avant lui et appuyez sur Tab jusqu’à ce que le focus l’atteigne.
- Une fois le focus sur lui, appuyez sur les touches fléchées, Page suivante et Espace, et vérifiez que le contenu défile.
- Si la zone elle-même ne peut pas défiler au clavier, la page peut proposer un autre moyen de voir ce qui est masqué, comme les boutons précédent et suivant d’un carrousel. Cela ne compte que s’il est utilisable au clavier seul et qu’il fait apparaître chaque élément masqué.
Réussite. L’élément ne déborde pas, ou tout ce qui y est masqué peut être affiché au clavier seul, en le faisant défiler ou par un autre moyen proposé par la page.
Échec. Une partie du contenu masqué ne peut être affichée qu’à la souris ou au toucher, ce qui ne respecte pas le critère WCAG 2.1.1.