JavaScript

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:

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