Naviguer dans les outils pour les développeurs Chrome à l'aide d'une technologie d'assistance

Rob Dodson

Ce guide vise à aider les utilisateurs qui dépendent principalement des technologies d'assistance, telles que les lecteurs d'écran, à accéder aux outils pour les développeurs Chrome et à les utiliser. Les outils pour les développeurs Chrome sont une suite d'outils pour les développeurs Web intégrés au navigateur Google Chrome. Consultez la référence sur l'accessibilité si vous recherchez des fonctionnalités des Outils de développement permettant d'améliorer l'accessibilité d'une page Web.

L'accessibilité des outils de développement est en cours d'amélioration. Certains panneaux et onglets fonctionnent mieux avec les technologies d'assistance que d'autres. Ce guide vous présente les panneaux les plus accessibles et met en évidence les problèmes spécifiques que vous pouvez rencontrer.

Présentation

Les outils pour les développeurs sont divisés en une série de panneaux organisés dans une ARIA tablist. Exemple :

  • Le panneau Elements (Éléments) vous permet d'afficher et de modifier les nœuds DOM ou le code CSS.
  • Le panneau Console vous permet de lire les journaux JavaScript et de modifier des objets en direct.

Dans la zone de contenu de chaque panneau, vous trouverez différents outils, souvent appelés onglets ou volets dans la documentation. Par exemple, le panneau Elements (Éléments) contient des onglets supplémentaires pour inspecter les écouteurs d'événements, l'arborescence d'accessibilité et bien plus encore. La distinction entre les onglets et les volets est quelque peu arbitraire. La seule raison pour laquelle vous verrez l'un ou l'autre terme est de maintenir la cohérence avec le reste de la documentation officielle des Outils de développement.

Raccourcis clavier

La référence sur les raccourcis clavier des outils de développement est une aide-mémoire utile. Veillez à l'ajouter à vos favoris et à vous y référer lorsque vous explorerez les différents panneaux.

Ouvrir les outils de développement

Pour commencer, consultez Ouvrir les outils pour les développeurs Chrome. Vous pouvez ouvrir les Outils de développement de différentes manières, à l'aide de raccourcis clavier ou d'éléments de menu.

Naviguer entre les panneaux

Vous pouvez naviguer entre les panneaux à l'aide du clavier, du menu Command (Commande) ou d'une souris ou d'un pavé tactile.

Naviguer à l'aide du clavier

  • Lorsque les outils de développement sont ouverts, appuyez sur Control+] ou Command+] (MAC) pour sélectionner le panneau suivant.
  • Appuyez sur Control+[ ou Command+[ (Mac) pour sélectionner le panneau précédent.
  • Vous pouvez également utiliser Shift+Tab pour sélectionner la d’un panneau et utiliser les touches fléchées pour changer de panneau. Toutefois, il peut être plus rapide d’utiliser les raccourcis mentionnés précédemment.tablist

Problèmes connus

  • Certains panneaux, tels que les panneaux Console et Performance, peuvent sélectionner leur zone de contenu dès qu'ils sont activés. Cela peut rendre la navigation à l'aide des touches fléchées difficile.
  • Le nom du panneau sélectionné est annoncé, mais seulement après qu'un lecteur d'écran a lu le contenu sélectionné dans le panneau. Il est donc très facile de le manquer.

Naviguer à l'aide du menu Command (Commande)

Pour sélectionner un panneau spécifique, utilisez le menu Command (Commande) :

  1. Lorsque les outils de développement sont ouverts, appuyez sur Control+Maj+P ou Command+Maj+P (Mac) pour ouvrir le menu Command (Commande). Le menu Command (Commande) est une zone de liste déroulante de saisie semi-automatique de recherche approximative.
  2. Saisissez le nom du panneau que vous souhaitez ouvrir, puis utilisez la touche Down Arrow (Flèche vers le bas) pour accéder à l'option appropriée.
  3. Appuyez sur Enter pour exécuter une commande.

Par exemple, pour ouvrir le panneau Elements (Éléments) :

  1. Ouvrez le menu Command (Commande).
  2. Saisissez E, puis L. L'option Panel > Show Elements (Panneau > Afficher les éléments) est sélectionnée.
  3. Appuyez sur Enter pour exécuter la commande qui ouvre le panneau.

L'ouverture d'un panneau de cette manière sélectionne le contenu du panneau lui-même. Dans le cas du panneau Elements (Éléments), la sélection passe à l'arborescence DOM.

Panneau "Elements"

Inspecter un élément sur la page

  1. Accédez à l'élément que vous souhaitez inspecter à l'aide du curseur du lecteur d'écran.
  2. Simulez un clic droit sur l'élément pour ouvrir le menu contextuel.
  3. Choisissez l'option Inspect (Inspecter). Le panneau Elements s'ouvre et sélectionne l'élément dans l'arborescence DOM.

L'arborescence DOM est présentée sous forme d'ARIA tree. Consultez un exemple dans Naviguer dans l'arborescence DOM à l'aide d'un clavier.

Copier le code d'un élément dans l'arborescence DOM

  1. Lorsque vous sélectionnez un nœud dans l'arborescence DOM, affichez le menu contextuel (clic droit).
  2. Développez l'option Copy (Copier).
  3. Sélectionnez Copy outerHTML (Copier outerHTML).

Problèmes connus

  • Copy outerHTML (Copier outerHTML) sélectionne souvent le nœud parent au lieu du nœud souhaité. Toutefois, le contenu de l'élément doit toujours être copié dans outerHTML.

Modifier les attributs d'un élément dans l'arborescence DOM

  • Lorsque vous sélectionnez un nœud dans l'arborescence DOM, appuyez sur Enter pour le rendre modifiable.
  • Appuyez sur Tab pour passer d'une valeur d'attribut à l'autre. Lorsque vous entendez "space" (espace), vous vous trouvez dans un champ de saisie de texte vide et vous pouvez saisir une nouvelle valeur d'attribut.
  • Appuyez sur Control+Enter ou Command+Enter (Mac) pour accepter la modification et entendre l'intégralité du contenu de l'élément.

Problèmes connus

  • Lorsque vous saisissez du texte dans le champ de saisie, vous ne recevez aucun commentaire. Si vous faites une faute de frappe et que vous utilisez les touches fléchées pour explorer votre saisie, vous ne recevez aucun commentaire. Le moyen le plus simple de vérifier votre travail consiste à accepter la modification, puis à écouter l'annonce de l'élément entier.

Modifier le code HTML d'un élément dans l'arborescence DOM

  • Lorsque vous sélectionnez un nœud dans l'arborescence DOM, appuyez sur Enter pour le rendre modifiable.
  • Appuyez sur Tab pour passer d'une valeur d'attribut à l'autre. Lorsque vous entendez le nom de l'élément, par exemple h2, vous vous trouvez dans un champ de saisie de texte et vous pouvez modifier le type de l'élément.
  • Appuyez sur Control+Enter ou Command+Enter (Mac) pour accepter la modification.

Par exemple, si vous saisissez h3 et appuyez sur Control+Enter ou Command+Enter (Mac), les balises de début et de fin de l'élément sont remplacées par h3.

Onglets du panneau "Elements"

Le panneau Elements (Éléments) contient des onglets supplémentaires pour inspecter des éléments tels que le code CSS appliqué à un élément ou son emplacement dans l'arborescence d'accessibilité.

  • Lorsque vous sélectionnez un nœud dans l'arborescence DOM, appuyez sur Tab jusqu'à ce que vous entendiez que le volet Styles est sélectionné.
  • Utilisez la Right Arrow (Flèche vers la droite) pour explorer les autres onglets disponibles.

L'arborescence DOM transforme les éléments avec des attributs href en liens sélectionnables. Vous devrez peut-être appuyer sur Tab plusieurs fois pour accéder au volet Styles.

Problèmes connus

Les onglets DOM Breakpoints (Points d'arrêt DOM) et Properties (Propriétés) ne sont pas accessibles à l'aide du clavier.

Volet "Styles"

Dans le volet Styles, vous trouverez des commandes permettant de filtrer les styles, d'activer/désactiver les états des éléments (tels que :active et :focus), d'activer/désactiver les classes, et d'ajouter de nouvelles classes. Vous disposez également d'un outil d'inspection de style puissant pour explorer et modifier les styles appliqués à l'élément sélectionné dans l'arborescence DOM.

Le concept clé à comprendre concernant le volet Styles est qu'il n'affiche que les styles du nœud actuellement sélectionné dans l'arborescence DOM. Supposons, par exemple, que vous ayez terminé d'inspecter les styles d'un nœud <header> et que vous souhaitiez maintenant examiner les styles d'un nœud <footer>. Pour ce faire, vous devez sélectionner le <footer> nœud dans l'arborescence DOM.

Il peut être plus rapide d'utiliser le workflow Inspect (Inspecter) pour inspecter un nœud situé à proximité du nœud footer (par exemple, un lien dans le pied de page), ce qui sélectionne l'arborescence DOM , puis d'utiliser votre clavier pour accéder au nœud exact qui vous intéresse.

Naviguer dans le volet "Styles"

Étant donné que tous les outils de style sont connectés d'une manière ou d'une autre au volet Styles, il est judicieux de devenir un expert de cet outil en premier.

  • Lorsque vous sélectionnez le volet Styles, appuyez sur Tab pour sélectionner son contenu et l'explorer.
  • Appuyez sur Tab jusqu'à ce que le premier style soit activé. Si vous utilisez un lecteur d'écran, ce premier style est annoncé comme "element.style {}".
  • Appuyez sur Down Arrow (Flèche vers le bas) pour parcourir la liste des styles par ordre de spécificité. Un lecteur d'écran annonce chaque style en commençant par le nom du fichier CSS, le numéro de ligne sur lequel le style apparaît et le nom du style lui-même. Par exemple : "main.css:233 .card__img {}"
  • Appuyez sur Enter pour inspecter un style plus en détail. La sélection commence par une version modifiable du nom du style.
  • Appuyez sur Tab pour passer d'une version modifiable de chaque propriété CSS à sa valeur correspondante. À la fin de chaque bloc de style se trouve un champ de texte modifiable vide que vous pouvez utiliser pour ajouter des propriétés CSS supplémentaires.
  • Vous pouvez continuer à appuyer sur Tab pour parcourir la liste des styles, ou appuyer sur Escape pour quitter ce mode et revenir à la navigation à l'aide des touches fléchées.

Consultez la référence sur le clavier du volet "Styles" pour obtenir d'autres raccourcis.

Problèmes connus
  • Si vous utilisez le champ de texte modifiable Filter (Filtrer), vous ne pouvez pas parcourir la liste des styles.

Activer/Désactiver l'état de l'élément

Pour activer/désactiver l'état d'un élément, tel que :active ou :focus :

  1. Accédez au volet Styles et appuyez sur Tab jusqu'à ce que le Toggle Element State (Activer/Désactiver l'état de l'élément) soit sélectionné.
  2. Appuyez sur Enter pour développer la collection d'états d'éléments. Les états des éléments sont présentés sous forme de groupe de cases à cocher.
  3. Appuyez sur Tab jusqu'à ce que le premier état, :active, soit sélectionné.
  4. Appuyez sur Space pour l'activer. Si l'élément actuellement sélectionné dans l'arborescence DOM possède un style :active, il est maintenant appliqué.
  5. Continuez à appuyer sur Tab pour explorer tous les états disponibles.

Ajouter une classe existante

À côté du bouton Toggle Element State (Activer/Désactiver l'état de l'élément) se trouve le bouton Element Classes (Classes d'éléments). Sélectionnez-le en appuyant sur Tab, puis sur Enter. La sélection passe à un champ de texte modifiable intitulé Add New Class (Ajouter une nouvelle classe).

Le bouton Element Classes (Classes d'éléments) est principalement utilisé pour ajouter des classes existantes à un élément. Par exemple, si votre feuille de style contient une classe d'assistance nommée .clearfix vous pouvez appuyer sur . dans le champ de texte modifiable pour afficher une liste de suggestions de classes et utiliser la Down Arrow (Flèche vers le bas) pour trouver la suggestion .clearfix. Vous pouvez également saisir vous-même le nom de la classe et appuyer sur Enter pour l'appliquer.

Ajouter une nouvelle règle de style

À côté du bouton Element Classes (Classes d'éléments) se trouve le bouton New Style Rule (Nouvelle règle de style). Sélectionnez-le en appuyant sur Tab, puis sur Enter. La sélection passe à un champ de texte modifiable dans l'inspecteur de style. Le contenu de texte initial du champ est le nom de balise de l'élément sélectionné dans l'arborescence DOM. Vous pouvez saisir n'importe quel nom de classe dans ce champ, puis appuyer sur Tab pour lui attribuer des propriétés CSS.

Onglet "Computed"

Lorsque vous sélectionnez l'onglet Computed, appuyez sur Tab pour sélectionner son contenu et l'explorer. Dans l'onglet Computed (Calculé), vous trouverez des commandes permettant d'explorer les propriétés CSS réellement appliquées à un élément par ordre de spécificité.

Explorer tous les styles calculés

Appuyez sur Tab jusqu'à ce que vous atteigniez la collection de styles calculés. Ils sont présentés sous forme d'tree ARIA. Le développement d'une liste déroulante révèle les sélecteurs CSS qui appliquent le style calculé. Ces sélecteurs sont organisés par spécificité.

Un lecteur d'écran annonce la valeur calculée, le sélecteur CSS correspondant, le nom de fichier de la feuille de style contenant le sélecteur et le numéro de ligne du sélecteur.

Problèmes connus

  • Si vous utilisez le champ de texte Filter (Filtrer), vous ne pourrez plus inspecter les styles.

Onglet "Event Listeners"

Dans le panneau Elements (Éléments), vous pouvez inspecter les écouteurs d'événements appliqués à un élément à l'aide de l'onglet Event Listeners (Écouteurs d'événements). Lorsque vous sélectionnez le volet Styles, appuyez sur la Right Arrow (Flèche vers la droite) pour accéder à l'onglet Event Listeners (Écouteurs d'événements).

Explorer les écouteurs d'événements

Les écouteurs d'événements sont présentés sous forme d'tree ARIA. Vous pouvez les parcourir à l'aide des touches fléchées. Un lecteur d'écran annonce le nom de l'objet DOM auquel l'écouteur d'événements est associé, ainsi que le nom de fichier dans lequel l'écouteur d'événements est défini et son numéro de ligne.

Volet "Accessibility"

Lorsque vous sélectionnez le volet Accessibility (Accessibilité), appuyez sur Tab pour sélectionner son contenu et l'explorer. Dans le volet Accessibility (Accessibilité), vous trouverez des commandes permettant d'explorer l'arborescence d'accessibilité, les attributs ARIA appliqués à un élément et ses propriétés d'accessibilité calculées.

Arborescence d'accessibilité

L'arborescence d'accessibilité est présentée sous forme d'ARIA tree, où chaque treeitem correspond à un élément du DOM. L'arborescence annonce le rôle calculé pour le nœud sélectionné. Les éléments génériques, tels que div et span, sont annoncés comme "GenericContainer" dans l'arborescence. Utilisez les touches fléchées pour parcourir l'arborescence et explorer les relations parent-enfant.

Problèmes connus

  • Le type d'arborescence ARIA utilisé par le volet Accessibility (Accessibilité) peut ne pas être disponible dans Chrome pour les lecteurs d'écran macOS, tels que VoiceOver. Abonnez-vous au problème Chromium n° 868480 pour être informé de l'avancement de ce problème.
  • Les sections ARIA Attributes (Attributs ARIA) et Computed Properties (Propriétés calculées) sont balisées en tant qu'arborescences ARIA, mais elles n'incluent pas la gestion de la sélection. Cela signifie que ces sections ne sont pas utilisables à l'aide du clavier.

Panneau "Audits"

Le panneau Audits vous permet d'exécuter une série de tests sur un site pour vérifier les problèmes courants liés aux performances, à l'accessibilité, au SEO et à un certain nombre d'autres catégories.

Configurer et exécuter un audit

  1. Lorsque le panneau Audits s'ouvre pour la première fois, la sélection est placée sur le bouton Run Audit (Exécuter l'audit) à la fin du formulaire. Par défaut, le formulaire est configuré pour exécuter des audits pour chaque catégorie à l'aide de l'émulation mobile sur une connexion 3G simulée.
  2. Utilisez Shift+Tab ou revenez en arrière en mode Navigation pour modifier les paramètres d'audit.
  3. Lorsque vous êtes prêt à exécuter l'audit, revenez au bouton Run Audit et appuyez sur Enter.
  4. La sélection passe à une fenêtre modale avec un bouton Cancel (Annuler) qui vous permet de quitter l'audit. Vous pouvez entendre une série de signaux sonores lorsque l'audit s'exécute et que la page est actualisée plusieurs fois.

Problèmes connus

  • Les différentes sections du formulaire de configuration ne sont pas balisées avec un élément fieldset. Il peut être plus facile de les parcourir en mode Navigation pour déterminer les commandes associées à chaque section.
  • Aucun signal sonore ni aucune annonce de région dynamique ne sont émis lorsque l'audit est terminé. En règle générale, cela prend environ 30 secondes, après quoi vous devriez pouvoir accéder aux résultats. Utilisez le mode Navigation pour accéder rapidement aux résultats.

Parcourir le rapport d'audit

Le rapport d'audit est organisé en sections correspondant à chacune des catégories d'audit. Le rapport s'ouvre avec une liste de scores pour chaque catégorie. Ces scores sont également des liens qui peuvent être utilisés pour accéder aux sections pertinentes. Chaque section contient des éléments details extensibles, qui contiennent des informations relatives aux audits réussis ou ayant échoué. Par défaut, seuls les audits ayant échoué sont affichés. Chaque section se termine par un élément details final qui contient tous les audits réussis.

Pour exécuter un nouvel audit, utilisez Shift+Tab pour quitter le rapport et recherchez le bouton Perform An Audit (Effectuer un audit).