JavaScript joue un rôle majeur dans presque tout ce que nous créons, des composants dynamiques plus petits aux produits complets exécutés sur un framework JavaScript, comme React ou Angular.
Cette utilisation (ou excessive) de JavaScript a fait émerger de nombreuses tendances alarmantes, telles que les temps de chargement longs imputables à 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. Et vous ne savez peut-être pas comment l'accessibilité s'intègre dans chacune de ces pièces.
JavaScript peut avoir un impact considérable sur l'accessibilité de votre site. Dans ce module, nous partagerons quelques modèles généraux d'accessibilité améliorés par JavaScript, ainsi que des solutions aux problèmes d'accessibilité découlant de l'utilisation de frameworks JavaScript.
Événements déclencheurs
Les événements JavaScript permettent aux utilisateurs d'interagir avec du contenu Web et d'effectuer une action spécifique. De nombreuses personnes, comme les utilisateurs de lecteurs d'écran, les personnes ayant des déficiences motrices fines, les personnes sans souris ni pavé tactile, etc., comptent sur la compatibilité avec le clavier pour interagir avec le Web. Il est essentiel d'ajouter la prise en charge du clavier à vos actions JavaScript, car cela concerne 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 souris et de 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 l'appui sur la touche Entrée ou Espace. Il est souvent oublié d'ajouter des événements de déclenchement à des éléments non sémantiques. Malheureusement, lorsqu'on l'oublie, le résultat est un composant qui n'est accessible qu'avec une souris. Les utilisateurs se servant uniquement du clavier n'ont pas accès aux actions associées.
Titres de page
Comme nous l'avons appris dans le module Document, le titre de la page est essentiel pour les utilisateurs de lecteurs d'écran. Elle 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 des pages. 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 (changements de page) n'entraînent pas l'actualisation de la page. Chaque fois qu'un utilisateur charge une nouvelle page dans une application monopage, le titre ne change pas par défaut.
Pour les applications Web monopages, la valeur document.title peut être ajoutée manuellement ou avec un package d'assistance (selon le framework JavaScript). Présenter les titres de page mis à jour aux utilisateurs de lecteurs d'écran peut nécessiter des efforts supplémentaires. Toutefois, la bonne nouvelle, c'est que vous disposez d'options telles que 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.
Supposons 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 transmettent le message "Vous êtes maintenant connecté".
Vous pouvez utiliser l'élément innerHTML pour définir le contenu:
document.querySelector("#banner").innerHTML = '<p>You are now logged in</p>';
Vous pouvez appliquer le code 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 toujours été utilisée de façon abusive pour créer du contenu inaccessible. Voici quelques utilisations abusives courantes:
| Usage abusif potentiel | Utilisation correcte |
|---|---|
| Afficher de grands segments de code HTML non sémantique | Afficher de plus petites parties du code HTML sémantique |
| Ne pas laisser le temps au contenu dynamique d'être reconnu par la technologie d'assistance | Utilisation d'un délai de setTimeout() pour permettre aux utilisateurs d'entendre l'intégralité du message |
Appliquer dynamiquement 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 empêcher la lecture correcte des feuilles de style de l'utilisateur. | Conservez vos styles dans des fichiers CSS pour préserver 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 exécuter des fonctions similaires en CSS (par exemple, des animations ou la navigation persistante), qui sont analysées plus rapidement et sont plus performantes |
Pour CSS, activez/désactivez les classes CSS au lieu d'ajouter des styles intégrés, car cela permet une réutilisation et une simplicité. Utilisez du contenu masqué sur la page et activez/désactivez les classes pour masquer ou afficher le contenu pour le code HTML dynamique. Si vous devez utiliser JavaScript pour ajouter dynamiquement du contenu à votre page, assurez-vous qu'il est simple, concis et, bien sûr, accessible.
Gestion du ciblage
Dans le module de sélection du clavier, nous avons abordé l'ordre de mise au point et les styles d'indicateur. La gestion du ciblage consiste à savoir quand et où piéger l’objectif et quand il ne doit pas l’être.
La gestion du ciblage est essentielle pour les utilisateurs de clavier uniquement.
Au niveau du composant
Vous pouvez créer des trappe lorsque le curseur d'un composant n'est pas correctement géré. Un trappe au clavier se produit lorsqu'un utilisateur ne disposant que du clavier est bloqué dans un composant, ou que la sélection n'est pas maintenue au moment où elle devrait l'être.
L'un des modèles les plus courants où les utilisateurs rencontrent des problèmes de gestion du ciblage se trouve dans un composant modal. Lorsqu'un utilisateur ne disposant que d'un clavier rencontre une fenêtre modale, il doit pouvoir passer d'un élément à l'autre à l'aide de la touche de tabulation, mais ils ne doivent jamais être autorisés en dehors de la fenêtre modale sans l'ignorer explicitement. JavaScript est essentiel pour placer correctement ce curseur.
Au niveau de la page
De plus, l'attention doit être maintenue lorsqu'un utilisateur passe d'une page à l'autre. Cela est particulièrement vrai dans les applications monopages, où il n'y a pas d'actualisation du navigateur et tout le contenu est modifié de manière dynamique. Chaque fois qu'un utilisateur clique sur un lien pour accéder à une autre page de votre application, le curseur est conservé au même endroit ou peut être placé entièrement ailleurs.
Lors de la transition entre les pages (ou le routage), l'équipe de développement doit décider où le curseur sera placé lors du chargement de la page.
Pour ce faire, il existe plusieurs techniques:
- Placer le curseur sur le conteneur principal avec une annonce
aria-live. - Replacez le curseur sur un lien pour passer au contenu principal.
- Placez le curseur sur le titre de premier niveau de la nouvelle page.
Votre choix dépendra du framework que vous utilisez et du contenu que vous souhaitez proposer à vos utilisateurs. Cela peut dépendre du contexte ou de l'action.
Gestion de l'état
Autre domaine dans lequel JavaScript est essentiel pour l'accessibilité : la gestion des états, ou lorsque l'état visuel actuel d'un composant ou d'une page est transmis à un utilisateur de technologie d'assistance malvoyant, non-voyant ou sourd aveugle.
Souvent, l'état d'un composant ou d'une page est 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 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 est développé ou réduit.
Vous pouvez également utiliser aria-pressed pour indiquer qu'un utilisateur a appuyé sur un bouton.
Il est important d'être sélectif lorsque vous appliquez des attributs ARIA. Réfléchissez au flux 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 région active ARIA pour annoncer les modifications à l'écran et envoyer des messages d'alerte aux utilisateurs des technologies d'assistance. Cette zone peut être associée à JavaScript pour informer les utilisateurs des modifications dynamiques apportées à la page sans qu'il soit nécessaire d'actualiser la page entière.
Jusqu'à maintenant, JavaScript a eu du mal à annoncer du contenu dans aria-live et des régions d'alerte en raison de sa nature dynamique. L'ajout de contenu de manière asynchrone dans le DOM rend difficile pour les TA de détecter la région et de l'annoncer.
Pour que le contenu soit correctement lu, la région "En direct" ou "Alerte" doit se trouver dans le DOM au chargement. Le texte peut ensuite être échangé de manière dynamique.
Si vous utilisez un framework JavaScript, la bonne nouvelle est que presque tous disposent d'un package "Annonce en direct" qui effectue tout le travail pour vous et est entièrement accessible. Vous n'avez pas à vous soucier de la création d'une région active ni de la résolution des problèmes décrits dans la section précédente.
Voici quelques packages actifs pour les frameworks JavaScript courants:
- Réact: react-aria-live et react-a11y-announcer
- Angular:
LiveAnnouncer - Vue: vue-a11y-utils
Le JavaScript moderne est un langage puissant qui permet aux développeurs Web de créer des applications Web robustes. Cela conduit parfois à une suringénierie et, par extension, à des modèles inaccessibles. En suivant les modèles et les conseils JavaScript présentés dans ce module, vous pouvez rendre vos applications plus accessibles à tous les utilisateurs.
Testez 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 ?