Zone défilante non accessible au clavier

Une zone qui défile (bloc de code, tableau, conteneur à overflow) mais qu'on ne peut pas atteindre au clavier piège une partie de son contenu.

Qui est concerné

• Personnes naviguant uniquement au clavier (handicap moteur)
• Personnes aveugles, qui n'utilisent pas la souris

Pourquoi c'est important

Si une zone défile mais n'est pas dans l'ordre de tabulation, l'utilisateur au clavier ne peut pas la faire défiler pour voir ce qui dépasse. Lui donner tabindex="0" la rend focusable et donc défilable au clavier. Critère 2.1.1 (niveau A) : tout doit être opérable au clavier.

Comment le tester vous-même

1. Repérez les conteneurs avec overflow: auto/scroll dont le contenu dépasse.
2. Au clavier seul (touche Tab puis flèches), pouvez-vous les faire défiler ?
3. Si non, ajoutez tabindex="0" et un nom accessible à la zone.

Comment corriger

Rendez les zones défilantes accessibles au clavier en leur donnant tabindex="0".

<div style="overflow:auto; max-height:200px">
  <!-- long contenu défilant, non focusable -->
</div>

<div style="overflow:auto; max-height:200px" tabindex="0" role="region" aria-label="Détail des résultats">
  <!-- long contenu défilant, atteignable au clavier -->
</div>

Critères de référence

Plainpied détecte ce défaut automatiquement et le localise page par page. La conformité totale combine détection automatique et vérifications humaines : voir notre méthode.