Conseil n°10 : S’assurer que les composants sont correctement restitués par les lecteurs d’écran

Résumé

Selon la définition donnée par le RGAA 3 2017, "un composant d'interface est un élément avec lequel l'utilisateur peut interagir, par exemple un bouton, un lien, une zone de saisie. Certains composants peuvent être plus complexes comme un menu, une fenêtre de dialogue, un système d'onglets. […]". La navigation et l'interaction avec tous ces composants doivent être possibles au clavier et être correctement restitués par les lecteurs d'écran notamment.
Selon la complexité du composant d'interface, certains enrichissements tels que le nom, le rôle, le paramétrage et les changements d'états sont nécessaires pour permettre une restitution correcte vers ces outils de compensation.

Exemple

Capture d'écran : visualisation des éléments ARIA mis en place pour rendre accessible un système d'onglets dans le menu d'une page.

Astuces

ARIA (Accessible Rich Internet Applications ou Applications Internet riches accessibles) est un ensemble d’attributs liés à l’accessibilité qui peut être ajouté au langage HTML notamment. L’attribut role définit le type général d’un objet (par exemple un article, une alerte ou un séparateur). Des attributs ARIA supplémentaires fournissent d’autres propriétés utiles, telles que la description d’un formulaire, la valeur courante d’une barre de progression (impacte la verbosité d'un lecteur d'écran)…

Bénéfices pour l’internaute déficient visuel

  • L'utilisation d'ARIA sur les composants riches permet de les rendre accessibles au clavier.

Boite à outils

Le plug-in "Visual ARIA" permet de visualiser l'usage d'ARIA sur une page web. Il est disponible pour les navigateurs Firefox et Chrome.

Ressources