Test d’accessibilité 101

Nous encourageons tous ceux qui souhaitent créer du contenu accessible à utiliser des outils de test d’accessibilité automatisés. Ces outils aident les créateurs de contenu à développer leurs contenus en détectant les erreurs et en proposant des suggestions pour améliorer l’accessibilité de leur produit, de leur application ou de leur site Web. Cette page présente une liste d’outils de test d’accessibilité recommandés.

Veuillez noter que certains des outils de test d’accessibilité répertoriés nécessitent des autorisations administratives pour être installés sur votre appareil.

Création d’un ensemble d’outils

Outil : Extensions de navigateur WAVE

L’extension WAVE pour Chrome, Firefox et Edge vous permet d’évaluer le contenu web pour les problèmes d’accessibilité directement dans votre navigateur. Comme l’extension fonctionne entièrement dans votre navigateur web, aucune information n’est envoyée au serveur WAVE.

Bien que WAVE soit plus efficace lorsqu’il est utilisé par une personne connaissant bien l’accessibilité du web, les personnes qui ne sont pas des experts en accessibilité du web peuvent également en tirer profit.

Si vous ne connaissez pas WAVE, profitez de la vidéo d’introduction à WAVE (en anglais seulement).

Compatibilité des navigateurs:

Documentation supplémentaire sur WAVE:

Trucs et astuces sur WAVE:

Conseils pour tirer le meilleur parti de WAVE (en anglais seulement)

La barre latérale de WAVE indique si WAVE a détecté des erreurs ou non. L’absence d’erreurs ne signifie pas que votre page est accessible ou conforme. Les icônes rouges indiquent les erreurs d’accessibilité qui doivent être corrigées. Les icônes vertes indiquent des caractéristiques d’accessibilité, c’est-à-dire des éléments qui améliorent l’accessibilité (bien qu’il faille les vérifier). Les autres icônes et indicateurs, en particulier les icônes d’alerte jaunes, mettent en évidence d’autres éléments qu’il convient d’examiner. WAVE met en évidence les informations sous-jacentes relatives à l’accessibilité d’une page afin qu’elles puissent être facilement évaluées dans leur contexte.

Styles et code:

WAVE permet de désactiver les feuilles de style en cascade (CSS) des pages. Les mises en page complexes basées sur les feuilles de style en cascade peuvent devenir difficiles à lire, en particulier après l’intégration des icônes WAVE, de sorte que la désactivation des styles peut simplifier la présentation de la page. La désactivation des styles vous permet également de voir l’ordre de lecture et de navigation sous-jacent; c’est-à-dire l’ordre dans lequel les utilisateurs, de clavier (seulement) et de lecteurs d’écran, accèdent à la page. Pour visualiser le code correspondant à une icône WAVE particulière, vous pouvez sélectionner l’onglet Code au bas de la page pour visualiser le balisage/DOM sous-jacent de votre page.

Outil : Accessibility Insights for Web

« Accessibility Insights for Web » est une extension pour Chrome et Microsoft Edge qui aide les développeurs à trouver et à résoudre les problèmes d’accessibilité dans les applications et les sites Web.

L’outil prend en charge deux scénarios principaux:

« FastPass » est un processus léger en deux étapes qui aide les développeurs à identifier les problèmes d’accessibilité courants et à fort impact en moins de cinq minutes.
- Vérifications automatisées — l’outil vérifie automatiquement la conformité à environ 50 exigences en matière d’accessibilité.
- Arrêts de tabulation — l’outil fournit des instructions claires, une automatisation partielle et une aide visuelle qui facilitent l’identification des problèmes d’accessibilité critiques liés à l’accès au clavier, tels que les arrêts de tabulation manquants, les pièges à clavier et l’ordre incorrect des tabulations.
« Assessment » permet à toute personne ayant des compétences en HTML de vérifier qu’une application Web ou un site Web est conforme aux directives d’accessibilité au contenu web (WCAG) 2.1 niveau AA.
- Contrôles automatisés — l’outil vérifie automatiquement la conformité à environ 50 exigences d’accessibilité.
- Tests manuels — l’outil fournit des instructions étape par étape, des exemples et des conseils sur la manière de résoudre les problèmes pour environ 20 tests; de nombreux tests sont « assistés », ce qui signifie que l’outil identifie les instances de test ou fournit une aide visuelle.

Il s’agit d’un outil pour tous les niveaux, vous n’avez pas besoin de connaître l’accessibilité pour l’utiliser, il vous guidera à chaque étape.

Compatibilité des navigateurs:

Pour le web:
- Ajouter à Chrome
- Ajouter à Edge
Télécharger pour Windows
Pour Android:

Documentation sur Accessibility Insights:

Conseils et astuces:

Commencez par regarder une vidéo offrant une vue d’ensemble (en anglais seulement)
Ou lisez un tutoriel:
- FastPass (en anglais seulement)
- Assessment (en anglais seulement)

Raccourcis clavier:

Augmentez votre productivité avec les raccourcis clavier pour Accessibility Insights (en anglais seulement)

Outil: LightHouse

Lighthouse est un outil automatisé à code source ouvert qui permet d’améliorer la qualité des pages web. Il peut être exécuté sur n’importe quelle page web, qu’elle soit publique ou qu’elle nécessite une authentification. Il propose des audits pour les performances, l’accessibilité, les applications web progressives, le référencement, etc. Un outil très utile pour les développeurs multimédias et les testeurs d’accessibilité du web.

Navigateurs:

Documentation sur l’extension LightHouse:

Aide supplémentaire:

Utilisez le Lighthouse Viewer (en anglais seulement) pour afficher et partager des rapports en ligne.

Aide et ressources supplémentaires

Tests clavier et manuels de votre site

Outils automatisés et validateurs pour identifier les problèmes d’accessibilité :

Valideur W3C
Valideur CSS HTML
axe DevTools

Principes de base des tests au clavier

Aller vers l’avant : utiliser la touche de tabulation
Reculer : utiliser les touches Majuscule et Tabulation
Activer quelque chose: utiliser la touche Entrée ou la barre d’espacement
Pour cocher / décocher une case à cocher: utilisez la barre d’espacement
Se déplacer dans la page et les listes déroulantes, modifier la sélection des boutons radio: utiliser les touches fléchées

Examinez ou testez votre site périodiquement pour vous assurer qu’il n’y a pas de nouvelles erreurs et qu’il reste accessible.

Testez la navigation et l’interactivité de chaque page web en utilisant uniquement le clavier et des technologies d’assistance telles que JAWS, NVDA, ZoomText.
Assurez-vous que les images contiennent un texte alternatif ou qu’elles sont marquées comme décoratives si aucune information importante ou utile n’est présentée aux utilisateurs.
- Si une image fournit des informations importantes ou utiles, elle doit être accompagnée d’un texte alternatif approprié, ne dépassant pas 150 caractères. Si le contenu de l’image ne peut être expliqué dans cette limite, une description graphique doit figurer sous l’image.
Utilisez la touche de tabulation entre les sections d’une page web pour s’assurer que le contenu suit un ordre significatif de haut en bas et de gauche à droite.
- Veillez également à ce qu’une mise en évidence visible entoure tous les éléments pouvant faire l’objet d’une tabulation ou d’un focus.
Veillez à ce que les utilisateurs ne rencontrent pas de « piège » lorsqu’ils utilisent le clavier.
Vérifiez si vous disposez de liens de contournement permettant aux utilisateurs de sauter le contenu d’une page si des informations longues ou répétitives sont présentées sur chaque page.
- Par exemple, les liens « Passer à la navigation principale », « Passer à l’en-tête » et « Passer au pied de page », en fonction de leur utilité sur la page.
Testez tous les liens présentés sur chaque page pour vous assurer qu’ils fonctionnent (internes, externes, téléchargeables) et que chaque lien contient un texte unique.
- Si un lien s’ouvre dans un nouvel onglet ou une nouvelle fenêtre du navigateur, il est recommandé d’informer les utilisateurs de cette action dans le texte du lien ou dans la balise de titre du lien, par exemple« S’ouvre dans un nouvel onglet ou une nouvelle fenêtre du navigateur".
Veillez à ce que tous les éléments de formulaire tels que les boutons radio, les cases à cocher, les champs d’édition et les listes déroulantes soient correctement étiquetés.
- Prévenir les erreurs et suggérer aux utilisateurs de corriger les erreurs de formulaire.
Veillez à ce que les vidéos soient accompagnées de transcriptions descriptives et proposez des sous-titres codés que les utilisateurs peuvent activer ou désactiver.
Veillez à ce que le contenu de la page s’adapte de façon harmonieuse à toutes les fenêtres de visualisation et soit utilisable avec un zoom de 400 %.
S’assurer que le balisage HTML et CSS est correct en validant le code à l’aide d’un outil de validation tel que W3C Validator ou CSS HTML Validator.
Effectuez des tests de performance sur différents réseaux, car il arrive que des contenus complexes (par exemple des images de grande taille ou des pages interactives et fonctionnelles) mettent du temps à se charger sur des réseaux plus lents.
Désactivez le haut-parleur et le microphone et utilisez uniquement le clavier pour accéder à la page web et évaluez si l’expérience est la même. Êtes-vous en mesure de comprendre tout le contenu audio/vidéo et de participer à toutes les activités présentées sur la page sans aucune perte d’information?

Ressources supplémentaires

Détails de la page

Date de modification :: 2024-09-24

Sélection de la langue

Recherche