Référence d’accessibilité

Cette page est une référence complète des fonctionnalités d’accessibilité dans Chrome DevTools.It est destiné aux développeurs web qui:

• Avoir une compréhension de base des DevTools, comme comment l’ouvrir.
• Connaissent les principes d’accessibilité et les meilleures pratiques.

Le but de cette référence est de vous aider à découvrir tous les outils disponibles dans DevTools qui peuvent vous aider à examiner l’accessibilité d’une page.

Voir Naviguer dans les outils d’assistance de Chrome avec une technologie d’Assistancesi vous cherchez de l’aide pour naviguer dans les outils d’assistance avec une technologie d’assistance telle qu’un lecteur d’écran.

Aperçu des fonctionnalités d’accessibilité dans Chrome DevTools

Cette section explique comment DevTools s’intègre dans votre boîte à outils d’accessibilité globale.

Pour déterminer si une page est accessible, vous devez avoir 2 questions générales à l’esprit:

1. Puis-je naviguer dans la page avec un clavier ou un lecteur d’écran?
2. Les éléments de la page sont-ils correctement marqués pour les lecteurs d’écran?

En général, DevTools peut 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 DevToolscan ne vous aide pas là-bas. La seule façon de trouver des erreurs liées à la question #1 est d’essayer d’utiliser vous-même une pageavec un clavier ou un lecteur d’écran. Voyez Comment Faire Un Examen De L’Accessibilitépour en savoir plus.

Vérifier l’accessibilité d’une page

En général, utilisez le panneau Audits pour déterminer si:

• Une page est correctement marquée pour les lecteurs d’écran.
• Les éléments de texte d’une page ont des rapports de contraste suffisants. Voir aussi Afficher le rapport de contraste d’un élément de texte dans le Sélecteur de couleurs.

Pour auditer une page:

1. Accédez à l’URL que vous souhaitez auditer.

2. Dans DevTools, cliquez sur l’onglet Audits. DevTools vous montre différentes options de configuration.

   

3. Pour Appareil, sélectionnez Mobile si vous souhaitez simuler un appareil mobile. Cette option modifie différemment 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 de bureau, cette option pourrait avoir un effet significatif sur les résultats de votre audit.

4. Dans la section Audits, assurez-vous que l’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 moyens d’améliorer la qualité de votre page.

5. La section d’étranglement vous permet d’étrangler le réseau et le processeur, ce qui est utile lors de l’analyse des performances de charge. Cette option ne devrait pas être pertinente pour votre score d’accessibilité, vous pouvez donc l’utiliser comme vous le souhaitez.

6. La case à cocher Effacer le stockage vous permet d’effacer tout le stockage avant de charger la page ou de conserver le stockage entre les chargements de page. Cette option est également probablement sans rapport avec votre score d’accessibilité, vous pouvez donc utiliser ce que vous préférez.

7. Cliquez sur Exécuter les audits. Après 10 à 30 secondes, DevTools fournit un rapport.Votre rapport vous donne divers conseils pour améliorer l’accessibilité de la page.

   

8. Cliquez sur un audit pour en savoir plus à ce sujet.

   

9. Cliquez sur En savoir plus pour afficher la documentation de cet audit.

   

Voir aussi: Extension aXe

Vous pouvez préférer utiliser l’extension aXe plutôt que le panneau Audits.Ils fournissent généralement les mêmes informations, car aXe est le moteur sous-jacent qui alimente le panel d’AUDIT. L’extension aXe a une interface utilisateur différente et décrit les audits légèrement différemment.Un avantage 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.

Le volet Accessibilité

Le volet Accessibilité est l’endroit où vous pouvez 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é:

1. Cliquez sur l’onglet Éléments.
2. Dans l’arborescence DOM, sélectionnez l’élément que vous souhaitez inspecter.
3. Cliquez sur l’onglet Accessibilité. Cet onglet peut être caché derrière 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.

Inspectez la position d’un élément dans l’arborescence d’accessibilité à partir du volet Accessibilité.

Afficher les attributs ARIA d’un élément

Les attributs ARIA garantissent que les lecteurs d’écran disposent de toutes les informations dont ils ont besoin pour représenter correctement le contenu d’une page.

Affiche les attributs ARIA d’un élément dans le volet Accessibilité.

Afficher les propriétés d’accessibilité calculées d’un élément

Certaines propriétés d’accessibilité sont calculées dynamiquement par le navigateur. Ces propriétés peuvent être visualisé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é.

Affiche le rapport de contraste d’un élément de texte dans le Sélecteur de couleurs

Certaines personnes malvoyantes ne voient pas les zones très claires ou très sombres. Tout tend àapparaître à peu près la même luminosité, ce qui rend difficile la distinction des contours et des bords.Le rapport de contraste mesure la différence de luminosité entre le premier plan et l’arrière-plan du texte. Si votre texte a un faible rapport de contraste, ces utilisateurs malvoyants peuvent littéralement expérimenter votre site comme un écran vide.

Le sélecteur de couleurs peut vous aider à vous assurer que votre texte respecte les niveaux de rapport de contraste recommandés:

1. Cliquez sur l’onglet Éléments.

2. Dans l’arborescence DOM, sélectionnez l’élément de texte que vous souhaitez inspecter.

   

3. Dans le volet Styles, cliquez sur le carré de couleur à côté de la valeur color de l’élément.

   

4. Vérifiez la section du rapport de contraste du Sélecteur de couleurs. Une coche signifie quel’élément répond à la recommandation minimale.Deux coches signifient qu’il répond à la recommandation améliorée.

   

5. Cliquez sur la section Rapport de contraste pour voir plus d’informations. Une ligne apparaît dans le visualpicker en haut du Sélecteur de couleurs. Si la couleur actuelle répond aux recommandations, alorstout ce qui se trouve du même côté de la ligne répond également aux recommandations. Si la couleur actuelle ne répond pas aux recommandations, alors tout ce qui se trouve du même côté ne répond pas non plus aux recommandations.

   

Commentaires