Fonctionnalités de test d’accessibilité

  • Article

Cet article répertorie les aspects d’accessibilité classiques à tester pour les pages web et les fonctionnalités correspondantes dans Microsoft DevTools.

Texte de remplacement pour les images

Aspect accessibilité des case activée Fonctionnalité de DevTools Article
Vérifier que les images ont un texte de remplacement SectionAccessibilité de l’outil> Problèmes du rapport Vérifier que les images ont un texte de remplacement dans Tester automatiquement une page web pour détecter les problèmes d’accessibilité
Vérifier que les images ont un texte de remplacement >Outil Lighthouse Problèmes liés au texte de remplacement Tester l’accessibilité à l’aide de Lighthouse

Prise en charge du clavier

Aspect accessibilité des case activée Fonctionnalité de DevTools Article
Vérifier la prise en charge du clavier Section Inspecterl’outil> Accessibilité de la superposition Utilisez l’outil Inspecter pour détecter les problèmes d’accessibilité en pointant sur la page web et Analyser les pages HTML à l’aide de l’outil Inspecter
Vérifier la prise en charge du clavier Touches Tab, Maj+Tab et Entrée Rechercher la prise en charge du clavier à l’aide des touches Tab et Entrée
Vérifier la prise en charge du clavier : vérifiez que le focus est indiqué Outil Inspecter, onglet Styles et outil Sources Analyser l’absence d’indication du focus clavier
Vérifier la prise en charge du clavier : vérifiez que les boutons de formulaire peuvent être utilisés avec le clavier Inspecter l’outil, l’arborescence DOM dans l’outil Éléments et l’onglet Écouteurs d’événements Analyser l’absence de prise en charge du clavier dans un formulaire
Vérifier la prise en charge du clavier : vérifier l’ordre des touches tabulation OngletAccessibilité de l’outil>> Éléments Visionneuse de l’ordre des sources Tester la prise en charge du clavier à l’aide de la visionneuse de la commande source
Vérifier la prise en charge du clavier Problèmes liés à la prise en charge du clavier de l’outil > Lighthouse Tester l’accessibilité à l’aide de Lighthouse

Contraste de texte

Aspect accessibilité des case activée Fonctionnalité de DevTools Article
Vérifiez que le contraste du texte est suffisant (automatiquement, pour la page entière) SectionAccessibilité de l’outil> Problèmes du rapport Vérifier que les couleurs du texte présentent un contraste suffisant dans Tester automatiquement une page web pour détecter les problèmes d’accessibilité
Vérifier que le contraste du texte est suffisant OngletStyles> de l’outil > Éléments Sélecteur de couleurs Tester le contraste des couleurs du texte à l’aide du sélecteur de couleurs
Vérifier que le contraste du texte est suffisant Section Inspecterl’outil> Accessibilité de la ligne contraste de superposition > Utilisez l’outil Inspecter pour détecter les problèmes d’accessibilité en pointant sur la page web et Analyser les pages HTML à l’aide de l’outil Inspecter
Vérifiez que le contraste du texte est suffisant : dans l’état de pointage OngletStyles> de l’outil > Éléments : activer/désactiver l’état de l’élément (affiche les cases à cocher Forcer l’état de l’élément) Vérifier l’accessibilité de tous les états des éléments
Vérifiez que le texte présente un contraste suffisant : avec le thème sombre (mode sombre) et le thème clair >Outil de renduÉmuler la fonctionnalité multimédia CSS prefers-color-scheme Rechercher les problèmes de contraste avec le thème sombre et le thème clair
Vérifiez que le contraste du texte est suffisant (automatiquement, pour la page entière) Problèmes liés au contraste de texte de l’outil > Lighthouse Tester l’accessibilité à l’aide de Lighthouse

Prise en charge du lecteur d’écran

Aspect accessibilité des case activée Fonctionnalité de DevTools Article
Vérifier la prise en charge du lecteur d’écran : vérifiez que les champs d’entrée ont des étiquettes SectionAccessibilité de l’outil> Problèmes du rapport Vérifiez que les champs d’entrée ont des étiquettes dans Tester automatiquement une page web pour détecter les problèmes d’accessibilité
Vérifier la prise en charge des lecteurs d’écran Section Inspecterl’outil> Accessibilité du nom et du rôle de superposition > Utilisez l’outil Inspecter pour détecter les problèmes d’accessibilité en pointant sur la page web et Analyser les pages HTML à l’aide de l’outil Inspecter
Vérifier la prise en charge des lecteurs d’écran OngletAccessibilité de l’outil>> Éléments Arborescence d’accessibilité Vérifiez l’arborescence d’accessibilité pour la prise en charge du clavier et du lecteurd’écran, et Testez l’accessibilité à l’aide de l’onglet Accessibilité
Vérifier la prise en charge des lecteurs d’écran >Outil Lighthouse Problèmes liés à la prise en charge du lecteur d’écran Tester l’accessibilité à l’aide de Lighthouse

Déficiences visuelles

Aspect accessibilité des case activée Fonctionnalité de DevTools Article
Vérifier que la page web est utilisable par les personnes atteintes de daltonisme >Outil de renduListe déroulante des lacunes de la vision émuler Vérifier qu’une page est utilisable par les personnes atteintes de daltonisme
Vérifier que la page web est utilisable avec une vision floue >Outil de renduListe déroulante des lacunes de la vision émuler Vérifier qu’une page est utilisable avec une vision floue
Vérifiez que la page web est utilisable avec l’animation de l’interface utilisateur désactivée (mouvement réduit) Outil >de renduÉmuler la fonctionnalité multimédia CSS prefers-reduced-motion Vérifier qu’une page est utilisable avec l’animation de l’interface utilisateur désactivée
Vérifier que la page web est utilisable par les personnes présentant des déficiences visuelles Outil> Lighthouse Problèmes liés aux déficiences visuelles Tester l’accessibilité à l’aide de Lighthouse

Utilisable en cas d’étroite

Aspect accessibilité des case activée Fonctionnalité de DevTools Article
Vérifiez que la disposition de la page web est utilisable lorsqu’elle est étroite Outil Émulation d’appareil Vérifiez que la disposition de la page web est utilisable lorsqu’elle est étroite, et Émuler des appareils mobiles (émulation d’appareil)

Voir aussi