Les animations, cartes interactives et autres éléments graphiques non vidéo peuvent-ils être contrôlés au clavier par une personne qui ne peut pas utiliser de souris ?
Critère officiel 4.12 — La consultation de chaque média non temporel est-elle contrôlable par le clavier et tout dispositif de pointage ?
Pourquoi c'est important
Une carte interactive des travaux ou un slider d'images qui ne répond qu'au clic de souris est inutilisable pour les personnes naviguant au clavier. Elles ne peuvent ni explorer la carte, ni faire défiler les images, ni interagir avec l'élément.
Exemples concrets
Ce qui est conforme
Le slider de photos de la fête de la commune peut être contrôlé avec les touches fléchées du clavier et dispose d'un bouton Pause accessible. Chaque image a une description textuelle.
Ce qui pose problème
Le carrousel d'images de la page d'accueil défile automatiquement et ne peut être contrôlé qu'à la souris. Au clavier, le focus passe directement à l'élément suivant sans pouvoir interagir avec le slider.
Comment agir
Demandez à votre prestataire de vérifier l'accessibilité clavier de chaque composant interactif du site : sliders, accordéons, onglets, cartes. Un test simple suffit : parcourez toute la page avec uniquement la touche Tab, sans jamais utiliser la souris. Tout ce qui n'est pas atteignable ou contrôlable doit être corrigé.
Règles clés
- Tout point d'interaction doit être focusable (tabindex='0' si non natif) et activable avec Enter/Espace.
- Les données au survol doivent aussi être disponibles au focus (aria-describedby ou tooltip au focus).
- Proposer une alternative tabulaire si l'interaction complète est trop complexe à rendre accessible.
Erreurs fréquentes
- Graphique D3.js avec données au hover uniquement
- Carte SVG cliquable non accessible au clavier
- Filtres accessibles uniquement par drag & drop
Exemples de code
graphique hover uniquement
✗ Non conforme// D3.js : données visibles au survol uniquement
circles.on('mouseover', showTooltip)
.on('mouseout', hideTooltip);
// Pas d'événement focus/blurUn utilisateur au clavier ne peut pas voir les données des points du graphique.
graphique avec focus et hover
✓ Conformecircles
.attr('tabindex', '0')
.attr('role', 'img')
.attr('aria-label', d => `${d.label}: ${d.valeur}`)
.on('mouseover focus', showTooltip)
.on('mouseout blur', hideTooltip);tabindex='0' rend chaque point focusable. aria-label fournit la valeur directement aux AT. Focus/blur gèrent le tooltip au clavier.
Référence WCAG : 2.1.1, 2.1.2