JavaScript joue un rôle majeur dans presque tout ce que nous créons, qu'il s'agisse de petits composants dynamiques ou de produits complets exécutés sur un framework JavaScript, comme React ou Angular.
Cette utilisation (ou surutilisation) de JavaScript a mis en évidence de nombreuses tendances alarmantes, telles que de longs temps de chargement dus à de grandes quantités de code, l'utilisation d'éléments HTML non sémantiques et l'injection de HTML et de 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 partagerons des 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.
Événements déclencheurs
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 souffrant de troubles de la motricité fine, les personnes sans souris ni pavé tactile, etc., s'appuient sur la prise en charge du clavier pour interagir avec le Web. Il est essentiel d'ajouter la prise en charge du 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 que <button> ou <a>, il inclut naturellement les fonctionnalités de la souris et du clavier. Toutefois, la fonctionnalité de 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 l'appui sur la touche Entrée ou Espace. On oublie souvent d'ajouter des événements de déclenchement aux éléments non sémantiques. Malheureusement, en cas d'oubli, le résultat est un composant qui n'est accessible qu'avec une souris. Les utilisateurs qui n'utilisent que 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 la page sur laquelle ils se trouvent et s'ils ont accédé à une nouvelle page.
Si vous utilisez un framework JavaScript, vous devez réfléchir à la façon dont vous gérez les titres de page. Cela est particulièrement important pour les applications monopages (SPA) qui se chargent à partir d'un fichier index.html unique, car les transitions ou les routes (changements de page) n'impliquent pas d'actualisation de la page. Chaque fois qu'un utilisateur charge une nouvelle page dans une SPA, le titre ne change pas par défaut.
Pour les SPA, la valeur document.title peut être ajoutée manuellement ou à l'aide d'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 qu'il indique "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 JavaScript de code HTML et CSS a été utilisée à mauvais escient pour créer du contenu inaccessible. Voici quelques exemples d'utilisations abusives courantes :
| Utilisation abusive possible | Utilisation correcte |
|---|---|
| Afficher de grands blocs de code HTML non sémantique | Afficher des éléments HTML sémantiques plus petits |
| Ne pas laisser le temps au contenu dynamique d'être reconnu par la technologie d'assistance | Utiliser un délai de setTimeout() pour permettre aux utilisateurs d'entendre l'intégralité du message |
Appliquer des attributs de style pour onFocus() de manière dynamique |
Utilisez :focus pour les éléments associés dans votre feuille de style CSS. |
| L'application de styles intégrés peut empêcher la lecture correcte 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 effectuer des fonctions similaires en CSS (comme des animations ou une navigation fixe), qui sont analysées plus rapidement et sont plus performantes. |
Pour le CSS, activez/désactivez les classes CSS au lieu d'ajouter des styles intégrés, car cela permet la réutilisabilité et la simplicité. Utilisez du contenu masqué sur la page et des classes d'activation pour masquer et afficher du contenu pour le HTML dynamique. Si vous devez utiliser JavaScript pour ajouter du contenu de manière dynamique à votre page, assurez-vous qu'il est simple, concis et, bien sûr, accessible.
Gestion du ciblage
Dans le module sur la navigation au clavier, nous avons abordé l'ordre de tabulation et les styles d'indicateur. La gestion de la mise au point consiste à savoir quand et où piéger la mise au point, et quand elle ne doit pas l'être.
La gestion de la sélection est essentielle pour les utilisateurs de clavier uniquement.
Au niveau du composant
Vous pouvez créer des pièges clavier lorsque le focus d'un composant n'est pas géré correctement. Un piège clavier se produit lorsqu'un utilisateur qui n'utilise que le clavier est bloqué dans un composant ou lorsque la sélection n'est pas maintenue alors qu'elle devrait l'être.
L'un des cas les plus courants où les utilisateurs rencontrent des problèmes de gestion de la mise au point 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 interactif à l'autre à l'aide de la touche de tabulation, mais il ne doit jamais pouvoir sortir de la fenêtre modale sans l'avoir fermée explicitement. JavaScript est essentiel pour piéger correctement cette mise au point.
Au niveau de la page
La mise au point doit également être maintenue lorsqu'un utilisateur navigue d'une page à l'autre. Cela est particulièrement vrai dans les SPA, où il n'y a pas d'actualisation du navigateur et où 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, la sélection est conservée au même endroit ou peut être placée ailleurs.
Lors du passage d'une page à une autre (ou du routage), l'équipe de développement doit décider où le focus se déplace lorsque la page se charge.
Pour ce faire, plusieurs techniques s'offrent à vous :
- Placez le curseur sur le conteneur principal avec une annonce
aria-live. - Replacez le curseur sur un lien pour accéder au contenu principal.
- Déplacez le curseur sur le titre de premier niveau de la nouvelle page.
L'endroit où vous décidez de mettre l'accent dépendra du framework que vous utilisez et du contenu que vous souhaitez proposer à vos utilisateurs. Elle peut dépendre du contexte ou de l'action.
Gestion de l'état
La gestion des états est un autre domaine où JavaScript est essentiel pour l'accessibilité. Il s'agit de transmettre l'état visuel actuel d'un composant ou d'une page à un utilisateur de technologie d'assistance souffrant d'une déficience visuelle, d'une cécité ou d'une surdicécité.
L'état d'un composant ou d'une page est souvent géré à l'aide d'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 sont à prendre 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 sont développés ou réduits.
Vous pouvez également utiliser aria-pressed pour indiquer qu'un bouton a été appuyé.
Il est important d'être sélectif lorsque vous appliquez des attributs ARIA. Réfléchissez au parcours utilisateur pour comprendre quelles informations essentielles 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 apportées à l'écran et les messages d'alerte aux utilisateurs de technologies d'assistance (TA). Cette zone peut être associée à JavaScript pour informer les utilisateurs des modifications dynamiques apportées à la page sans nécessiter le rechargement de la page entière.
Historiquement, JavaScript a eu du mal à annoncer le 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 la détection et l'annonce de la région par les technologies d'assistance.
Pour que le contenu soit lu correctement, la région de diffusion en direct ou d'alerte doit se trouver dans le DOM au chargement. Le texte peut ensuite être remplacé de manière dynamique.
Si vous utilisez un framework JavaScript, la bonne nouvelle est que la quasi-totalité d'entre eux disposent d'un package "live announcer" qui fait tout le travail pour vous et est entièrement accessible. Vous n'avez pas à vous soucier de créer une région dynamique ni de gérer les problèmes décrits dans la section précédente.
Voici quelques packages en direct pour les 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.