Clavier

Les zones défilantes doivent être atteignables au clavier

Règle: scrollable-region-focusable
Gravité: Sérieux
Niveau WCAG A

Pourquoi c’est important

Un panneau doté de sa propre barre de défilement et sans contenu focusable ne peut pas être fait défiler au clavier. Tout ce qui se trouve plus bas dans ce panneau est simplement inatteignable.

Comment corriger

Ajoutez tabindex="0" au conteneur défilant pour qu’il puisse recevoir le focus.
Donnez-lui un rôle et un nom (role="region" avec aria-label) pour que sa fonction soit annoncée.
Assurez-vous que l’indicateur de focus est visible sur le conteneur lui-même.

Dans le balisage

Échoue

<div class="log" style="overflow-y: auto; max-height: 12rem">...</div>

Réussit

<div class="log" style="overflow-y: auto; max-height: 12rem"
     tabindex="0" role="region" aria-label="Event log">...</div>

L’exigence sous-jacente

Cette règle est une manière d’échouer aux critères de succès WCAG 2.2 suivants. Le W3C, qui rédige la norme, explique chacun d’eux :

2.1.1 Clavier (s’ouvre dans un nouvel onglet) — Niveau WCAG A
2.1.3 Clavier (pas d’exception) (s’ouvre dans un nouvel onglet) — Niveau WCAG AAA

Pour aller plus loin

Deque University sur scrollable-region-focusable (s’ouvre dans un nouvel onglet)

Deque développe axe-core, le moteur open source utilisé par notre scanner. Sa page documente la règle telle que le moteur l’implémente.

Les contrôles automatiques trouvent les défaillances qu’un navigateur peut prouver. Ils ne peuvent pas juger si un sous-titrage est fidèle, si une alternative textuelle est utile, ni si une page s’utilise de bout en bout au clavier : cela demande une personne.