Les éléments interactifs, tels que les liens et les boutons, doivent indiquer leur état et être distinguables des éléments non interactifs. Pour vérifier que les éléments interactifs indiquent leur objectif et leur état, utilisez à la fois un test visuel et un test de lecteur d'écran.
Effectuer un test manuel
Vous devez tester les éléments interactifs visuellement et avec des lecteurs d'écran.
Tester la focalisation visuelle
Pour tester manuellement le focus visuel, utilisez la touche de TAB pour parcourir votre page.
- Pouvez-vous utiliser la touche de TAB pour accéder à chaque élément interactif ?
- Lorsque vous accédez à un élément interactif, y a-t-il un indice visuel indiquant aux utilisateurs qu'ils peuvent interagir avec lui ?
- L'apparence de chaque élément interactif change-t-elle lorsque vous le sélectionnez ?
Il existe de nombreuses façons de styliser les indicateurs de focus pour chaque élément interactif.
Vous pouvez par exemple styliser la pseudo-classe :focus.
Ce style est appliqué chaque fois que l'élément est sélectionné, quel que soit le périphérique d'entrée ou la méthode utilisée pour le sélectionner.
Découvrez comment appliquer un style au focus.
Tester avec des lecteurs d'écran
Utilisez un lecteur d'écran pour naviguer sur votre page et vérifiez qu'il annonce le nom de chaque commande interactive, son rôle et l'état interactif actuel. Si le rôle d'un élément n'est pas clair et que l'état de l'élément n'est pas clair, vous devrez peut-être ajouter les rôles ARIA appropriés.
Pour en savoir plus, consultez Les commandes personnalisées ont des rôles ARIA.
Il est également important de prêter une attention particulière à la façon dont les éléments interactifs sont libellés. Les utilisateurs de lecteurs d'écran et d'autres technologies d'assistance comptent sur les libellés pour comprendre le contexte de cet élément. Les libellés vagues sont courants, mais ils ne sont pas utiles pour naviguer dans le contenu. Découvrez comment améliorer Libellés et textes alternatifs.
Utilité
Fournir des indications visuelles sur le fonctionnement d'un contrôle peut aider les internautes à gérer votre site et à naviguer dans celui-ci. Ces indices sont appelés affordances. Les affordances permettent aux utilisateurs d'utiliser votre site sur une grande variété d'appareils.
Ressources
Audit du code source pour les éléments interactifs indiquent leur objectif et leur état