Share
Relever le défi de créer un site Web accessible - ou de rendre accessible un site Web existant - peut parfois être une tâche difficile. Il peut être difficile de comprendre exactement Comment un utilisateur malvoyant, par exemple, peut utiliser un site Web. Naturellement, il peut être difficile pour nous d'être heureux de pouvoir accéder à nos sites..
Dans cet article, je vais vous montrer que tester l'accessibilité ne doit pas être une tâche difficile. Je vais vous expliquer les outils et les processus que nous utilisons chez Envato pour que nos plates-formes restent utilisables par tous les niveaux de compétence et que l'accessibilité reste au premier plan de nos préoccupations lorsque nous fournissons de nouvelles fonctionnalités..
Cet article fait partie de l'accessibilité du Web: le guide complet d'apprentissage, où nous avons rassemblé une gamme de tutoriels, d'articles, de cours et d'ebooks pour vous aider à comprendre l'accessibilité au Web dès le début..
Google Lighthouse est l’un des outils les plus importants pour juger de notre accessibilité. Lighthouse est un outil permettant d'évaluer dans quelle mesure un site Web respecte les meilleures pratiques de l'industrie, que ce soit pour la performance, le référencement ou, dans notre cas, l'accessibilité..
Lighthouse peut être exécuté via l'interface en ligne ou via les outils de développement de Chrome. L’utilisation de Lighthouse présente l’avantage important de permettre à Google de savoir exactement sur quoi s'appuie Google pour décider de son accessibilité. ils crois que notre site est.
Pour accéder à Lighthouse via les outils de développement de Chrome:
Exécution de Lighthouse via les outils de développement de Chrome.Une fois exploités, nous obtenons une liste des endroits où notre site pourrait être amélioré pour devenir plus accessible. Par exemple, les résultats de la page de recherche ThemeForest se présentent comme suit:
Résultats phares pour la page de recherche ThemeForest.Phare nous donne une liste des zones où notre page est ne pas réputé accessible, ainsi qu'une liste des vérifications manuelles que nous pouvons effectuer pour nous assurer que l'accessibilité est la meilleure possible. Si une vérification n'a aucun sens, Lighthouse fournit des liens en ligne pour en savoir plus sur ce qu'il convient de faire..
D'après le rapport ci-dessus, nous pouvons voir que nous devrions chercher à améliorer notre contraste de couleur afin de mieux répondre aux besoins des personnes ayant une déficience visuelle. Je peux aussi voir que je devrais être capable de faire défiler la page d'une manière qui a du sens dans son contexte, ainsi que diverses autres vérifications..
Envato est un autre outil fantastique, baptisé pa11y (du nom de l'abréviation couramment donnée pour l'accessibilité, «a11y». Pa11y nous permet de définir un niveau de spécification d'accessibilité prédéfini - Section 508, WCAG 2.0 A, AA ou AAA - et de tester une page Web contre ces spécifications.
Lors de son exécution, chaque jour nous fournit une liste des spécifications d'accessibilité que nous rencontrons et de celles que nous ne respectons pas encore, ainsi qu'une recommandation sur la manière de se conformer à chaque norme. L’utilisation de pa11y présente l’avantage de nous permettre d’être absolument sûr du respect des spécifications WCAG et de nous donner des étapes concrètes pour devenir plus conforme..
page de résultats.Chez Envato, nous exécutons tous les jours automatiquement chaque projet de code avant son déploiement sur nos plates-formes à l’aide de pa11y-ci. Cependant, vous pouvez également exécuter tous les jours à l'aide de l'application de bureau Koa11y..
Interface Koa11y.L’un des domaines dans lesquels les outils de développement de Firefox sont excellents est l’inspection du contenu accessible de notre site. Cela nous permet d’éviter de deviner comment un lecteur d’écran lit notre contenu à un utilisateur..
Pour activer l'inspecteur d'accessibilité dans Firefox:
Activation du panneau d'accessibilité dans les outils de développement de Firefox.Une fois activé, un onglet d'accessibilité devient disponible pour nous. Cela nous permet de voir notre site comme un lecteur d'écran peut le lire à voix haute.
Inspecteur d'accessibilité Firefoxle aria-role est listé à gauche, dans ce cas soit section, lien ou graphique. Tous les éléments ne doivent pas nécessairement avoir un nom, mais l'attribut est un bon moyen d'indiquer quelque chose à un utilisateur. Nous pouvons inclure un nom en veillant à ce qu'un contenu textuel, une image alt tag, ou un aria-label attribut est présent. Nous pouvons également survoler le rôle et laisser Firefox mettre en évidence l'élément correspondant dans le balisage..
Naviguer dans cet arbre est utile en soi pour comprendre ce à quoi ressemble notre site Web sans que rien ne nous détourne du contenu. C'est également un excellent moyen de comprendre comment une nouvelle fonctionnalité pourrait apparaître pour nos utilisateurs..
Un autre niveau de contrôle utile que nous utilisons lors de l'écriture de code est effectué via le linting de code. Linting nous permet d’être automatiquement alerté des morceaux de code qui sont garantis comme étant inaccessibles. Nous utilisons un sous-ensemble de règles de lintégration TypeScript de Microsoft pour lintier notre TypeScript. Nous utilisons également le paquet eslint-plugin-jsx-a11y pour lint notre code JavaScript..
Un linter pourrait me prévenir, par exemple, que j’avais oublié d’inclure un alt tag sur l'image suivante:
Un autre exemple pourrait être un avertissement concernant l'inclusion d'un élément susceptible de distraire les utilisateurs de lecteurs d'écran:
Linting fournit des informations instantanées nous permettant d’apporter des modifications rapides pour nous assurer que le produit final est aussi accessible que possible..
Nous utilisons plusieurs extensions de navigateur pour mieux comprendre comment un utilisateur peut utiliser notre site au fur et à mesure de sa création, afin que nous puissions apporter des ajustements au fur et à mesure. Voici quelques extensions remarquables que nous avons signalées comme particulièrement utiles..
Spectrum vous permet de voir votre site de la même manière que les personnes souffrant de daltonisme. Avec cela, nous pouvons voir des parties de notre site qui peuvent avoir un faible contraste par rapport au fond, ou des liens dont les états actifs sont trop similaires à leurs états passifs.
Page d'accueil de ThemeForest vue par une personne ayant une achromatopsie.Fond sombre et texte clair vous permettent d'afficher votre site en mode contraste élevé, un mode souvent utilisé par ceux qui recherchent un niveau d'accessibilité élevé. Avec cela, nous pouvons voir si des parties de notre site sont trop encombrées ou trop petites pour être vues efficacement dans ce mode..
Page d'accueil ThemeForest vue en couleur inverse.Celui-ci n'est disponible que pour ceux qui ont un Mac, mais l'expérience d'un site comme le ferait un utilisateur malvoyant est assez longue. VoiceOver nous lit le texte sélectionné sur commande. Il faut s’y habituer, mais une fois appris, il est facile à utiliser. Sur le Web, VoiceOver offre la meilleure prise en charge de Safari, mais il peut être utilisé avec l’ensemble du système d’exploitation Mac OSX..
Activer VoiceOver avec CMD + F5. Une fois activé, certaines fonctions pratiques que vous pouvez activer peuvent être trouvées via:
S'assurer que votre site Web est accessible en vaut la peine. C'est souvent considéré comme une tâche soit trop difficile, soit trop tardive à accomplir. Ni l'un ni l'autre ne sont vrais, et ce n'est certainement pas ce que nous avons trouvé à Envato. L'utilisation de techniques et d'outils comme ceux décrits ci-dessus simplifie considérablement la création d'un site Web accessible, ce qui nous donne l'assurance que le produit final sera convivial. tout nos utilisateurs.
Accentsconagua