La tendance en matière de développement web s'oriente vers l'utilisation de frameworks et de bibliothèques JavaScript pour créer des applications monopages (SPA). Cette nouvelle tendance s'accompagne à son tour d'un ensemble de nouveaux enjeux liés à l'accessibilité du web. Ces enjeux sont propres aux applications monopages en raison du comportement du rendu côté client, qui ajoute une couche de complexité lorsqu'il s'agit de comprendre et de créer des applications accessibles.
Angular n'est pas étranger aux problèmes d'accessibilité inhérents à tout framework JavaScript. En effet, Angular est devenu l'un des frameworks JavaScript les plus populaires. Il s'agit d'un framework JavaScript puissant et robuste, capable de créer des sites web complexes.
Bien qu'Angular soit un framework puissant et robuste, les développeurs doivent néanmoins rester attentifs aux problèmes d'accessibilité susceptibles de survenir lors de son utilisation. Si l'approche et les principaux enjeux sont globalement les mêmes dans Angular que pour tout autre contenu web lorsqu'il s'agit de respecter les normes WCAG, il est important de bien comprendre les principaux problèmes d'accessibilité propres à Angular.
Numéro 1 : Nombre de pages vues / Titres
Angular est une application monopage et, par conséquent, la plupart des transitions (c'est-à-dire le passage à une nouvelle page) n'entraînent pas de rechargement de la page. De nombreux développeurs ont tendance à penser que « monopage » équivaut à « titre unique » et qu'il n'y a aucun moyen de résoudre ce problème. Cependant, cette hypothèse est fausse. Il existe des moyens permettant aux développeurs de gérer avec soin le changement de titre de page au sein des composants ou lors des transitions, par exemple en utilisant le service de titre fourni par le framework lui-même.
Problème n° 2 : navigation au clavier
Keyboard navigation can be tricky in Angular. There is one main culprit when it comes to keyboard navigation, and that is the use of non-semantic HTML. As cool at may be to have a nicely designed button made with all <div> tags and CSS, without proper semantics keyboard users will not be able to the content properly.
Grâce à la simplicité d'utilisation de la syntaxe de liaison à un composant proposée par Angular, vous pouvez littéralement ajouter des événements de clic sur une balise HTML. Dans la mesure du possible, il est important d'utiliser un code HTML sémantique afin de faciliter la navigation au clavier.
Problématique n° 3 : la gestion de la concentration
Le principal problème d'accessibilité auquel sont confrontées les applications Angular est, de loin, celui de la « gestion du focus ». Bien que les temps de chargement et la vitesse des sites web s'améliorent considérablement grâce au chargement asynchrone du contenu, les utilisateurs en situation de handicap sont laissés pour compte.
Lorsque du contenu est ajouté de manière asynchrone sur la page, les utilisateurs de lecteurs d'écran et ceux qui naviguent uniquement à l'aide du clavier peuvent perdre le fil de leur position sur la page, voire ne pas se rendre compte qu'un nouveau contenu est apparu. Cela peut entraîner une expérience très difficile et frustrante pour une personne utilisant une technologie d'assistance qui tente d'accéder à votre contenu web.
Stratégies à adopter
Angular est un framework exceptionnel qui permet de créer des applications épurées, rapides et extrêmement interactives, qui font entrer le développement web dans l'avenir. Cependant, s'il n'est pas correctement mis en œuvre, cela peut avoir des répercussions négatives en matière d'accessibilité.
Gardez à l'esprit les points suivants lorsque vous souhaitez vous assurer que votre application touche tous les publics :
- Si une page ou une vue change, veillez à mettre à jour correctement le titre de la page
- Veillez à utiliser un code HTML sémantique approprié dans la mesure du possible
- Si vous n'utilisez pas de HTML sémantique, utilisez ARIA pour baliser correctement le contenu.
- Essayez de limiter l'utilisation des balises HTML personnalisées
- Veillez à gérer correctement le focus lorsque vous utilisez du contenu asynchrone.
- Utilisez des outils de test d'accessibilité tels que axe-core pour vérifier que votre contenu ne présente pas de problèmes d'accessibilité au fur et à mesure que vous codez vos composants.
En résumé
Si vous n'êtes pas au courant des problèmes d'accessibilité critiques et des stratégies mentionnées ci-dessus dans votre application Angular, vous risquez de laisser de côté les utilisateurs en situation de handicap. En revanche, si vous suivez ces stratégies et que vous vous tenez informé des dernières évolutions en matière d'accessibilité au sein du framework, vous pourrez créer des applications Angular qui toucheront un public bien plus large !
Pour en savoir plus sur Angular et l'accessibilité, découvrez notre nouvelle formation « Angular Accessibility » sur dequeuniversity.com, qui aborde en détail les enjeux les plus avancés, les solutions techniques et les stratégies de test pour votre application !
