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

Ce guide vise à aider les utilisateurs qui s'appuient principalement sur des technologies d'assistance comme 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

Avant de commencer, il est utile d'avoir un modèle mental de la structure de l'interface utilisateur des outils de développement. Les outils de développement sont divisés en une série de panneaux organisés dans un tablist ARIA. Exemple :

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

La zone de contenu de chaque panneau contient différents outils, souvent appelés onglets ou volets dans la documentation. Par exemple, le panneau Éléments contient des onglets supplémentaires permettant d'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 de ces termes est de maintenir la cohérence avec le reste de la documentation officielle des outils de développement.

Raccourcis clavier

La référence des raccourcis clavier des outils de développement est une antisèche utile. N'oubliez pas de l'ajouter à vos favoris et de vous y référer lorsque vous explorerez les différents panneaux.

Ouvrir les outils de développement

Pour commencer, lisez Ouvrir les outils pour les développeurs Chrome. Vous pouvez ouvrir les outils de développement de plusieurs façons, à l'aide de raccourcis clavier ou d'éléments de menu.

Naviguer entre les panneaux

Naviguer à l'aide du clavier

• Une fois les outils de développement ouverts, appuyez sur Ctrl+] ou Cmd+] (Mac) pour sélectionner le panneau suivant.
• Appuyez sur Ctrl+[ ou Cmd+[ (Mac) pour sélectionner le panneau précédent.
• Vous pouvez également utiliser Maj+Tabulation pour déplacer le focus sur le tablist 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.

Problèmes connus

• Certains panneaux, tels que les panneaux Console et Performances, peuvent déplacer le focus vers 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 que le contenu ciblé du panneau a été lu. Il est donc très facile de passer à côté.

Naviguer à l'aide du menu Command

Pour vous concentrer sur un panneau spécifique, utilisez le menu de commandes :

1. Une fois les outils de développement ouverts, appuyez sur Ctrl+Maj+P ou Cmd+Maj+P (Mac) pour ouvrir le menu de commandes. Le menu de commandes est une zone de liste déroulante de saisie semi-automatique pour la recherche approximative.
2. Saisissez le nom du panneau que vous souhaitez ouvrir, puis utilisez la flèche vers le bas du clavier pour accéder à l'option appropriée.
3. Appuyez sur Entrée pour exécuter une commande.

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

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

Si vous ouvrez un panneau de cette manière, le contenu du panneau lui-même est sélectionné. Dans le cas du panneau Éléments, la sélection se déplace dans l'arborescence DOM.

Panneau "Éléments"

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. Sélectionnez l'option Inspecter. Le panneau Éléments s'ouvre et l'élément est sélectionné dans l'arborescence DOM.

L'arborescence DOM est présentée sous la forme d'un tree ARIA. Pour obtenir un exemple, consultez Parcourir l'arborescence DOM avec un clavier.

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

1. Sélectionnez un nœud dans l'arborescence DOM, puis affichez le menu contextuel en effectuant un clic droit.
2. Développez l'option Copier.
3. Sélectionnez Copier outerHTML.

Problèmes connus

• L'option Copier outerHTML ne sélectionne souvent pas le nœud actuel, mais son nœud parent. Toutefois, le contenu de l'élément doit toujours figurer dans l'outerHTML copié.

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

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

Problèmes connus

• Lorsque vous saisissez du texte, 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 pas non plus de commentaires. 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

• Sélectionnez un nœud dans l'arborescence DOM, puis appuyez sur Entrée pour le rendre modifiable.
• Appuyez sur la touche Tabulation pour passer d'une valeur d'attribut à une 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 Ctrl+Entrée ou Cmd+Entrée (Mac) pour accepter la modification.

Par exemple, si vous saisissez h3 et appuyez sur Ctrl+Entrée ou Cmd+Entrée (Mac), les balises de début et de fin de l'élément deviennent h3.

Onglets du panneau "Éléments"

Le panneau Éléments contient des onglets supplémentaires permettant d'inspecter des éléments tels que le CSS appliqué à un élément ou sa place dans l'arborescence d'accessibilité.

• Lorsque le nœud est sélectionné dans l'arborescence DOM, appuyez sur la touche de tabulation jusqu'à entendre que le volet Styles est sélectionné.
• Utilisez la flèche vers la droite pour explorer les autres onglets disponibles.

L'arborescence DOM transforme les éléments avec des attributs href en liens pouvant être sélectionnés. Vous devrez peut-être appuyer sur la touche Tabulation plusieurs fois pour atteindre le volet "Styles".

Problèmes connus

Les onglets Points d'arrêt DOM et Propriétés ne sont pas accessibles au 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. Il existe également un outil d'inspection de style puissant pour explorer et modifier les styles actuellement 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. Par exemple, supposons que vous ayez fini 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 d'abord sélectionner le nœud <footer> dans l'arborescence DOM. Vous trouverez peut-être plus rapide d'utiliser le workflow Inspecter pour inspecter un nœud situé à proximité du nœud footer (par exemple, un lien dans le pied de page), ce qui permet de cibler l'arborescence DOM, puis d'utiliser votre clavier pour accéder au nœud exact qui vous intéresse.

Parcourir le volet "Styles"

Comme tous les outils de style sont liés d'une manière ou d'une autre au volet Styles, il est logique de commencer par maîtriser cet outil.

• Lorsque le volet Styles est sélectionné, appuyez sur Tabulation pour parcourir son contenu.
• Appuyez sur la touche Tabulation jusqu'à ce que le premier style devienne actif. Si vous utilisez un lecteur d'écran, ce premier style sera annoncé comme "element.style {}".
• Appuyez sur la 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 Entrée pour examiner un style plus en détail. Le curseur se place sur une version modifiable du nom du style.
• Appuyez sur la touche Tabulation pour passer d'une version modifiable à l'autre pour chaque propriété CSS et leurs valeurs correspondantes. À la fin de chaque bloc de style se trouve un champ de texte vide et modifiable que vous pouvez utiliser pour ajouter des propriétés CSS supplémentaires.
• Vous pouvez continuer à appuyer sur la touche de tabulation pour parcourir la liste des styles ou appuyer sur Échap pour quitter ce mode et revenir à la navigation à l'aide des touches fléchées.

Pour découvrir d'autres raccourcis, consultez la référence des raccourcis clavier du volet "Styles".

Problèmes connus

• Si vous utilisez le champ de texte modifiable Filtrer, vous ne pourrez plus parcourir la liste des styles.

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

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

1. Accédez au volet Styles et appuyez sur Tabulation jusqu'à ce que le bouton Activer/Désactiver l'état de l'élément soit sélectionné.
2. Appuyez sur Entrée 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 la touche de tabulation jusqu'à ce que l'état :active soit sélectionné.
4. Appuyez sur la barre d'espace pour l'activer. Si l'élément actuellement sélectionné dans l'arborescence DOM possède un style :active, il est désormais appliqué.
5. Continuez d'appuyer sur la touche Tabulation pour explorer tous les états disponibles.

Ajouter un cours existant

Le bouton Classes d'éléments se trouve à côté du bouton Activer/Désactiver l'état de l'élément. Placez le curseur dessus en appuyant sur Tabulation, puis sur Entrée. Le curseur se place dans un champ de saisie de texte intitulé Ajouter une classe.

Le bouton 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 de modification pour afficher une liste de suggestions de classes et utiliser la 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 Entrée pour l'appliquer.

Ajouter une règle de style

Le bouton Nouvelle règle de style se trouve à côté du bouton Classes d'éléments. Sélectionnez-le en appuyant sur Tabulation, puis sur Entrée. Le curseur se place dans un champ de texte modifiable à l'intérieur de l'inspecteur de style. Le contenu textuel initial du champ correspond au nom du tag de l'élément sélectionné dans l'arborescence DOM. Vous pouvez saisir le nom de la classe de votre choix dans ce champ, puis appuyer sur Tabulation pour lui attribuer des propriétés CSS.

Onglet "Calculé"

Une fois l'onglet Calculé sélectionné, appuyez sur Tabulation pour parcourir son contenu. L'onglet Calculé contient 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 la touche Tabulation jusqu'à ce que vous accédiez à la collection de styles calculés. Elles sont présentées sous la forme d'un tree ARIA. Développer une zone de liste déroulante permet de révéler 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 qui correspond actuellement, 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 Filtrer, vous ne pourrez plus inspecter les styles.

Onglet "Écouteurs d'événements"

Dans le panneau Éléments, vous pouvez inspecter les écouteurs d'événements appliqués à un élément à l'aide de l'onglet Écouteurs d'événements. En vous concentrant sur le volet Styles, appuyez sur la flèche vers la droite pour accéder à l'onglet Écouteurs d'événements.

Explorer les écouteurs d'événements

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

Volet "Accessibilité"

Lorsque le volet Accessibilité est sélectionné, appuyez sur Tabulation pour parcourir son contenu. Dans le volet 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 de l'accessibilité est présentée sous la forme d'un tree ARIA où chaque treeitem correspond à un élément du DOM. L'arbre 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

• Il est possible que le type d'arborescence ARIA utilisé par le volet Accessibilité ne soit pas correctement exposé 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 Attributs ARIA et Propriétés calculées sont marquées comme des arborescences ARIA, mais elles ne disposent pas actuellement de gestion de la mise au point et ne sont donc pas utilisables au clavier.

Panneau "Audits"

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

Configurer et exécuter un audit

1. Lorsque le panneau Audits est ouvert pour la première fois, le curseur est placé sur le bouton 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 Maj+Tabulation 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 Exécuter l'audit et appuyez sur Entrée.
4. La sélection se déplace vers une fenêtre modale avec un bouton Annuler qui vous permet de quitter l'audit. Vous entendrez peut-être une série de signaux sonores lorsque l'audit s'exécute et actualise la page plusieurs fois.

Problèmes connus

• Les différentes sections du formulaire de configuration ne sont actuellement pas marquées avec un élément fieldset. Il peut être plus facile de les parcourir en mode Navigation pour déterminer quels contrôles sont associés à chaque section.
• Aucun signal sonore ni aucune annonce de région en direct ne sont émis lorsque l'audit est terminé. En général, cela prend environ 30 secondes, après quoi vous devriez pouvoir accéder aux résultats. Le mode Parcourir peut être le moyen le plus simple d'accéder 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 sur une liste de scores pour chaque catégorie. Ces scores sont également des liens qui peuvent être utilisés pour accéder aux sections concernées. Chaque section contient des éléments details extensibles, qui contiennent des informations sur les audits réussis ou échoués. 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 Maj+Tabulation pour quitter le rapport et recherchez le bouton Effectuer un audit.