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.
- Utilisez
pour les liens de navigation. - Utilisez
pour les actions ne conduisant pas l'utilisateur à une nouvelle page. - Utilisez
et amis pour formulaires de contrôle. - Évitez de créer des contrôles interactifs personnalisés à l'aide de balises captivantes telles que ou
à moins que vous ne sachiez vraiment ce que vous faites. Assurez-vous que toutes les sections de la page peuvent être parcourues depuis et vers.
- Soyez prudent lorsque vous implémentez des boîtes de dialogue et des fenêtres contextuelles. Assurez-vous qu'ils bloquent le focus et qu'ils peuvent être supprimés avec la touche Escape .
- Faites attention lorsque vous implémentez des fonctionnalités telles que le défilement infini. Si vous avez un flux défilant à l'infini au milieu de la page et une barre latérale à droite, les utilisateurs de clavier risquent de rester bloqués dans le flux et de ne pas pouvoir atteindre la barre latérale.
- Assurez-vous que l'utilisateur peut accéder directement au contenu principal, surtout si vous avez une longue section de navigation. Les utilisateurs de clavier doivent appuyer sur la touche de l'onglet pour naviguer dans tous les éléments interactifs avant de pouvoir accéder au contenu souhaité. Si toute votre application a une navigation longue, cette expérience peut être extrêmement frustrante.
- Appuyez sur Ctrl + Alt + A pour commencer à lire le contenu.
- Appuyez sur Ctrl pour arrêter de lire le contenu.
- Appuyez sur Ctrl + Alt + → pour lire le Article suivant et Ctrl + Alt + ← pour lire l'élément précédent.
- Appuyez sur Ctrl + Alt + L'espace permet d'interagir avec l'élément actuel (par exemple, cliquez sur un lien).
- Appuyez sur Ctrl + Alt + Décalage . ] + ↓ pour entrer dans objec ts (par exemple, sections de contenu, iframes), et Ctrl + Alt + Shift + ↑ pour sortir.
- Appuyez sur Ctrl + Alt + Cmd + H pour passer au prochain cap.
- Appuyez sur Ctrl + Alt + Cmd + L pour passer au lien suivant.
Navigation avec un lecteur d'écran
Un lecteur d'écran est un outil permettant de lire à haute voix le contenu affiché à l'écran. Les utilisateurs malvoyants comptent sur les lecteurs d'écran pour pouvoir interagir avec leurs appareils.
Il existe assez peu de lecteurs d'écran sur le marché, mais les trois principaux joueurs sont JAWS NVDA et VoiceOver . Les deux premiers fonctionnent sous Windows, tandis que le troisième fait partie des systèmes d'exploitation Apple, tels que iOS et macOS.
Les lecteurs d'écran sont des outils très complexes, et les maîtriser peut prendre beaucoup de temps, mais je veux pour vous donner un aperçu de la consommation d’une application Web par le biais d’un lecteur d’écran. Nous utiliserons VoiceOver sur macOS dans cet article, mais n'hésitez pas à lire la documentation du lecteur d'écran de votre choix et à suivre.
La première chose à faire est d'activer VoiceOver en appuyant sur Cmd + F5 (vous devrez peut-être appuyer sur Cmd + fn + F5 si vous êtes sur un ordinateur portable). VoiceOver commencera à lire le contenu de la fenêtre active. Si vous ne l'avez jamais fait auparavant, l'expérience peut être accablante, sachez donc que vous pouvez l'éteindre en appuyant sur la même combinaison de touches que celle utilisée auparavant.
Ok, maintenant que vous savez comment l'activer. de temps en temps, voici les raccourcis les plus courants que vous voudrez utiliser pour naviguer dans une application Web:
VoiceOver possède une fonction intéressante appelée le rotor. C’est une boîte de dialogue qui vous permet de parcourir le contenu par type (liens, titres, points de repère, etc.). Vous pouvez ouvrir le rotor en appuyant sur Ctrl + Alt + U . Vous pouvez faire pivoter les types de contenu avec ← et → et vous pouvez sélectionner un élément en appuyant sur ↑ et puis en appuyant sur Entrez .
L’utilisation d’un lecteur d’écran en tant qu’utilisateur voyant n’est pas tout à fait comparable à la façon dont un utilisateur réel l’utiliserait, mais elle peut nous aider à comprendre comment notre application est utilisée. par partie de notre base d'utilisateurs.
Conclusion
En testant manuellement nos sites Web et nos applications de navigation au clavier et à l'aide d'un lecteur d'écran, nous nous assurons de bâtir une expérience inclusive pouvant atteindre le plus large public possible. Nous avons également une meilleure compréhension des différentes manières dont nos utilisateurs exploitent les expériences que nous développons et nous pouvons penser à des options pour les améliorer.
En savoir plus sur l'accessibilité
Nous avons créé un livre blanc complet sur l'accessibilité pour les développeurs.
Téléchargez le livre blanc: Accessibilité pour les développeurs
Ajout de l'accessibilité à vos applications
Un moyen simple de vous assurer que vous créez des applications Web accessibles. est de commencer avec des composants des bibliothèques de Kendo UI. Nos composants sont tous conformes à la plainte WCAG et vous offrent une grande fonctionnalité, des grilles et graphiques aux programmateurs et aux sélecteurs. Prenez une longueur d'avance sur l'interface utilisateur de votre application et sur la conformité d'accessibilité en même temps.
En savoir plus sur: L'interface utilisateur de Kendo
- Utilisez
Source link