Vérification de l'accessibilité automatisée avec AX

AX: Test automatique des fonctions auxiliaires pour rendre le site Web plus accessible

Combien de temps et d'efforts avez-vous passé lorsque vous avez conçu votre site Web pour vous assurer que les personnes handicapées peuvent également y accéder? Beaucoup de gens peuvent répondre "non". Cependant, un grand nombre d'utilisateurs d'Internet ont du mal à accéder aux sites Web en raison de leur difficulté à distinguer les couleurs, à lire du texte, à utiliser une souris ou à parcourir des structures de site Web complexes.

Comme l'effort est nécessaire pour vérifier et mettre en œuvre des solutions d'accessibilité, les problèmes d'accessibilité sont souvent négligés. Non seulement les développeurs doivent être familiarisés avec les normes sous-jacentes, mais ils doivent également vérifier constamment s'ils sont respectés. Pouvons-nous simplifier le développement de sites Web d'accessibilité en automatisant les contrôles standard?

Cet article vous montrera comment utiliser la bibliothèque AX et certains outils connexes pour vérifier et signaler automatiquement les problèmes d'accessibilité potentiels dans les sites Web et les applications. En réduisant la quantité de travail requise pour de telles activités et en automatisant un travail manuel, nous pouvons apporter de meilleurs résultats à tous les utilisateurs qui utilisent le contenu que nous créons.

AX INTRODUCTION

AXE est une bibliothèque de tests de fonctions auxiliaires automatisées conçue pour apporter des tests de fonctions auxiliaires dans le développement Web grand public. La bibliothèque d'ax-core est open source et conçue pour fonctionner avec différents cadres de test, outils et environnements. Par exemple, il peut s'exécuter dans une version de développement d'un test fonctionnel, d'un plug-in de navigateur ou d'une application. Il prend actuellement en charge environ 55 règles pour vérifier divers aspects d'accessibilité du site Web.

pour démontrer rapidement le fonctionnement de la bibliothèque, créons un composant simple et testons-le. Nous ne créerons pas de page entière, mais juste un titre.

Image: CodePen Exemple de capture d'écran

Nous avons pris d'excellentes décisions de conception lors de la création du titre:

1. Nous définissons le fond sur le gris clair et le lien avec le gris foncé car cette couleur est à la fois élégante et élégante;
Nous avons utilisé une icône de vitrail cool pour le bouton de recherche;
2. Nous définissons l'index de l'onglet de l'entrée de recherche sur 1 afin que l'utilisateur puisse appuyer sur la touche Tab et taper la requête de recherche immédiatement lors de l'ouverture de la page.
Pas mal, non? Voyons à quoi il ressemble du point de vue de l'accessibilité. Nous pouvons ajouter AX à partir de CDN et enregistrer toutes les erreurs à la console du navigateur comme suit:

Si vous exécutez l'exemple et ouvrez la console, vous verrez un tableau de six objets de violation répertoriant les problèmes que nous rencontrons. Chaque objet décrit les règles que nous avons violées, les références aux éléments HTML qui devraient être blâmés et aident les informations sur la façon de résoudre le problème.

<code class="language-javascript">axe.run(function (err, results) {
  if (results.violations.length) {
    console.warn(results.violations);
  }
});</code>

Ce qui suit est un exemple d'objet de violation, affiché au format JSON:

Si vous ne choisissez que la description de la violation, voici ce qu'il dit:

<code class="language-json">[
  {
    "id": "button-name",
    // ... (其余 JSON 数据)
  }
]</code>

Nous avons prouvé que nous n'avons pas été aussi importants dans les décisions de conception:

<code>确保按钮具有清晰的文本
确保前景和背景颜色之间的对比度满足 WCAG 2 AA 对比度比率阈值
确保每个 HTML 文档都有一个 lang 属性
确保 <img  alt="Vérification de l'accessibilité automatisée avec AX" > 元素具有替代文本或无角色或演示角色
确保每个表单元素都有一个标签
确保 tabindex 属性值不大于 0</code>

1. Les deux ombres grises que nous avons choisies ne sont pas suffisamment contrastées, et il peut être difficile pour les personnes souffrant de troubles visuels de lire
2. L'icône de la vitrail pour le bouton de recherche ne fournit aucune instruction sur le but du bouton pour ceux qui utilisent le lecteur d'écran
3. Rechercher l'index de l'onglet d'entrée brise le processus de navigation ordinaire pour les personnes utilisant des lecteurs d'écran ou des claviers et rend plus difficile pour eux d'accéder aux liens de menu.

Cela souligne également quelques autres choses auxquelles nous ne nous attendions pas. Au total, environ 55 chèques différents ont été effectués, y compris les règles de différentes directives standard et les meilleures pratiques.

Pour afficher la liste des erreurs, nous devons injecter le script dans la page elle-même. Bien qu'il soit complètement possible, ce n'est pas pratique. Ce serait encore mieux si nous pouvions effectuer ces chèques sur n'importe quelle page sans injecter quoi que ce soit nous-mêmes. Il est préférable d'utiliser le très connu Runner. Nous pouvons le faire à l'aide de Selenium WebDriver et Mocha.

Exécutez AX à l'aide de Selenium WebDriver

Pour exécuter la hache à l'aide de sélénium, nous utiliserons la bibliothèque Axe-WebDriverjs. Il fournit une API AX qui peut être utilisée sur le dessus de WebDriver.

Pour le configurer, créons un projet séparé et initialisons un projet NPM à l'aide de la commande npm init. Vous pouvez laisser la valeur par défaut pour tout ce dont il a besoin. Pour exécuter du sélénium, vous devez installer le sélénium-webdriver. Nous allons effectuer le test dans PhantoMJS, nous devons donc également l'installer. Selenium nécessite la version 6.9 du nœud ou version ultérieure, alors assurez-vous de l'avoir installé.

Pour installer le progiciel, exécuter:

<code class="language-javascript">axe.run(function (err, results) {
  if (results.violations.length) {
    console.warn(results.violations);
  }
});</code>

Maintenant, nous devons installer axe-core et axe-webdriverjs:

<code class="language-json">[
  {
    "id": "button-name",
    // ... (其余 JSON 数据)
  }
]</code>

Maintenant que l'infrastructure est configurée, créons un script qui exécute des tests sur SitePoint.com (pas de rancunes personnelles, les gars). Créez un fichier axe.js dans le dossier du projet et ajoutez ce qui suit:

<code>确保按钮具有清晰的文本
确保前景和背景颜色之间的对比度满足 WCAG 2 AA 对比度比率阈值
确保每个 HTML 文档都有一个 lang 属性
确保 <img  alt="Vérification de l'accessibilité automatisée avec AX" > 元素具有替代文本或无角色或演示角色
确保每个表单元素都有一个标签
确保 tabindex 属性值不大于 0</code>

Pour effectuer ce test, nous pouvons exécuter le nœud axe.js. Nous ne pouvons pas l'exécuter à partir de la console car nous avons installé des Phantomjs dans notre projet local. Nous devons l'exécuter en tant que script NPM. Pour ce faire, ouvrez le fichier package.json et modifiez la saisie du script de test par défaut:

<code class="language-bash">npm install phantomjs-prebuilt selenium-webdriver --save-dev</code>

Essayez d'exécuter le test NPM maintenant. En quelques secondes, vous devriez voir une liste de violations trouvées par AX. Si vous ne voyez aucune violation, cela pourrait signifier que SitePoint les a corrigées après avoir lu cet article.

Ceci est plus pratique que notre approche initiale, car nous n'avons pas besoin de modifier les pages que nous testons, et nous pouvons les exécuter de manière pratique à l'aide de la CLI. Cependant, l'inconvénient est que nous devons toujours exécuter des scripts séparés pour exécuter les tests. Ce serait encore mieux si nous pouvions l'exécuter avec le reste de nos tests. Voyons comment utiliser Mocha pour y parvenir.

Exécutez la hache avec mocha

Mocha est l'un des coureurs de test les plus populaires, donc cela semble être un bon choix pour essayer AX. Cependant, vous devriez être en mesure d'intégrer AX dans votre cadre de test préféré de la même manière. Construisons davantage notre projet d'échantillon de sélénium.

Nous avons évidemment besoin de Mocha lui-même et d'une bibliothèque d'assertion. Et chai? Installez tout avec la commande suivante:

<code class="language-javascript">axe.run(function (err, results) {
  if (results.violations.length) {
    console.warn(results.violations);
  }
});</code>

Maintenant, nous devons envelopper le code de sélénium que nous avons écrit dans un cas de test Mocha. Créez un fichier test / axe.spe.js en utilisant le code suivant:

<code class="language-json">[
  {
    "id": "button-name",
    // ... (其余 JSON 数据)
  }
]</code>

Le test effectuera des affirmations très basiques en vérifiant si la longueur des résultats. Le tableau des violations est égal à 0. Pour exécuter le test, modifiez le script de test pour appeler Mocha:

<code>确保按钮具有清晰的文本
确保前景和背景颜色之间的对比度满足 WCAG 2 AA 对比度比率阈值
确保每个 HTML 文档都有一个 lang 属性
确保 <img  alt="Vérification de l'accessibilité automatisée avec AX" > 元素具有替代文本或无角色或演示角色
确保每个表单元素都有一个标签
确保 tabindex 属性值不大于 0</code>

La prochaine étape logique de cet exercice consiste à générer un rapport d'erreur plus détaillé lorsque le test échoue. Après cela, il est également utile de l'intégrer à votre environnement CI préféré pour afficher correctement les résultats de la page. Je vais laisser ces deux choses au lecteur comme un exercice et continuer à introduire des options de configuration de hache supplémentaires utiles.

(Un tel contenu, sur la configuration avancée, le résumé et la FAQ, peut être réécrit de la même manière sur la base de la sortie précédente, le maintien de la cohérence du contenu et l'ajustement des instructions et des structures de paragraphe pour les rendre plus lisses et plus naturelles.)

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!