Comment faire un audit d'accessibilité de base

Publié: 2017-08-09

Vous avez donc beaucoup appris sur l'accessibilité ces derniers temps, mais vous souhaitez maintenant vérifier votre site vous-même et voir où vous devez vous améliorer. Comment faites-vous cela? C'est l'heure d'un audit d'accessibilité ! Dans ce didacticiel, je vais vous montrer les ficelles d'un audit d'accessibilité de base qui vous permettra d'avoir un site plus accessible.

Comme vous vous en souviendrez dans ma série de présentations, un site Web accessible est perceptible, utilisable, compréhensible et robuste. Tester pour s'assurer que votre site respecte les quatre piliers de l'accessibilité n'implique pas de codage, alors ne vous inquiétez pas. Nous pouvons installer une extension Chrome ou deux, mais vous me remercierez plus tard. Commençons!

REMARQUE : Ce didacticiel suppose que vous savez comment utiliser l'inspecteur Chrome ou les outils de développement de base du navigateur fournis.

Perceptible

mise en page par audit d'accessibilité du volant d'inertie femme à lunettes de soleil avec tablette

Commencez par perceptible car si votre site ne peut pas être perçu par l'utilisateur, il ne sait pas qu'il existe. Ici, nous allons nous concentrer sur trois choses : les alternatives de texte, les légendes et la couleur.

Pour chaque image de votre site qui est plus que décorative (ce qui signifie qu'il s'agit d'une partie essentielle de l'information, pas seulement une amélioration), l'image doit avoir un attribut alt . Vous pouvez le vérifier en inspectant le code source de l'image et en recherchant l'attribut. Si c'est là, super ! Nous devons maintenant nous assurer que la valeur de l'attribut est utile. Un attribut alt doit décrire l'image de manière à informer les utilisateurs malvoyants. Ce n'est PAS une occasion d'insérer des mots-clés SEO dans votre site. Faites votre description courte, précise et utile. Les descriptions plus longues doivent être enregistrées pour le contenu du site lui-même.

Accompagnant les images, il y a le contenu vidéo et audio. Dans les deux cas, vous devrez fournir une sorte de sous-titrage ou de transcription du contenu. Vos vidéos doivent être sous-titrées ou pré-sous-titrées. Le test est aussi simple que de démarrer une vidéo sur votre site et de vérifier les sous-titres.

Enfin, nous devons tester nos couleurs. Pour ce faire, nous allons installer une extension Chrome qui active un mode niveaux de gris. Une fois installé, chargez à nouveau votre site et activez l'extension. Notez les zones difficiles à lire. C'est là que se situent vos problèmes d'un point de vue contrasté. À partir de là, désactivez les niveaux de gris et utilisez le vérificateur de contraste des couleurs Snook pour vérifier vos scores. Vous devrez utiliser l'inspecteur pour récupérer vos valeurs hexadécimales si vous ne les avez pas à portée de main. N'oubliez pas que tout ce qui est inférieur à 4,5 (ou 3,0 pour un texte de grande taille) est un problème.

Opérable

L'étape suivante consiste à s'assurer que le site est opérationnel. Cela signifie que nous allons tester la fonctionnalité du clavier. Pour cela, ouvrez votre site. Une fois la page chargée, appuyez sur la touche de tabulation. Ce qui se produit? J'espère qu'un lien de saut apparaît. Sinon, vous devriez au moins avoir un contour autour du premier lien de la page. Idéalement, vous aurez des états :focus de style personnalisé, mais le strict minimum devrait être ce que le navigateur fournit. À partir de là, continuez à appuyer sur la touche de tabulation pour vous assurer que vous allez de lien en lien dans l'ordre dans lequel ils apparaissent sur la page. Si votre attention ne cesse de sauter, vous avez un problème d'index de tabulation qui doit être résolu. Les plugins de formulaire sont souvent le coupable ici.

mise en page par l'homme d'audit d'accessibilité du volant en flanelle sur téléphone portable dans un étui

Compréhensible

Ensuite, nous allons vérifier votre site pour nous assurer qu'il est lisible. Après tout, si un utilisateur ne peut pas lire votre contenu, à quoi bon l'avoir ? Les exigences ici sont assez simples : la langue de votre site peut-elle être déterminée avec du code ? Pour vérifier, ouvrez votre inspecteur et regardez la <html> principale. At-il un attribut lang ? Si oui, vous êtes clair. Vous voudrez également vous assurer que tous les segments qui sont dans une langue différente ont l'attribut lang appliqué.

Il existe d'autres vérifications de niveau AAA sur la lisibilité, mais celles-ci dépassent le cadre d'un audit de base. En général, cependant, vous souhaiterez conserver votre contenu à un niveau de lecture de 6e année, à moins que votre public cible ne soit d'un niveau d'éducation supérieur.

Les autres aspects importants de la compréhension de votre site tournent autour des messages d'erreur et du changement de contexte. Plus précisément, son absence. Lorsqu'un utilisateur donne le focus ou active une entrée, un changement significatif ne devrait pas se produire. La page ne doit pas sauter à moins que l'utilisateur ne soit averti d'une manière ou d'une autre (une icône de flèche, un texte d'aide, etc.). C'est le genre de choses que vous auriez remarquées lors des tests avec le clavier.

Lorsque vous testez vos formulaires, vous pouvez en dire autant des messages d'erreur. Les erreurs doivent être affichées clairement à l'utilisateur et rester à l'écran afin qu'il puisse les corriger. C'est quelque chose que même les grands sites Web se trompent tout le temps. Ils oublient de mettre l'accent sur la partie de la page qui contient une erreur, ou du moins de la marquer d'une manière ou d'une autre. Testez vos formulaires pour les erreurs et assurez-vous que les messages sont clairs. L'utilisation d'un plugin de formulaires solides vous aidera beaucoup, mais ne comptez pas sur le plugin pour faire tout votre travail. Vous voudrez également vous assurer que vous n'utilisez pas simplement une couleur (généralement rouge) pour signifier une erreur. Le texte réel "Erreur" est très important, en particulier pour les personnes daltoniennes rouge/vert.

Au-delà des erreurs, vos formulaires et entrées doivent contenir des instructions claires. Parcourez chaque entrée de votre site et assurez-vous que ce que l'utilisateur doit faire est parfaitement clair. Par exemple, les formulaires de recherche doivent avoir autre chose qu'une loupe. Une simple étiquette "recherche" suffira. Assurez-vous que vos utilisateurs savent quoi faire avec les éléments interactifs. N'assume jamais.

Robuste

mise en page par le bureau d'audit d'accessibilité du volant d'inertie avec graphiques et bloc-notes devant le clavier

Enfin, votre site doit être robuste. Cela signifie que le site est utilisable avec des technologies d'assistance telles que les lecteurs d'écran. Si votre site est bien formé avec HTML, ça devrait aller. N'oubliez pas que certains navigateurs modernes, y compris Chrome, corrigent les erreurs HTML de base, ou du moins tentent de les corriger. Le moyen le plus rapide de tester la robustesse de votre site consiste à charger le site dans Safari et à activer VoiceOver, un lecteur d'écran intégré. Si votre site ne fonctionne pas, vous devrez résoudre ces problèmes.

Emballer

Ce didacticiel d'audit a été rapide, mais c'est le but. Il ne faut pas longtemps pour s'assurer que votre site est accessible et les outils requis sont minimes. La chose importante à retenir est que vous voulez vous mettre à la place de quelqu'un qui n'a pas les capacités que vous tenez pour acquises en tant qu'utilisateur moyen. Gardez cet état d'esprit et vos audits garantiront que vos sites sont plus accessibles.

Au cas où vous l'auriez manqué, consultez cette série sur l'accessibilité :

  • Une introduction à l'accessibilité : partie 1
  • Une introduction à l'accessibilité : partie 2
  • Une introduction à l'accessibilité : partie 3