Les éléments interactifs tels que les liens et les boutons doivent indiquer leur état et se distinguer 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.
Tester manuellement la mise au point visuelle
Pour tester manuellement la sélection visuelle, TAB via votre page.
- Pouvez-vous accéder à chaque élément interactif via la touche de tabulation ?
- Lorsque vous arrivez à un élément interactif, y a-t-il un indice visuel indiquant que les utilisateurs peuvent interagir avec lui ?
- L'apparence de chaque élément interactif change-t-il lorsque vous le sélectionnez ?
Il existe de nombreuses façons de styliser les indicateurs de sélection pour chaque élément interactif.
Une façon sûre consiste à utiliser :focus.
La pseudo-classe :focus vous permet d'appliquer un style uniforme à un élément.
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é pour le sélectionner.
Pour en savoir plus, consultez Ciblage des styles.
Effectuer un test manuel avec un lecteur d'écran
À l'aide d'un lecteur d'écran, parcourez votre page et vérifiez qu'il est en mesure d'annoncer le nom de chaque commande interactive, le rôle de cette commande 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 disposent de rôles ARIA.
Il est également important de porter une attention particulière à la façon dont les éléments interactifs sont étiquetés. Les utilisateurs de lecteurs d'écran et d'autres technologies d'assistance s'appuient sur les étiquettes pour comprendre le contexte de cet élément. Les libellés vagues sont courants et ne sont pas utiles pour parcourir le contenu. Découvrez comment améliorer les étiquettes et alternatives au texte.
Utilité
Fournir des indications visuelles sur l'utilité d'une commande aide les utilisateurs à exploiter et à parcourir votre site. Ces indices sont appelés affordances. En fournissant des affordances, vous permettez aux utilisateurs d'utiliser votre site sur une grande variété d'appareils.
Ressources
Le code source pour les éléments interactifs indique leur objectif et leur état.