Cette page présente de manière exhaustive les fonctionnalités d'accessibilité disponibles dans les outils pour les développeurs Chrome. Il est destiné aux développeurs Web qui:
- Connaître les bases des outils de développement, par exemple pour savoir comment les ouvrir
- Connaître les principes et bonnes pratiques d'accessibilité
L'objectif de cette documentation 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.
Consultez Utiliser les outils pour les développeurs Chrome avec la technologie d'assistance si vous avez besoin d'aide pour utiliser les outils de développement avec une technologie d'assistance telle qu'un lecteur d'écran.
Si vous souhaitez apprendre à développer des sites Web accessibles, consultez Découvrir l'accessibilité.
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 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 naviguer sur 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 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 à ce sujet. Le seul moyen de trouver les erreurs liées à la question 1 est d'essayer d'utiliser vous-même une page avec un clavier ou un lecteur d'écran. Pour en savoir plus, consultez l'article Effectuer un examen de l'accessibilité.
Auditer l'accessibilité d'une page
En règle générale, 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 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 Appareil, sélectionnez Mobile si vous souhaitez simuler un appareil mobile. Cette option modifie différemment votre chaîne user-agent 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 l'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ées si vous souhaitez découvrir d'autres moyens 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 en rapport avec votre score d'accessibilité. Vous pouvez donc utiliser celle que vous préférez.
La case à cocher Effacer 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 pertinente non plus pour votre score d'accessibilité. Vous pouvez donc utiliser celle que vous préférez.
Cliquez sur Générer le rapport. Au bout de 10 à 30 secondes, les outils de développement fournissent un rapport. Votre rapport vous donne plusieurs 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 de cet audit.
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 a une interface utilisateur différente et décrit les audits de manière légèrement différente.
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é", procédez comme suit:
- 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 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. Il ne contient que des éléments de l'arborescence DOM pertinents et utiles pour afficher le contenu de la page dans un lecteur d'écran.
Examinez la position d'un élément dans l'arborescence d'accessibilité à partir du volet Accessibilité.
Cette vue ne vous permet d'explorer qu'un seul nœud et ses ancêtres. Pour explorer l'arborescence de l'accessibilité dans son ensemble, suivez les étapes ci-dessous.
(Preview) Explorer l'arborescence d'accessibilité en pleine page
L'affichage pleine page de l'arborescence d'accessibilité vous permet d'explorer l'arborescence entière et de mieux comprendre comment votre contenu Web est exposé aux technologies d'assistance.
Pour explorer l'arborescence d'accessibilité:
- Cochez
Activer l'arborescence d'accessibilité pleine page. Dans la barre d'action située en haut de la page, cliquez sur Actualiser les outils de développement.
En haut à droite du panneau Éléments, activez le bouton
Passer à l'arborescence d'accessibilité.
Parcourir 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 des éléments à l'écran au niveau des sources
Les éléments de la page ne s'affichent pas toujours dans l'ordre dans lequel ils sont dans la source. Cela pourrait troubler les utilisateurs qui dépendent d'une technologie d'assistance pour naviguer sur le Web.
Pour afficher et déboguer l'ordre des sources sur votre site Web:
- Inspecter un élément sur la page
- Dans Éléments > Accessibilité > Lecteur de l'ordre des sources, cochez la case
Afficher l'ordre des sources.
Dans la fenêtre d'affichage, les outils de développement délimitent les éléments imbriqués à l'aide de bordures et les marquent à l'aide de 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 peuvent être consultées dans la section Propriétés calculées du volet Accessibilité.
Affichez les propriétés d'accessibilité calculées d'un élément dans le volet Accessibilité.
Identifier et corriger 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 vous aider à les résoudre. Pour en savoir plus, consultez Améliorer la lisibilité de votre site Web.