J'ai récemment rédigé un chapitre consacré à l'accessibilité dans les applications monopages pour le nouveau Smashing Book 6, intitulé « New Frontiers in Web Design ». Dans ce chapitre, j'ai abordé les spécificités de l'accessibilité dans les applications web rendues à l'aide de frameworks et de bibliothèques JavaScript côté client, tels que React, Vue, Angular, Ember, etc. J'ai abordé la gestion du focus, la désactivation correcte des arrière-plans et la gestion des mises à jour asynchrones des formulaires de manière accessible aux lecteurs d'écran. J'ai également inclus à la fin une liste à puces contenant des conseils d'accessibilité pertinents et faciles à assimiler.
Bien sûr, maintenant que mon chapitre a été publié dans un magnifique livre à couverture rigide orné de motifs métalliques dorés en relief, j’aimerais bien ajouter quelques éléments, notamment à la petite liste de conseils.
Afin de brosser un tableau plus complet de l’accessibilité dans les applications monopages tout en restant concis, je vais commencer par les « règles d’accessibilité » énumérées dans le chapitre du livre et y ajouter quelques éléments supplémentaires qui me viennent encore à l’esprit maintenant que celui-ci a été publié. Chacun de ces points pourrait probablement faire l’objet d’un article de blog à part entière, mais l’objectif de cet article est de mettre en avant des conseils et des techniques susceptibles de vous aider dans votre prochain projet axé sur JavaScript.
- Plus on s'y prend tôt, à commencer par l'expérience utilisateur (UX) et la conception, plus il est facile et moins coûteux d'intégrer l'accessibilité.
- Créez dès le début des prototypes d'interactions complexes ou personnalisées, en tenant compte de l'accessibilité.
- Consultez les « ARIA Authoring Practices » pour découvrir les modèles d'interaction connus.
- N'hésitez pas à jouer sur les contrastes de couleurs; cela facilite non seulement la lecture pour les personnes malvoyantes ou souffrant d'un déficit de perception des couleurs, mais améliore également la visibilité sur les projecteurs à faible contraste et les écrans extérieurs.
- Les lecteurs d'écran disposent d'autres moyens de navigation que la touche TAB ; il n'est donc pas nécessaire de rendre tous les éléments sélectionnables.
- Les widgets interactifs (c'est-à-dire les « commandes ») doivent être conçus pour fonctionner avec le clavier, et pas uniquement au survol ou par glissement.
- Familiarisez-vous avec la gestion des focus en JavaScript et intégrez-la à vos tests automatisés.
- Testez à l'aide d'extensions de navigateur dédiées à l'accessibilité et d'outils de test automatisés pour renforcer vos capacités. (Les outils « axe » deDequeet « WorldSpace Attest »entrent dans cette catégorie.)
- Testez votre application auprès d'utilisateurs réels, y compris des personnes en situation de handicap. Des organismes tels que « Access Works » de Knowbility peuvent vous y aider.
Et maintenant, passons aux informations complémentaires :
- L'accessibilité ne se limite pas à la conception de sites destinés aux utilisateurs aveugles ou malvoyants. Familiarisez-vous avec les besoins des personnes en situation de handicap grâce aux ressources du W3C.
- Demandez-vous si une application monopage est vraiment nécessaire, et si vous avez réellement besoin d'utiliser un framework JavaScript.
- Si vous optez pour une application monopage, assurez-vous que les parcours utilisateur principaux fonctionnent bel et bien sans JavaScript, en utilisant le pré-rendu côté serveur. Cela contribue également au référencement naturel !
- Veillez à ce que les utilisateurs de lecteurs d'écran soient informés des modifications apportées à l'affichage côté client, en signalant ces changements dans le titre de la page, à l'aide des zones actives ARIA et/ou de la gestion du focus.
- La structure sémantique prime sur l'ergonomie pour les développeurs. Créez des pages HTML aussi sémantiques que possible, quels que soient vos outils de développement CSS ou JavaScript.
Si ces règles d'accessibilité ne sont pas respectées, les applications web faisant un usage intensif de JavaScript risquent d'exclure les utilisateurs en situation de handicap. Il est regrettable qu'il y ait si peu de bons exemples d'applications de ce type, dont le rendu s'effectue côté client, mais grâce à des connaissances adaptées et au respect des bonnes pratiques, nous pouvons proposer au monde entier des exemples d'accessibilité bien plus performants.
Pour plus d’informations sur le développement d’applications web accessibles avec JavaScript, consultez nos supports de formation sur dequeuniversity.com ou les nombreuses conférences et articles que j’ai rédigés (Marcy Sutton). Si vous avez des questions sur la manière d’appliquer ces principes ou si vous souhaitez organiser une session de « pairing », n’hésitez pas à nous contacter sur Twitter ou par e-mail.
