Cette page constitue une référence complète des fonctionnalités d'accessibilité des outils pour les développeurs Chrome. Elle est destinée aux développeurs Web qui:
- posséder des connaissances de base sur les outils de développement, par exemple comment les ouvrir ;
- connaître les principes et bonnes pratiques d'accessibilité ;
Le but de ce document de 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.
Si vous avez besoin d'aide pour naviguer dans les outils de développement avec une technologie d'assistance telle qu'un lecteur d'écran, consultez Naviguer dans les outils pour les développeurs Chrome avec une technologie d'assistance.
Consultez la page Découvrir l'accessibilité si vous souhaitez découvrir comment développer des sites Web accessibles.
Présentation des fonctionnalités d'accessibilité dans les outils pour les développeurs Chrome
Cette section explique comment les outils de développement s'intègrent à votre kit d'accessibilité global.
Pour déterminer si une page est accessible, vous devez avoir deux questions générales à l'esprit:
- Puis-je naviguer dans la page avec un clavier ou 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 ces erreurs 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. Le seul moyen d'identifier les erreurs liées à la question 1 est d'utiliser vous-même une page avec un clavier ou un lecteur d'écran. Pour en savoir plus, consultez la page Effectuer un examen de l'accessibilité.
Auditer l'accessibilité d'une page
En règle générale, utilisez les contrôles d'accessibilité du panneau Lighthouse pour déterminer si:
- Une page est correctement balisée pour les lecteurs d'écran.
- Les éléments textuels d'une page ont des rapports de contraste suffisants. Consultez également l'article Améliorer la lisibilité de votre site Web.
Pour auditer une page:
- Accédez à l'URL que vous souhaitez auditer.
Dans les outils de développement, cliquez sur l'onglet Lighthouse. Les outils de développement présentent différentes options de configuration.
Dans le champ Appareil, sélectionnez Mobile si vous souhaitez simuler un appareil mobile. Cette option modifie votre chaîne user-agent différemment 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 vous permet de limiter le réseau et le processeur, ce qui est utile lors de l'analyse des performances de charge. Cette option ne doit pas être sans rapport avec votre score d'accessibilité. Vous pouvez donc utiliser celle que vous préférez.
La case à cocher Vider l'espace de stockage vous permet d'effacer tout l'espace de stockage avant de charger la page ou de conserver l'espace de stockage entre les chargements de page. Cette option n'est probablement pas non plus pertinente pour votre score d'accessibilité. Vous pouvez donc utiliser ce que vous préférez.
Cliquez sur Générer le rapport. Après 10 à 30 secondes, les outils de développement fournissent un rapport. Votre rapport vous donne divers conseils sur la façon d'améliorer l'accessibilité de la page.
Cliquez sur un audit pour en savoir plus à son sujet.
Cliquez sur En savoir plus pour consulter la documentation correspondante.
Voir aussi: extension aXe
Vous pouvez 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 UI différente et décrit les audits légèrement différemment.
L'un des avantages de l'extension aXe par rapport au panneau "Audits" est qu'elle vous permet d'inspecter et de mettre en évidence les nœuds défaillants.
Volet Accessibilité
Le volet "Accessibilité" vous permet d'afficher l'arborescence d'accessibilité, les attributs ARIA et les propriétés d'accessibilité calculées des nœuds DOM.
Pour ouvrir le volet "Accessibilité" :
- Cliquez sur l'onglet É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é par le bouton More Tabs (Plus d'onglets)
.
Afficher la position d'un élément dans l'arborescence d'accessibilité
L'arborescence d'accessibilité est un sous-ensemble de l'arborescence DOM. Elle ne contient que les éléments de l'arborescence DOM pertinents et utiles pour afficher le contenu de la page dans un lecteur d'écran.
Inspectez la position d'un élément dans l'arborescence d'accessibilité à partir du volet d'accessibilité.
Cette vue vous permet d'explorer un seul nœud et ses ancêtres. Pour explorer l'arborescence d'accessibilité dans son ensemble, procédez comme suit :
(Aperçu) Explorer l'arborescence d'accessibilité en pleine page
L'affichage pleine page de l'arborescence d'accessibilité vous permet de l'explorer dans son intégralité et vous aide à mieux comprendre comment votre contenu Web est exposé aux technologies d'assistance.
Pour explorer l'arborescence d'accessibilité:
- Cochez la case
Activer l'arborescence d'accessibilité pleine page. Dans la barre d'action située en haut, cliquez sur Actualiser les outils de développement.
Dans le coin supérieur droit du panneau Éléments, activez le bouton
Passer à l'arborescence d'accessibilité.
Parcourez l'arborescence d'accessibilité. Vous pouvez développer les nœuds ou cliquer pour afficher les détails sous Propriétés calculées.
Sélectionnez un nœud, puis cliquez sur le bouton
Passer à l'arborescence DOM pour revenir à l'arborescence DOM.Le nœud DOM correspondant est maintenant sélectionné. C'est un excellent moyen de comprendre le mappage entre le nœud DOM et son nœud d'arborescence d'accessibilité.
Afficher les attributs ARIA d'un élément
Les attributs ARIA garantissent que les lecteurs d'écran disposent de toutes les informations nécessaires pour représenter correctement le contenu d'une page.
Affichez les attributs ARIA d'un élément dans le volet "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 sont dans la source. Cela pourrait perturber les utilisateurs qui dépendent de 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 des sources, cochez la case
Afficher l'ordre des sources.
Dans la fenêtre d'affichage, les outils de développement indiquent les éléments imbriqués avec des bordures et les marquent avec des numéros correspondant à leur ordre de source.
Afficher les propriétés d'accessibilité calculées pour un élément
Certaines propriétés d'accessibilité sont calculées de façon dynamique par le navigateur. Ces propriétés peuvent être affichées dans la section Propriétés calculées du volet Accessibilité.
Affichez les propriétés d'accessibilité calculées pour un élément dans le volet "Accessibilité".
Découvrez et corrigez le 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 vous aider à les résoudre. Pour en savoir plus, consultez Améliorer la lisibilité de votre site Web.