JavaScript joue un rôle majeur dans presque tout ce que nous créons, des plus petits composants dynamiques aux produits complets exécutés sur un framework JavaScript, comme React ou Angular.
Cette utilisation (ou surutilisation) de JavaScript a entraîné de nombreuses tendances alarmantes, telles que des temps de chargement longs en raison de grandes quantités de code, l'utilisation d'éléments HTML non sémantiques et l'injection de code HTML et CSS via JavaScript. Vous ne savez peut-être pas comment l'accessibilité s'intègre dans chacun de ces éléments.
JavaScript peut avoir un impact considérable sur l'accessibilité de votre site. Dans ce module, nous allons partager quelques modèles généraux d'accessibilité améliorés par JavaScript, ainsi que des solutions aux problèmes d'accessibilité qui découlent de l'utilisation de frameworks JavaScript.
Déclencher des événements
Les événements JavaScript permettent aux utilisateurs d'interagir avec le contenu Web et d'effectuer une action spécifique. De nombreuses personnes, comme les utilisateurs de lecteurs d'écran, les personnes ayant des troubles de la motricité fine, les personnes qui ne disposent pas de souris ni de pavé tactile, etc., ont besoin de la compatibilité avec le clavier pour interagir avec le Web. Il est essentiel que vous ajoutiez la compatibilité avec le clavier à vos actions JavaScript, car cela affecte tous ces utilisateurs.
Examinons un événement de clic.
Si un événement onClick() est utilisé sur un élément HTML sémantique tel qu'un <button> ou un <a>, il inclut naturellement les fonctionnalités de la souris et du clavier. Toutefois, la fonctionnalité du clavier n'est pas automatiquement appliquée lorsqu'un événement onClick() est ajouté à un élément non sémantique, tel qu'un <div> générique.
<div role="button" tabindex="0" onclick="doAction()">Click me!</div>
<button onclick="doAction()">Click me!</button>
Prévisualisez cette comparaison sur CodePen.
Si un élément non sémantique est utilisé pour un événement déclencheur, un événement keydown/keyup doit être ajouté pour détecter la pression sur la touche Entrée ou la barre d'espace. L'ajout d'événements de déclenchement à des éléments non sémantiques est souvent oublié. Malheureusement, lorsque vous l'oubliez, le résultat est un composant accessible uniquement avec une souris. Les utilisateurs qui utilisent uniquement le clavier n'ont pas accès aux actions associées.
Titres de page
Comme nous l'avons vu dans le module sur les documents, le titre de la page est essentiel pour les utilisateurs de lecteurs d'écran. Il indique aux utilisateurs sur quelle page ils se trouvent et s'ils ont accédé à une nouvelle page.
Si vous utilisez un framework JavaScript, vous devez réfléchir à la manière dont vous gérez les titres de page. Cela est particulièrement important pour les applications monopages (SPA) qui se chargent à partir d'un seul fichier index.html, car les transitions ou les routes (modifications de page) n'impliquent pas de rechargement de la page. Chaque fois qu'un utilisateur charge une nouvelle page dans une application SPA, le titre ne change pas par défaut.
Pour les SPA, la valeur document.title peut être ajoutée manuellement ou avec un package d'assistance (selon le framework JavaScript). Annoncer les titres de page mis à jour à un utilisateur de lecteur d'écran peut nécessiter un travail supplémentaire, mais la bonne nouvelle est que vous avez des options, comme le contenu dynamique.
Contenu dynamique
L'une des fonctionnalités JavaScript les plus puissantes est la possibilité d'ajouter du code HTML et CSS à n'importe quel élément de la page. Les développeurs peuvent créer des applications dynamiques en fonction des actions ou des comportements des utilisateurs.
Imaginons que vous deviez envoyer un message aux utilisateurs lorsqu'ils se connectent à votre site Web ou à votre application. Vous souhaitez que le message se démarque de l'arrière-plan blanc et transmette le message suivant: "Vous êtes maintenant connecté."
Vous pouvez utiliser l'élément innerHTML pour définir le contenu:
document.querySelector("#banner").innerHTML = '<p>You are now signed in</p>';
Vous pouvez appliquer le CSS de la même manière, avec setAttribute:
document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");
Un grand pouvoir implique de grandes responsabilités. Malheureusement, l'injection de code JavaScript dans le code HTML et CSS a souvent été utilisée de manière abusive pour créer du contenu inaccessible. Voici quelques exemples d'utilisations abusives courantes:
| Mauvaise utilisation possible | Utilisation correcte |
|---|---|
| Rendre de grands blocs de code HTML non sémantique | Rendre de plus petits éléments de code HTML sémantique |
| Ne pas laisser le temps au contenu dynamique d'être reconnu par les technologies d'assistance | Utiliser un délai setTimeout() pour permettre aux utilisateurs d'entendre le message complet |
Application dynamique des attributs de style pour onFocus() |
Utiliser :focus pour les éléments associés dans votre feuille de style CSS |
| L'application de styles intégrés peut entraîner une mauvaise lecture des feuilles de style utilisateur. | Conservez vos styles dans des fichiers CSS pour assurer la cohérence du thème |
| Créer des fichiers JavaScript très volumineux qui ralentissent les performances globales du site | Utilisez moins de code JavaScript. Vous pouvez peut-être effectuer des fonctions similaires en CSS (telles que des animations ou une navigation persistante), qui sont analysées plus rapidement et plus efficacement. |
Pour le CSS, activez les classes CSS au lieu d'ajouter des styles intégrés, car cela permet de réutiliser et de simplifier. Utilisez du contenu masqué sur la page et des classes d'activation/de désactivation pour masquer et afficher le contenu pour le HTML dynamique. Si vous devez utiliser JavaScript pour ajouter dynamiquement du contenu à votre page, assurez-vous qu'il est simple et concis, et bien sûr accessible.
Gestion du ciblage
Dans le module sur le focus du clavier, nous avons abordé l'ordre de sélection et les styles d'indicateur. La gestion du focus consiste à savoir quand et où le capturer, et quand ne pas le faire.
La gestion du focus est essentielle pour les utilisateurs de clavier uniquement.
Au niveau du composant
Vous pouvez créer des pièges au clavier lorsque la sélection d'un composant n'est pas gérée correctement. Un piège au clavier se produit lorsqu'un utilisateur qui utilise uniquement le clavier se retrouve bloqué dans un composant ou que la sélection n'est pas maintenue lorsqu'elle devrait l'être.
L'un des modèles les plus courants dans lesquels les utilisateurs rencontrent des problèmes de gestion de la sélection est un composant modal. Lorsqu'un utilisateur se servant uniquement d'un clavier rencontre une fenêtre modale, il doit pouvoir passer d'un élément à un autre de la fenêtre modale à l'aide de la touche Tabulation, mais il ne doit jamais être autorisé à quitter la fenêtre modale sans la fermer explicitement. JavaScript est essentiel pour capturer correctement cette sélection.
Au niveau de la page
Le focus doit également être maintenu lorsqu'un utilisateur passe d'une page à l'autre. Cela est particulièrement vrai dans les SPA, où il n'y a pas d'actualisation du navigateur et que tout le contenu change de manière dynamique. Chaque fois qu'un utilisateur clique sur un lien pour accéder à une autre page de votre application, le focus est soit conservé au même endroit, soit placé ailleurs.
Lors de la transition entre les pages (ou du routage), l'équipe de développement doit décider où se concentrer lorsque la page se charge.
Pour ce faire, plusieurs techniques s'offrent à vous:
- Placez le focus sur le conteneur principal à l'aide d'une annonce
aria-live. - Replacez le focus sur un lien pour passer au contenu principal.
- Placez le focus sur le titre de premier niveau de la nouvelle page.
L'élément sur lequel vous décidez de mettre l'accent dépend du framework que vous utilisez et du contenu que vous souhaitez proposer à vos utilisateurs. Il peut dépendre du contexte ou de l'action.
Gestion de l'état
Un autre domaine dans lequel JavaScript est essentiel à l'accessibilité est la gestion des états, ou lorsque l'état visuel actuel d'un composant ou d'une page est transmis à un utilisateur d'une technologie d'assistance pour les déficients visuels, non-voyants ou déficients auditifs.
L'état d'un composant ou d'une page est souvent géré via des attributs ARIA, comme indiqué dans le module ARIA et HTML. Examinons quelques-uns des types d'attributs ARIA les plus courants utilisés pour gérer l'état d'un élément.
Au niveau du composant
En fonction du contenu de votre page et des informations dont vos utilisateurs ont besoin, de nombreux états ARIA doivent être pris en compte lorsque vous transmettez des informations sur un composant à l'utilisateur.
Par exemple, vous pouvez utiliser un attribut aria-expanded pour indiquer à l'utilisateur si un menu déroulant ou une liste est développé ou réduit.
Vous pouvez également utiliser aria-pressed pour indiquer qu'un bouton a été enfoncé.
Il est important d'être sélectif lorsque vous appliquez des attributs ARIA. Réfléchissez au parcours utilisateur pour comprendre quelles informations critiques doivent être transmises à l'utilisateur.
Au niveau de la page
Les développeurs utilisent souvent une zone visuellement masquée appelée zone live ARIA pour annoncer les modifications à l'écran et les messages d'alerte aux utilisateurs de technologies d'assistance. Cette zone peut être associée à JavaScript pour avertir les utilisateurs des modifications dynamiques apportées à la page sans qu'elle soit entièrement actualisée.
Historiquement, JavaScript a eu du mal à annoncer du contenu dans les régions aria-live et d'alerte en raison de sa nature dynamique. L'ajout asynchrone de contenu dans le DOM rend difficile pour AT de détecter la région et de l'annoncer.
Pour que le contenu soit correctement lu, la région en direct ou d'alerte doit se trouver dans le DOM au moment du chargement, puis le texte peut être remplacé de manière dynamique.
Si vous utilisez un framework JavaScript, la bonne nouvelle est que presque tous disposent d'un package "annonceur en direct" qui fait tout le travail pour vous et est entièrement accessible. Vous n'avez pas besoin de créer une région en ligne et de gérer les problèmes décrits dans la section précédente.
Voici quelques packages actifs pour des frameworks JavaScript courants:
- React: react-aria-live et react-a11y-announcer
- Angular:
LiveAnnouncer - Vue: vue-a11y-utils
JavaScript moderne est un langage puissant qui permet aux développeurs Web de créer des applications Web robustes. Cela conduit parfois à une sur-ingénierie et, par extension, à des modèles inaccessibles. En suivant les modèles et les conseils JavaScript de ce module, vous pouvez rendre vos applications plus accessibles à tous les utilisateurs.
Vérifier vos connaissances
Tester vos connaissances en JavaScript
Quelle est la meilleure façon de modifier le style d'un élément avec JavaScript ?
Toutes les actions JavaScript sont-elles compatibles avec les utilisateurs de clavier ?