Cette page est une référence complète des fonctionnalités d'accessibilité dans les outils pour les développeurs Chrome. Il s'adresse aux développeurs Web qui :
- Vous devez posséder des connaissances de base sur les outils de développement, par exemple savoir comment les ouvrir.
- connaissent les principes et les bonnes pratiques d'accessibilité.
L'objectif de cette référence est de vous aider à découvrir tous les outils disponibles dans les outils de développement qui peuvent vous aider à examiner l'accessibilité d'une page.
Consultez Naviguer dans les outils pour les développeurs Chrome avec une technologie d'assistance si vous avez besoin d'aide pour naviguer dans les outils pour les développeurs avec une technologie d'assistance comme un lecteur d'écran.
Consultez Learn Accessibility si vous souhaitez apprendre à développer des sites Web accessibles.
Présentation des fonctionnalités d'accessibilité dans Chrome DevTools
Cette section explique comment les outils de développement s'intègrent à votre boîte à outils d'accessibilité globale.
Pour déterminer si une page est accessible, vous devez vous poser deux questions générales :
- Puis-je parcourir la page à l'aide d'un clavier ou d'un lecteur d'écran ?
- Les éléments de la page sont-ils correctement balisés pour les lecteurs d'écran ?
En général, les outils de développement peuvent vous aider à corriger les erreurs liées à la question 2, car elles sont faciles à détecter de manière automatisée. La question 1 est tout aussi importante, mais malheureusement, les outils de développement ne peuvent pas vous aider à y répondre. La seule façon de trouver les erreurs liées à la question 1 est d'essayer vous-même d'utiliser une page avec un clavier ou un lecteur d'écran. Pour en savoir plus, consultez Comment effectuer un examen d'accessibilité.
Auditer l'accessibilité d'une page
En général, utilisez les vérifications d'accessibilité du panneau Lighthouse pour déterminer si :
- Une page est correctement balisée pour les lecteurs d'écran.
- Les éléments de texte d'une page présentent des rapports de contraste suffisants. Consultez également Rendre votre site Web plus lisible.
Pour auditer une page :
- Accédez à l'URL que vous souhaitez auditer.
Dans les outils de développement, cliquez sur le panneau Lighthouse. Les outils de développement affichent différentes options de configuration.
Pour Appareil, sélectionnez Mobile si vous souhaitez simuler un appareil mobile. Cette option modifie votre chaîne d'agent utilisateur et redimensionne la fenêtre d'affichage. Si la version mobile de la page s'affiche différemment de la version classique, cette option peut avoir un impact significatif sur les résultats de votre audit.
Dans la section Lighthouse, assurez-vous que l'option Accessibilité est activée. Désactivez les autres catégories si vous souhaitez les exclure de votre rapport. Laissez-les activés si vous souhaitez découvrir d'autres façons d'améliorer la qualité de votre page.
La section Limitation du débit vous permet de limiter le réseau et le processeur, ce qui est utile pour analyser les performances de chargement. Cette option ne devrait pas avoir d'incidence sur votre score d'accessibilité. Vous pouvez donc utiliser celle de votre choix.
La case à cocher Vider l'espace de stockage vous permet de vider tout l'espace de stockage avant de charger la page ou de le conserver entre les chargements de page. Cette option n'a probablement pas d'incidence sur votre score d'accessibilité. Vous pouvez donc choisir celle que vous préférez.
Cliquez sur Générer un rapport. Au bout de 10 à 30 secondes, les outils de développement fournissent un rapport. Votre rapport vous donne divers conseils pour améliorer l'accessibilité de la page.
Cliquez sur un audit pour en savoir plus.
Cliquez sur En savoir plus pour consulter la documentation de cet audit.
Voir aussi : extension aXe
Vous préférerez peut-être utiliser l'extension aXe ou l'extension Lighthouse plutôt que le panneau Lighthouse disponible par défaut dans Chrome. Ils fournissent généralement les mêmes informations, car aXe est le moteur sous-jacent qui alimente le panneau Lighthouse. L'extension aXe possède une interface utilisateur différente et décrit les audits de manière légèrement différente.
L'extension aXe présente un avantage par rapport au panneau Audits : elle vous permet d'inspecter et de mettre en évidence les nœuds en échec.
Tester le réagencement du contenu avec la barre d'outils de l'appareil
Le critère de réorganisation des consignes d'accessibilité du contenu Web (WCAG) recommande que le contenu Web reste visible sans perte d'informations, même lorsque la fenêtre d'affichage est redimensionnée ou que son orientation change. En alignant le contenu sur une seule colonne, vous aidez les utilisateurs qui utilisent du texte agrandi. Pour tester la façon dont votre contenu se réorganise, redimensionnez la fenêtre d'affichage de manière dynamique à l'aide de la barre d'outils Appareil dans le panneau Lighthouse.
Pour redimensionner la fenêtre d'affichage, faites glisser les poignées jusqu'à obtenir les dimensions souhaitées. Pour connaître les dimensions spécifiques à tester, consultez le critère de réussite WCAG sur le réagencement.
Onglet "Accessibilité"
L'onglet Accessibilité vous permet d'afficher l'arborescence de l'accessibilité, les attributs ARIA et les propriétés d'accessibilité calculées des nœuds DOM.
Pour ouvrir l'onglet Accessibilité :
- Cliquez sur le panneau Éléments.
- Dans l'arborescence DOM, sélectionnez l'élément que vous souhaitez inspecter.
- Cliquez sur l'onglet Accessibilité. Cet onglet peut être masqué derrière le bouton Plus d'onglets keyboard_double_arrow_right .
Vous pouvez faire glisser l'onglet Accessibilité vers l'avant pour y accéder plus rapidement à l'avenir.
Afficher la position d'un élément dans l'arborescence d'accessibilité
L'arborescence d'accessibilité est un sous-ensemble de l'arborescence DOM. Il ne contient que les éléments de l'arborescence DOM qui sont pertinents et utiles pour afficher le contenu de la page dans un lecteur d'écran.
Pour inspecter la position d'un élément dans l'arborescence d'accessibilité à partir de l'onglet "Accessibilité", activez l'option Afficher l'arborescence d'accessibilité.
Ce bouton remplace l'arborescence DOM dans le panneau Éléments par une arborescence d'accessibilité en pleine page. Cet arbre vous aide à mieux comprendre comment votre contenu Web est exposé aux technologies d'assistance.
Pour parcourir l'arborescence d'accessibilité, vous pouvez développer et sélectionner des nœuds pour afficher leurs détails sous Propriétés calculées.
Vous pouvez revenir à l'arborescence DOM à tout moment. Le nœud DOM correspondant reste sélectionné. C'est un excellent moyen de comprendre le mappage entre le nœud DOM et le nœud de l'arborescence d'accessibilité.
Afficher les attributs ARIA d'un élément
Les attributs ARIA permettent aux lecteurs d'écran de disposer de toutes les informations dont ils ont besoin pour représenter correctement le contenu d'une page.
Affichez les attributs ARIA d'un élément dans l'onglet "Accessibilité".
Afficher l'ordre source des éléments à l'écran
Les éléments de la page n'apparaissent pas toujours dans l'ordre dans lequel ils figurent dans la source. Cela peut dérouter les utilisateurs qui dépendent des technologies d'assistance pour naviguer sur le Web.
Pour afficher et déboguer l'ordre source sur votre site Web :
- Inspectez un élément sur la page.
- Dans Éléments > Accessibilité > Lecteur d'ordre source, cochez check_box Afficher l'ordre source.
Dans la fenêtre d'affichage, les outils de développement entourent les éléments imbriqués de bordures et les marquent avec des chiffres correspondant à leur ordre source.
Afficher les propriétés d'accessibilité calculées d'un élément
Certaines propriétés d'accessibilité sont calculées de manière dynamique par le navigateur. Ces propriétés sont visibles dans la section Propriétés calculées de l'onglet Accessibilité.
Affichez les propriétés d'accessibilité calculées d'un élément dans l'onglet "Accessibilité".
Onglet "Rendu"
Utilisez l'onglet Rendu pour émuler certaines caractéristiques média CSS sans les spécifier manuellement dans votre code ni dans votre environnement de test. Ces fonctionnalités multimédias modifient l'apparence de votre page Web en fonction des préférences de l'appareil de l'utilisateur. Pour tester l'accessibilité visuelle de votre page, ouvrez l'onglet Rendu et explorez les options suivantes :
- Émulez les déficiences visuelles pour afficher votre page avec plusieurs déficiences visuelles simulées.
- Émulez la fonctionnalité média CSS
prefers-color-schemepour voir à quoi ressemble votre page avec le mode sombre ou clair activé. Beaucoup considèrent le mode sombre comme un choix esthétique, mais l'article Le mode sombre comme outil d'accessibilité explique son utilité. - Émuler le type de média CSS pour afficher votre page dans un style de média d'impression ou d'écran.
- Émulez la fonctionnalité média CSS
forced-colorspour voir à quoi ressemble votre page si l'agent utilisateur a activé un mode de couleurs forcées. - Émulez la caractéristique média CSS
prefers-contrastpour afficher votre contenu Web avec une valeur de contraste plus élevée, plus faible ou spécifique. - Émulez la caractéristique média CSS
prefers-reduced-motionpour afficher votre contenu Web avec des mouvements réduits. Certains utilisateurs sont distraits ou ressentent des nausées à cause du contenu animé. Utilisez cette option pour voir à quoi ressemble votre page sans animations ni défilement fluide, par exemple. - Émulez la fonctionnalité média CSS
prefers-reduced-transparencypour voir comment votre contenu Web s'affiche si l'utilisateur demande à réduire les effets de calque transparent ou translucide utilisés sur l'appareil.
Identifier et résoudre les problèmes de texte à faible contraste
Les outils de développement peuvent détecter automatiquement les problèmes de faible contraste et vous suggérer de meilleures couleurs pour les résoudre. Pour en savoir plus, consultez Rendre votre site Web plus lisible.