JavaScript joue un rôle majeur dans presque tout ce que nous créons, des composants dynamiques à des produits complets s'exécutant sur un framework JavaScript, React ou Angular.
Cette utilisation (ou utilisation excessive) de JavaScript a fait émerger de nombreuses tendances préoccupantes, temps de chargement longs engendrés par une grande quantité de code, utilisation d'un code HTML non sémantique et l'injection de code HTML et CSS via JavaScript. Et vous pourriez être incertain de la façon dont 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 dans ce module, nous partagerons des modèles généraux d'accessibilité par JavaScript, ainsi que des solutions aux problèmes d'accessibilité à l'aide 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 ayant des handicaps moteurs, les personnes sans souris ou pavé tactile, et d'autres, s'appuient sur la compatibilité du clavier pour interagir avec le Web. Il est essentiel que vous ajoutiez la prise en charge du clavier à vos actions JavaScript, car 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 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, événement Keydown/keyup doit être ajouté pour détecter l'appui sur la touche Entrée ou Espace. Ajouter des événements déclencheurs à les éléments non sémantiques sont souvent oubliés. Malheureusement, quand on l'oublie, le résultat est un composant qui n'est accessible qu'à l'aide de la souris. Clavier uniquement les utilisateurs n'ont pas accès aux actions associées.
Titres de page
Comme nous l'avons vu dans le module Document, le titre de la page est essentiel pour les utilisateurs de lecteurs d'écran. Il indique aux utilisateurs quelle page et s'il a 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. Ceci est particulièrement
important pour
Applications monopages
chargés à partir d'un seul fichier index.html, en tant que transitions ou routes (page
modifications) n'entraînera pas l'actualisation de la page. Chaque fois qu'un utilisateur charge une nouvelle page dans
une application monopage, le titre ne changera pas par défaut.
Pour les applications monopages, document.title peut être ajoutée manuellement ou à l'aide d'un package d'assistance (selon framework JavaScript). Lancement titres de page mis à jour pour un utilisateur de lecteur d'écran peut nécessiter un travail supplémentaire, mais la bonne nouvelle est vous disposez de différentes 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.
Supposons que vous deviez envoyer un message aux utilisateurs lorsqu'ils se connectent à votre site Web. ou l'application. Vous voulez que le message se détache de l'arrière-plan blanc et transmette 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 CSS de la même manière,
setAttribute:
document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");
Un grand pouvoir implique de grandes responsabilités. Malheureusement, JavaScript L'injection de code HTML et CSS a toujours été utilisée de manière abusive pour créer des images contenus. Voici une liste d'usages abusifs courants:
| Usage abusif potentiel | Utilisation correcte |
|---|---|
| Afficher de grands blocs de code HTML non sémantique | Afficher des éléments de code HTML sémantique 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 |
Application dynamique des attributs de style pour onFocus() |
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 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 JavaScript. Vous pouvez être en mesure d'exécuter des fonctions similaires en CSS (comme des animations ou une navigation persistante), qui analysent plus rapidement et sont plus performantes |
Pour le CSS, activez les classes CSS au lieu d'ajouter des styles intégrés, car cela permet de les réutiliser et de les simplifier. Utiliser du contenu masqué sur la page et activer/désactiver les classes pour masquer et afficher du contenu pour le code HTML dynamique. Si vous devez utiliser pour ajouter dynamiquement du contenu à votre page, assurez-vous qu'il est simple et concises et, bien sûr, accessibles.
Gestion du ciblage
Dans le module de sélection du clavier, nous avons abordé les styles d'ordre et d'indicateur. Gérer sa concentration, c'est savoir quand et où piéger la mise au point et quand elle ne doit pas être piégée.
La gestion du focus est essentielle pour les utilisateurs qui n'utilisent qu'un clavier.
Au niveau du composant
Vous pouvez créer des interruptions au clavier lorsque la sélection d'un composant n'est pas correctement gérée. Un problème de clavier se produit lorsqu'un utilisateur n'utilisant que le clavier est bloqué dans un composant, ou l'attention n'est pas maintenue alors qu'elle le devrait.
L'un des modèles les plus courants où les utilisateurs rencontrent des problèmes de gestion des sélections se trouve dans un composant modal. Lorsqu'un utilisateur utilisant uniquement un clavier rencontre une modale, l'utilisateur doivent pouvoir naviguer entre les éléments exploitables de la fenêtre modale, mais ils ne doit jamais être autorisé en dehors de la fenêtre modale sans la fermer explicitement. JavaScript est essentiel pour enfermer correctement cet élément.
Au niveau de la page
Elle doit également être ciblée lorsqu'un utilisateur navigue d'une page à l'autre. C'est surtout dans les applications monopages, pas d'actualisation du navigateur, et tout le contenu change de façon dynamique. Chaque fois qu'un utilisateur clique sur un lien pour y accéder vers une autre page de votre application, l'élément d'interface actif est soit conservé ou potentiellement placé ailleurs.
Lors des transitions entre les pages (ou du routage), l'équipe de développement doit décider où le focus est placé lors du chargement de la page.
Il existe plusieurs techniques pour y parvenir:
- Placer le curseur sur le conteneur principal avec une annonce
aria-live. - Remettez le curseur sur un lien pour passer au contenu principal.
- Placez le curseur sur le titre de premier niveau de la nouvelle page.
L'endroit où vous décidez de vous concentrer dépendra du cadre que vous utilisez et le contenu à proposer à vos utilisateurs. Il peut s'agir d'un contexte ou dépend de l'action requise.
Gestion de l'état
Un autre domaine où 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 de technologies d'assistance présentant une déficience visuelle, aveugle ou sourd aveugle.
Souvent, l'état d'un composant ou d'une page est géré par le biais d'attributs ARIA, présenté dans le module ARIA et HTML. Passons en revue 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
Selon le contenu de votre page et les informations dont vos utilisateurs ont besoin, de nombreux états ARIA à prendre en compte lors de la transmission d'informations sur un composant à l'utilisateur.
Par exemple, vous pouvez utiliser un
aria-expanded
pour indiquer à l'utilisateur si une liste ou un menu déroulant sont développés 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 aux flux utilisateur pour comprendre quelles informations critiques doivent être transmises à l’utilisateur.
Au niveau de la page
Les développeurs utilisent souvent une zone visuellement cachée appelée Région live ARIA pour annoncer les changements à l'écran et envoyer des messages d'alerte aux technologies d'assistance (AT). Cette zone peut être associée à JavaScript pour avertir les utilisateurs de l'utilisation les modifications apportées à la page sans nécessiter l'actualisation de la page entière.
Par le passé, JavaScript a eu du mal à annoncer du contenu en
aria-live
et les régions d'alerte en raison de leur 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 lu correctement, la zone "En direct" ou "Alerte" doit se trouver dans la
DOM lors du chargement, le texte peut être échangé de façon dynamique.
Si vous utilisez un framework JavaScript, la bonne nouvelle est que presque tous ont un "Speaker de match en direct" qui fait tout le travail à votre place et qui est entièrement accessibles. Inutile de créer une région active les problèmes décrits dans la section précédente.
Voici quelques packages actifs pour les frameworks JavaScript courants:
- React: react-aria-live et react-a11y-announcer
- Angulaire:
LiveAnnouncer - Vue: vue-a11y-utils
Le langage 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 l'extension, les schémas inaccessibles. En suivant les formats et conseils JavaScript dans ce module, vous pouvez rendre vos applications plus accessibles à tous les utilisateurs.
Testez vos connaissances
Tester vos connaissances sur 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 ?