Vérifiez que toutes les commandes personnalisées disposent d'un role approprié, ainsi que de tous les attributs ARIA requis qui confèrent leurs propriétés et leur état.
Par exemple, une case à cocher personnalisée a besoin d'un role="checkbox" et d'un aria-checked="true|false" pour transmettre correctement son état.
Découvrez comment utiliser ARIA et HTML pour déterminer le moment idéal pour fournir les sémantiques manquantes pour les commandes personnalisées.
Comment effectuer un test ?
Pour vérifier que tous les contrôles interactifs personnalisés disposent de 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.
Avec CSS, vous pouvez appliquer un style aux éléments <div> et <button> pour transmettre les mêmes affordances visuelles, mais l'expérience est très différente 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'annonce que le contenu textuel de l'<div>.
<button> est annoncé comme un "bouton", un signal beaucoup plus fort pour l'utilisateur indiquant qu'il peut interagir avec cet élément.
Consultez également Sémantique et lecteurs d'écran.
Solution
La meilleure solution à ce problème consiste à éviter complètement les commandes interactives personnalisées. Par exemple, remplacez un <div> qui agit comme un bouton par un <button> réel.
<button>Learn more</button>
Si vous devez utiliser un <div>, ajoutez role="button" et aria-pressed="false".
<div role="button" aria-pressed="false">Learn more</div>
Désormais, les lecteurs d'écran annoncent le rôle et l'état interactif de <div>.
Utilité
Si vous n'avez jamais utilisé de technologie d'assistance, vous ne savez peut-être pas comment votre contenu se comporte pour les utilisateurs de ces technologies. Idéalement, vous pouvez discuter avec des utilisateurs qui utilisent régulièrement des technologies d'assistance et qui peuvent vous faire part de leurs commentaires sur les performances de votre site Web ou de votre application Web.
Une autre façon de comprendre l'expérience des utilisateurs de technologies d'assistance par votre contenu consiste à le tester avec la technologie d'assistance. L'utilisation d'un lecteur d'écran vous permet de mieux comprendre comment vos contenus sont libellés et si des obstacles empêchent la navigation.
Ressources
Vous pouvez consulter le code source de l'audit "Les commandes personnalisées ont des rôles ARIA".