Présentation des composants

L'accessibilité au clavier des composants d’interface riche ne doit pas être négligée ni même leur vocalisation par les logiciels de synthèse vocale.

Les composants d’interface riche regroupent les éléments dynamiques proposées dans une page tel que les onglets, les accordéons, les carrousels, les fenêtres modales…
Ces composants font appel à du javascript pour fonctionner.

Il faut donc absolument s’assurer que tout script déclenché à la souris :

  • est atteignable au clavier 
  • est contrôlable au clavier une fois le focus placé sur l’élément.

En cas d’impossibilité de contrôle au clavier, il faudra prévoir alors une alternative pou rendre l’information accessible.

astuce

Des exemples de composants d'interface riche accessibles sont disponibles dans la rubrique Motifs de conception - Composants javascript.

Règles d’accessibilité à vérifier sur les composants d’interface riche

  • Les contenus dynamiques apparaissant au survol ou au clic de la souris apparaissent aussi en utilisant le clavier ;
  • Les composants d’interface générés ou contrôlés au moyen de JavaScript sont contrôlables avec un synthétiseur vocal ;
  • L’utilisateur est averti s’il y a un changement de contexte (ouverture d’une fenêtre modale, par exemple).

remarque

La taille de la zone cliquable doit faire minimum 24px * 24px sauf si la zone cliquable se trouve dans un paragraphe (comme un lien à l'intérieur d'un bloc de texte).
Le critère AAA du WCAG va même jusquà demander une taille minimum de 44px * 44px.