Cet article partagera quelques conseils sur la façon d'améliorer l'accessibilité des composants JavaScript et de fournir aux utilisateurs des moyens plus et meilleurs d'interagir avec les sites Web ou les applications Web.
Cet article a été initialement publié sur Medium
Dans mon premier article, écrivant un HTML accessible, j'ai expliqué pourquoi et comment commencer à me concentrer sur l'accessibilité Web et partagé quelques conseils sur la façon d'améliorer le taggage pour rendre un site Web plus accessible. Certains de ces conseils sont très basiques, mais toujours précieux. Tout se résume à deux des règles non écrites les plus importantes dans le développement frontal: apprenez les bases et passez suffisamment de temps à planifier et à écrire du HTML. De toute évidence, le balisage sémantique sera bénéfique pour vous et vos utilisateurs.
Heureusement, HTML n'est pas le seul langage que nous faisons des sites Web, mais plus la langue est complexe, plus il est probable de faire des erreurs, et JavaScript peut devenir très complexe. Lorsque nous nous concentrons sur le fait que le code fonctionne, il est facile d'oublier les utilisateurs qui utilisent des périphériques d'entrée autres que la souris ou le pavé tactile, tels que les utilisateurs de clavier ou d'écran. Dans le deuxième de cet article sur l'accessibilité Web, j'ai collecté quelques conseils sur ce qu'il faut considérer lors de l'écriture de JavaScript et comment rendre les composants JavaScript plus accessibles.
Points clés
<button></button> lorsque vous avez besoin d'un bouton, est essentiel à l'accessibilité. L'utilisation abusive des éléments HTML peut entraîner des problèmes pour les utilisateurs de clavier et d'écran. JavaScript n'est pas un ennemi
Avant de lire mes conseils, je veux souligner le point important - créer des sites Web accessibles ne signifie pas que vous devez décider d'utiliser ou non JavaScript. L'accessibilité consiste à obtenir du contenu autant de personnes que possible, ce qui inclut également les utilisateurs utilisant des anciens navigateurs et ordinateurs, des connexions Internet lentes, des restrictions de sécurité strictes (par exemple, sans JavaScript), etc. L'expérience peut ne pas être idéale dans des situations comme JavaScript peut ne pas fonctionner ou se charger trop longtemps, mais elle est toujours assez bonne si le site Web est accessible et disponible.
Si JavaScript est exécutable, il peut même être utilisé pour améliorer l'accessibilité. Sara Soueidan a écrit sur son expérience de création de composants d'infiltration pour construire une infraction d'aide entièrement accessible ... plus difficile que je ne le pensais. Elle explique pourquoi «chaque solution sans javascript est livrée avec un très mauvais désavantage qui affecte négativement l'expérience utilisateur» et pourquoi JavaScript est important pour l'accessibilité.
Marco Zehe dans son article "Javascript n'est pas l'ennemi de l'accessibilité! 》 En écrit plus sur JavaScript et l'accessibilité. Je vous recommande fortement de lire son article.
Mais c'est tout pour la conversation d'introduction! Commençons ...
Une bonne gestion de la concentration est essentielle
Il est très important de s'assurer que notre site Web peut être navigué via le clavier. De nombreux utilisateurs comptent sur le clavier lors de la navigation sur les pages Web. Il s'agit notamment de personnes souffrant de troubles du mouvement, de aveugles et de personnes qui ne sont pas en mesure d'utiliser une souris ou un pavé tactile pour une raison quelconque.
naviguer sur le site Web via le clavier signifie passer d'un élément focalisable à un autre élément focalisable de l'ordre Dom. Ceci est généralement réalisé en utilisant la touche onglet ou shift tab >. Les éléments focalisés incluent des liens, des boutons et des éléments de formulaire. Ils peuvent être sélectionnés à l'aide des touches Entrez , et parfois à l'aide de la barre d'espace . Ils ont des fonctionnalités par défaut très utiles en étant concentrés et sélectionnables de différentes manières. Par conséquent, il est logique d'utiliser les éléments sémantiques corrects et d'écrire HTML dans un ordre logique.
Des éléments tels que <div>, <code><span></span> ou <div> ne peuvent pas être concentrés par défaut. Nous utilisons souvent ces balises pour créer des composants personnalisés alimentés par JavaScript, ce qui peut être problématique pour les utilisateurs de clavier.
<p> <strong> Rendre les éléments non focalisés focalisés </strong> </p>
<p> Vous pouvez rendre l'élément non focalisable focalisable en ajoutant des attributs <code>tabindex et des valeurs entières. Si la valeur est définie sur 0, l'élément devient focalisable et accessible via le clavier. Si la valeur est négative, l'élément est focalisé par programme (par exemple, en utilisant JavaScript) mais n'est pas accessible via le clavier. Vous pouvez également utiliser des valeurs supérieures à 0, mais cela modifiera l'ordre de l'onglet naturel et sera considéré comme un anti-motif.
<h2 tabindex="0">一个可聚焦的标题</h2>
Si vous voulez en savoir plus sur tabindex, regardez l'épisode A11Cast de Rob Dodson "Control Focus with Tabindex".
Éléments de mise au point en utilisant JavaScript
Même si les éléments sont focalisés, ils ne sont parfois pas dans le bon ordre DOM. Pour illustrer cela, j'ai créé un composant de fenêtre modal simple (démo et stylo modifiable) dans HTML, CSS et JS.
Si vous utilisez la touche onglet pour sauter sur le bouton et appuyez sur Entrez , une fenêtre modale apparaîtra. Si vous appuyez à nouveau sur la touche onglet , l'accent sera mis sur le lien suivant qui est visuellement affiché sous la fenêtre modale. Le comportement attendu doit être l'élément ciblé suivant dans la fenêtre modale. Mais ce n'est pas le cas, car les éléments sont focalisés dans l'ordre DOM, et la fenêtre modale est au bas du document. Vous pouvez voir son effet réel dans cet enregistrement d'écran.
Pour résoudre ce problème, vous devez rendre la fenêtre modale focalisable, puis la concentrer à l'aide de JavaScript.
<h2 tabindex="0">一个可聚焦的标题</h2>
Vous pouvez le voir dans les exemples mis à jour (démo et stylo modifiable) en passant la touche Tab sur le bouton, appuyez sur Entrez et appuyez à nouveau sur la touche Tab. Vous verrez que la fenêtre modale elle-même a désormais acquise.
C'est bien, mais il y a encore deux problèmes ici.
Si vous fermez la fenêtre modale en appuyant sur ESC , l'accent sera perdu. Idéalement, l'accent doit revenir au bouton avant d'ouvrir la fenêtre modale. Pour y parvenir, vous devez stocker le dernier élément focalisé dans une variable.
Nous pouvons utiliser document.activeElement pour obtenir l'élément qui se concentre actuellement.
function showModal() {
var modal = document.getElementById('modal2');
modal.focus();
...
}Maintenant que vous avez une référence au bouton, vous pouvez le concentrer à nouveau lorsque vous fermez la fenêtre modale.
var lastFocusedElement;
function showModal() {
lastFocusedElement = document.activeElement;
var modal = document.getElementById(modalID);
modal.focus();
...
}J'ai mis à jour le code dans un autre stylo (démo et stylo modifiable). L'accessibilité est bien meilleure maintenant, mais il y a encore place à l'amélioration.
Il est recommandé de garder le focus à l'intérieur de la fenêtre modale lors de l'ouverture de la fenêtre modale. La fenêtre modale peut toujours être apparue maintenant. Je n'entrerai pas dans les détails ici, mais par souci d'exhaustivité, j'ai créé un quatrième stylo avec ce qu'on appelle les "pièges à clavier" (démo et stylo modifiable). Tant que la fenêtre modale est active, l'accent reste dans la fenêtre modale, comme vous pouvez le voir dans cet enregistrement d'écran.
Si vous comparez les premier et dernier stylos, vous constaterez qu'il n'y a pas beaucoup de code supplémentaire. Ce n'est peut-être pas parfait, mais la solution finale est bien meilleure à utiliser.
Il existe également un exemple d'accès à Windows Modal et un bon article intitulé "Utilisation de Tabindex", écrit par des personnes de Google. Si vous souhaitez en savoir plus sur les tests de clavier, veuillez visiter le site Web Webaim. Ils fournissent une liste des «interactions en ligne les plus courantes, des clés standard pour les interactions et d'autres informations à prendre en compte lors des tests».
Pour plus d'exemples de gestion de la mise au point, consultez la vidéo de Marcy Sutton "o la gestion de la mise au point avec CSS, HTML et JavaScript "ou l'épisode d'A11Cast de Rob Dodson" What Is Focus? " 》.
Si vous avez besoin d'un bouton, utilisez l'élément <button>
J'ai écrit sur les boutons dans mon premier post, mais évidemment, beaucoup de gens utilisent des éléments universels comme boutons. Par conséquent, je pense que cela ne ferait pas de mal d'écrire quelque chose de plus sur ce sujet.
J'ai créé un stylo (mode de débogage / stylo avec code) pour illustrer certains problèmes avec l'utilisation <div> ou <span> comme boutons au lieu d'éléments <button> ou <input type="button">. Si vous parcourez la page, vous constaterez que vous pouvez vous concentrer sur le premier bouton, mais pas le deuxième bouton. La raison en est bien sûr - le premier bouton est <button> et le deuxième bouton est <div>. Vous pouvez résoudre ce problème en ajoutant <div> à tabindex="0", ce qui rend les éléments initialement peu impliqués au foyer. C'est pourquoi les troisième et quatrième boutons sont focalisés, même s'ils sont <div>.
<h2 tabindex="0">一个可聚焦的标题</h2>
Même si vous ajoutez le caractère du bouton, le "-bouton div" est en effet axé, mais il agit toujours comme un <div>. Pour illustrer cela, j'ai ajouté un gestionnaire d'événements de clic simple (Pen) à tous les éléments .btn. Si vous cliquez sur le bouton, une boîte d'alarme apparaîtra, mais si vous essayez de faire de même avec la touche ( Entrez ou SpaceBar ), seul le premier bouton déclenchera l'événement . Vous devez ajouter un gestionnaire d'événements clés au "Button div" pour simuler complètement le comportement du bouton par défaut, qui semble être des frais généraux inutiles, n'est-ce pas? C'est pourquoi si vous avez besoin d'un bouton, vous devez utiliser l'élément <button>. Regardez l'épisode A11Cast de Rob Dodson "Utilisez Just Button" ou lisez les liens, les boutons, les soumis et les divs d'Adrian Roselli, pour plus de détails et d'exemples.
Les utilisateurs du lecteur d'écran doivent être informés lorsque le contenu change dynamiquement
Habituellement, les lecteurs d'écran annonceront le contenu uniquement lorsque l'élément se concentre ou lorsque l'utilisateur utilise les propres commandes de navigation des lecteurs d'écran. Si le contenu est chargé dynamiquement et inséré dans le DOM, seule la personne myopenelle peut remarquer ces changements. Les zones ARIA en temps réel fournissent plusieurs solutions à ce problème. Je vais vous montrer comment le faire avec un exemple.
Supposons que vous ayez une page de paramètres de profil où vous pouvez modifier des données personnelles et les enregistrer. Lorsque le bouton Enregistrer est cliqué, les modifications sont enregistrées sans recharger la page. Une alerte informera l'utilisateur si le changement est réussi. Cela peut arriver immédiatement et peut prendre un certain temps. J'ai enregistré une courte vidéo pour vous montrer ce que je viens d'expliquer.
Vous pouvez voir que l'opération réussit, mais vous ne pouvez pas l'entendre. Les utilisateurs du lecteur d'écran ne remarqueront pas les modifications, mais il existe une solution facile à ce problème. En ajoutant un rôle d'état ou d'alerte à la zone de message, le lecteur d'écran écoutera les mises à jour dans l'élément.
function showModal() {
var modal = document.getElementById('modal2');
modal.focus();
...
}Si le texte du message change, le nouveau texte sera lu. Vous pouvez voir et entendre comment cela fonctionne réellement dans cette vidéo et voir le code dans ce stylo.
Traitez vos utilisateurs avec courtoisie
La différence entre "statut" et "alerte" est que "Alert" interrompt le lecteur d'écran lorsqu'il annonce autre chose. Au lieu de cela, "Status" attendra que le lecteur d'écran termine l'annonce.
Il existe également un attribut appelé aria-live qui peut prendre trois valeurs possibles: désactivé, poli ou affirmé. De ces trois valeurs, OFF est la valeur par défaut, aria-live="polite" est équivalent à role="status", et aria-live="assertive" est équivalent à role="alert". Dans certains cas prédéfinis bien connus, il est préférable d'utiliser un «rôle de zone en temps réel» spécifique. De plus, si le navigateur ne prend pas en charge les rôles, vous devrez peut-être essayer d'utiliser les deux propriétés en même temps. Léonie Watson a partagé quelques résultats de test dans le support du lecteur d'écran pour les zones ARIA en temps réel.
<h2 tabindex="0">一个可聚焦的标题</h2>
Parfois, il est logique de déclarer qu'il n'est pas seulement changé
Par défaut, les lecteurs d'écran affichent uniquement le contenu modifié, même s'il y a autre chose dans la même zone en temps réel, il est logique d'annoncer l'ensemble du texte dans certains cas. Le comportement par défaut peut être modifié à l'aide de l'attribut aria-atomic. S'il est défini sur true, la technologie d'assistance affichera l'intégralité du contenu de l'élément.
Paul J. Adam a une démonstration de cas de test aria-atomic qui compare différents lieux en temps réel. Il a également testé sa démo avec la voix off sur iOS 8.1 et enregistré afin que vous puissiez voir comment cela fonctionne réellement. Si vous souhaitez mieux comprendre les cas d'utilisation possibles de aria-atomic, je vous suggère de regarder l'enregistrement (VoiceOver iOS 8.1 lit les personnages restants aria-atomic et aria-relevant dans la zone aria-live).
certaines choses à considérer
Bien sûr, Rob Dodson a également un épisode A11Cast sur les détails et les exemples, alerte! 》. Heydon Pickering a un autre exemple de zone en direct dans sa collection d'échantillons Aria.
Vous n'avez pas à deviner quels modèles d'utilisation que votre composant doit fournir
Il est souvent difficile de penser à toutes les fonctionnalités qu'un composant doit fournir en termes de navigation et d'accessibilité. Heureusement, il existe une ressource appelée Wai-Aria Autoring Practices 1.1 qui peut nous aider à le faire. Wai-Aria Authoring Practices est un guide pour apprendre à créer des applications Internet riches accessibles à l'aide de Wai-Aria. Il décrit le modèle d'utilisation WAI-ARIA recommandé et présente les concepts derrière.
Ils ont des guides pour construire l'accordéon, les curseurs, les onglets, etc.
Composants JavaScript accessibles
Voici quelques excellentes ressources pour les composants JavaScript accessibles:
Si vous connaissez d'autres ressources, veuillez les partager dans les commentaires.
Résumé
Utilisez les avantages de JavaScript pour améliorer l'accessibilité de votre site Web. Faites attention à la gestion de la mise au point, comprenez les modèles d'utilisation courants et envisagez des utilisateurs du lecteur d'écran lors de l'exploitation DOM. Plus important encore, n'oubliez pas pour qui vous avez créé le site Web et vous amusez dans le processus de production.
au-delà de
Tout est là pour le moment. J'espère que ces conseils vous aideront à écrire HTML et JavaScript plus accessibles. Merci beaucoup à Heydon Pickering, car son modèle de conception frontal inclusif est la base de la plupart de ce que vous venez de lire. Si vous souhaitez en savoir plus sur l'accessibilité et le design inclusif, je recommande fortement de lire son livre.
Un merci spécial à Adrian Roselli de m'avoir aidé à écrire cet article, et Eva a relu mon écriture.
Ressources
Il s'agit d'une liste de toutes les ressources liées dans cet article.
FAQ sur l'écriture de javascript accessible
Quelle est l'importance de rédiger l'accessibilité JavaScript?
rédaction de l'accessibilité JavaScript est crucial car il garantit que votre site Web ou votre application est disponible pour tout le monde, y compris les personnes handicapées. Cela élargit non seulement votre base d'utilisateurs, mais améliore également l'expérience utilisateur et la satisfaction. Dans de nombreux domaines, cela est également important pour la conformité légale, car l'accessibilité est requise par divers projets de loi sur la discrimination en matière d'invalidité.
Comment rendre mon code JavaScript plus accessible?
Il existe plusieurs façons de rendre votre code JavaScript plus accessible. Tout d'abord, assurez-vous que votre site Web ou votre application est convivial. Cela signifie que les utilisateurs devraient pouvoir naviguer sur votre site Web en utilisant uniquement le clavier. Deuxièmement, assurez-vous que votre site Web est facile à naviguer avec un lecteur d'écran. Cela peut être réalisé en utilisant des rôles sémantiques HTML et ARIA. Enfin, fournissez toujours un texte alternatif pour l'image et assurez-vous que votre site Web a un contraste des couleurs suffisant.
Qu'est-ce que Aria et comment améliore-t-il l'accessibilité?
Aria signifie accessibles riches applications Internet. Il s'agit d'un ensemble de propriétés qui définissent des méthodes pour rendre le contenu Web et les applications Web plus accessibles aux personnes handicapées. ARIA aide à développer un contenu dynamique et des contrôles d'interface utilisateur avancés à l'aide des technologies AJAX, HTML, JavaScript et connexes. Il peut améliorer l'accessibilité en fournissant des informations supplémentaires sur les éléments, leurs rôles et leur état actuel.
Comment la navigation par clavier améliore-t-elle l'accessibilité?
La navigation au clavier est essentielle pour les utilisateurs qui ne peuvent pas utiliser l'écran de souris ou tactile. En vous assurant que toutes les fonctionnalités du site Web ou de l'application sont accessibles à l'aide du clavier uniquement, vous pouvez rendre votre site Web plus sensible aux utilisateurs ayant un mouvement ou une déficience visuelle. Cela peut être réalisé en utilisant tabindex et la gestion de la mise au point dans le code JavaScript.
Quel est le rôle du HTML sémantique dans l'accessibilité?
HTML sémantique fait référence à l'utilisation de balises HTML pour améliorer la sémantique ou la signification du contenu. Par exemple, utilisez l'étiquette <button></button> pour un bouton au lieu d'un style pour le faire ressembler à un bouton. Ceci est important pour l'accessibilité car il fournit des informations significatives pour les lecteurs d'écran afin d'aider les utilisateurs malvoyants à comprendre le contenu et à naviguer sur le site Web.
Comment assurer un contraste de couleur suffisant pour l'accessibilité?
Un contraste suffisant des couleurs est important pour les utilisateurs ayant une déficience visuelle. Vous pouvez vous assurer en choisissant une combinaison de couleurs conforme au guide du rapport de contraste WCAG 2.1. Il existe des outils en ligne qui peuvent vous aider à vérifier le rapport de contraste de votre couleur sélectionnée.
Quelle est l'importance de fournir un texte alternatif d'image?
Fournir du texte alternatif aux images est essentiel pour les utilisateurs malvoyants qui comptent sur les lecteurs d'écran. Le texte alternatif doit décrire avec précision le contenu de l'image afin que les utilisateurs qui ne puissent pas voir l'image peuvent toujours comprendre leur objectif dans le contexte de la page.
Comment tester l'accessibilité du code JavaScript?
Il existe plusieurs outils disponibles pour tester l'accessibilité du code JavaScript. Ces outils incluent des outils de test automatisés tels que AX et Lighthouse, ainsi que des tests manuels à l'aide des lecteurs d'écran et une navigation sur le clavier uniquement. Il est important d'utiliser une combinaison de tests automatisés et de tests manuels pour assurer une accessibilité complète.
Quels sont les problèmes d'accessibilité courants en JavaScript?
Certains problèmes d'accessibilité courants en JavaScript incluent le manque d'accessibilité du clavier, le contraste des couleurs insuffisant, le manque de texte alternatif pour les images et le manque de caractères Aria ou une utilisation incorrecte de caractères Aria. Ces problèmes peuvent rendre votre site Web difficile ou indisponible à utiliser par les personnes handicapées.
Comment en savoir plus sur JavaScript et l'accessibilité?
Il existe de nombreuses ressources pour vous aider à en savoir plus sur JavaScript et l'accessibilité. Ces ressources comprennent des tutoriels en ligne, des cours et des documents d'organisations telles que W3C. De plus, pratiquer la rédaction de code accessible et tester régulièrement l'accessibilité peut considérablement améliorer votre compréhension et vos compétences.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Quel fichier est mydrivers
Quelle est la différence entre Dubbo et Zookeeper
Quel est le format du document ?
Il existe plusieurs façons de positionner la position CSS
Comment calculer la factorielle d'un nombre en python
Utilisation de la commande source sous Linux
À quelles touches les flèches font-elles référence dans les ordinateurs ?
Solution au problème selon lequel vscode ne peut pas s'exécuter après le téléchargement de Python
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
