Navigation au clavier et à l'écran
Certains aspects de l'accessibilité peuvent être testés avec des outils, mais d'autres, tels que la navigation au clavier, sont mieux testés manuellement. Parcourons les meilleures pratiques pour tester la navigation au clavier et explorons la navigation avec VoiceOver, un lecteur d'écran populaire.
Lorsque nous parlons d'accessibilité dans le contexte Web, nous parlons de création de sites et d'applications avec lesquels tout le monde peut naviguer et interagir. De nombreux développeurs traitent l'accessibilité après coup, pensant que seule une minorité de leur base d'utilisateurs bénéficierait de cet effort. Ils ne réalisent pas que 15% de la population mondiale vit avec une forme de handicap. C’est un milliard de clients potentiels que vous refusez.
Bien que certains aspects de l’accessibilité puissent être testés automatiquement à l’aide d’outils, d’autres, tels que la navigation au clavier ou la compatibilité avec diverses technologies d’aide, sont mieux testés manuellement. Dans cet article, nous expliquerons comment naviguer dans nos applications à l'aide du clavier et comment utiliser VoiceOver, un lecteur d'écran populaire intégré aux systèmes d'exploitation Apple et iOS.
Navigation au clavier
Pourquoi quelqu'un navigue notre application en utilisant le clavier exclusivement? Les utilisateurs ayant une déficience motrice peuvent ne pas être en mesure de s’appuyer sur des souris ou des trackpads pour interagir avec leur ordinateur, car ces appareils nécessitent un contrôle précis du doigt. Les utilisateurs malvoyants peuvent ne pas être en mesure de localiser le curseur à l'écran. Vous pouvez probablement penser à d'autres scénarios dans lesquels la navigation à l'aide du clavier est préférable.
La navigation dans une application Web à l'aide du clavier est relativement simple:
- Appuyez sur pour sélectionner le curseur de votre souris. et Maj + Onglet pour déplacer le focus vers l'arrière.
- Appuyez sur . Entrez alors que vous êtes concentré sur un lien ou un bouton pour interagir avec elle. L'espace étant concentré sur une case à cocher ou une liste déroulante pour interagir avec elle.
- Appuyez sur ↑ ← et . → pour faire défiler verticalement et horizontalement, ou pour parcourir les listes d'options.
- Appuyez sur Échap pour fermer les boîtes de dialogue.
.
Voici les principales choses à surveiller lors de la construction de notre application afin de ne pas endommager les navig on:
- Assurez-vous de bien identifier l’élément actuellement ciblé. Les utilisateurs avertis se fient à une sorte d’indicateur visuel pour savoir où ils se concentrent.
- Évitez de supprimer le contour par défaut des éléments focalisables avec des éléments tels que
contour: 0oucontour: aucun.
- Évitez de supprimer le contour par défaut des éléments focalisables avec des éléments tels que
- Assurez-vous que tous les éléments de la page sont accessibles. Utilisez la bonne étiquette pour le travail.