Vérifiez que toutes les commandes personnalisées disposent d'un role approprié et de tous les attributs ARIA obligatoires qui confèrent leurs propriétés et leur état.
Par exemple, une case à cocher personnalisée a besoin de role="checkbox" et d'aria-checked="true|false" pour transmettre correctement son état.
Consultez l'article Présentation d'ARIA pour découvrir comment les flux ARIA peuvent fournir la sémantique manquante pour les commandes personnalisées.
Tester manuellement
Pour vérifier que toutes les commandes interactives personnalisées disposent des rôles ARIA appropriés, testez la page à l'aide du volet d'accessibilité des outils pour les développeurs Chrome ou d'un lecteur d'écran. JAWS et NVDA sont deux des lecteurs d'écran les plus populaires pour Windows. VoiceOver est le lecteur d'écran intégré à macOS.
En utilisant CSS, il est possible de styliser les éléments <div> et <button> afin qu'ils transmettent les mêmes affordances visuelles, mais les deux expériences sont très différentes avec un lecteur d'écran.
Un <div> n'est qu'un élément de regroupement générique. Par conséquent, un lecteur d'écran n'énonce que le contenu textuel de cette <div>.
Le <button> est annoncé comme un "bouton". Il s'agit d'un signal beaucoup plus fort pour indiquer à l'utilisateur qu'il s'agit d'un élément avec lequel il peut interagir.
Voir aussi Sémantique et lecteurs d'écran.
Solutions
La solution la plus simple et souvent la plus adaptée à ce problème consiste à éviter complètement les commandes interactives personnalisées.
Par exemple, remplacez une <div> qui agit comme un bouton par une valeur <button> réelle.
Si vous devez conserver <div>, ajoutez role="button" et aria-pressed="false" à <div>.
Les lecteurs d'écran vont maintenant énoncer le rôle et l'état interactif de <div>.
Utilité
Le seul moyen de bien comprendre comment les utilisateurs de technologies d'assistance utilisent votre contenu est de vérifier vous-même ce contenu à l'aide d'un lecteur d'écran. L'utilisation directe d'un lecteur d'écran vous permettra de comprendre clairement comment votre contenu est étiqueté et s'il y a des obstacles à la navigation avec la technologie d'assistance. Si vous ne savez pas comment le balisage sémantique est interprété par les technologies d'assistance, consultez l'article Introduction à la sémantique pour rappel.
Consultez également l'article Effectuer un examen de l'accessibilité.
Ressources
Code source pour les commandes personnalisées incluant un audit des rôles ARIA