Ce guide vise à aider les utilisateurs qui dépendent principalement de 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 documentation de référence sur l'accessibilité si vous recherchez des fonctionnalités DevTools liées à l'amélioration de l'accessibilité d'une page Web.
L'accessibilité des outils de développement est en cours d'élaboration. 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 de se faire une idée de la structure de l'interface utilisateur de DevTools. 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 des objets en direct.
Dans la zone de contenu de chaque panneau, vous trouverez un certain nombre d'outils, souvent appelés onglets ou volets dans la documentation. Par exemple, le panneau É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 de ces termes est de maintenir la cohérence avec le reste de la documentation officielle de DevTools.
Raccourcis clavier
La référence des raccourcis clavier DevTools est une aide précieuse. N'oubliez pas d'ajouter cette page à vos favoris et de vous y référer lorsque vous explorez les différents panneaux.
Ouvrir les outils de développement
Pour commencer, consultez Ouvrir les outils pour les développeurs Chrome. Il existe plusieurs façons d'ouvrir les outils pour les développeurs, que ce soit via des raccourcis clavier ou des éléments de menu.
Naviguer entre les panneaux
Naviguer à l'aide du clavier
- Lorsque DevTools est ouvert, appuyez sur Ctrl+] ou Cmd+] (Mac) pour mettre en surbrillance 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
tablistd'un panneau et utiliser les touches fléchées pour changer de panneau, bien qu'il soit 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 avoir lu le contenu sélectionné dans le panneau. Il est donc facile de ne pas les remarquer.
Naviguer dans le menu de commandes
Pour mettre en surbrillance un panneau spécifique, utilisez le menu de commandes:
- Lorsque DevTools est ouvert, appuyez sur Ctrl+Maj+P ou Cmd+Maj+P (Mac) pour ouvrir le menu des commandes. Le menu de commandes est une zone de liste déroulante de saisie semi-automatique pour une recherche floue.
- 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.
- Appuyez sur Entrée pour exécuter une commande.
Par exemple, pour ouvrir le panneau Elements (Éléments) :
- Ouvrez le menu Command (Commande).
- Saisissez E, puis L. L'option Panneau > Afficher les éléments est sélectionnée.
- Appuyez sur Entrée pour exécuter la commande qui ouvre le panneau.
Ouvrir un panneau de cette manière permet de mettre en avant le contenu du panneau lui-même. Dans le cas du panneau Éléments, le focus passe à l'arborescence DOM.
Panneau "Elements" (Éléments)
Inspecter un élément de la page
- Accédez à l'élément que vous souhaitez inspecter à l'aide du curseur du lecteur d'écran.
- Simulez un clic droit sur l'élément pour ouvrir le menu contextuel.
- Sélectionnez l'option Inspecter. Le panneau Elements (Éléments) s'ouvre et l'élément est mis en surbrillance 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
- Lorsque le focus est placé sur un nœud de l'arborescence DOM, affichez le menu contextuel en effectuant un clic droit.
- Développez l'option Copier.
- Sélectionnez Copier outerHTML.
Problèmes connus
- 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 se trouver dans l'élément outerHTML copié.
Modifier les attributs d'un élément dans l'arborescence DOM
- Lorsque le focus est placé sur un nœud de l'arborescence DOM, appuyez sur Entrée pour le rendre éditable.
- Appuyez sur Tab pour passer d'une valeur d'attribut à l'autre. Lorsque vous entendez "espace", vous vous trouvez dans une zone 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 le changement et entendre l'intégralité du contenu de l'élément.
Problèmes connus
- Lorsque vous saisissez du texte dans la zone de saisie, vous ne recevez aucun retour. Si vous faites une faute de frappe et que vous utilisez les touches fléchées pour explorer votre saisie, vous ne recevez aucun retour. Le moyen le plus simple de vérifier votre travail consiste à accepter le changement, puis à attendre que l'élément entier soit annoncé.
Modifier le code HTML d'un élément dans l'arborescence DOM
- Lorsque le focus est placé sur un nœud de l'arborescence DOM, appuyez sur Entrée pour le rendre éditable.
- 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 une zone 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 le changement.
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 sont remplacées par h3.
Onglets du panneau "Elements"
Le panneau Éléments contient des onglets supplémentaires permettant d'inspecter des éléments tels que le CSS appliqué à un élément ou son emplacement dans l'arborescence d'accessibilité.
- Lorsque l'accent est mis sur un nœud de l'arborescence DOM, appuyez sur Tabulation jusqu'à ce que vous entendiez que le volet Styles est sélectionné.
- Utilisez la flèche vers la droite pour parcourir 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 accéder au 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/de désactiver les états des éléments (par exemple, :active et :focus), d'activer/de désactiver les classes et d'en ajouter. Un outil d'inspection des styles puissant permet également d'explorer et de 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 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 d'abord sélectionner le nœud <footer> dans l'arborescence DOM. Vous pouvez trouver 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 met en surbrillance l'arborescence DOM, puis d'utiliser le clavier pour accéder au nœud qui vous intéresse.
Parcourir le volet "Styles"
Étant donné que tous les outils de style se connectent d'une manière ou d'une autre au volet Styles, il est logique de commencer par maîtriser cet outil.
- Lorsque le focus est placé sur le volet Styles, appuyez sur Tabulation pour le déplacer et explorer 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é sous la forme "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. Exemple: "main.css:233 .card__img {}"
- Appuyez sur Entrée pour inspecter un style plus en détail. Le focus commence sur une version modifiable du nom du style.
- Appuyez sur la touche Tabulation pour passer d'une version modifiable de chaque propriété CSS à la suivante et à ses 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 Tabulation pour parcourir la liste des styles, ou sur la touche Échap pour quitter ce mode et revenir à la navigation à l'aide des touches fléchées.
Pour connaître 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:
- Accédez au volet Styles, puis appuyez sur Tabulation jusqu'à ce que le bouton Activer/Désactiver l'état de l'élément soit sélectionné.
- Appuyez sur Entrée pour développer la collection d'états des éléments. Les états des éléments sont présentés sous la forme d'un groupe de cases à cocher.
- Appuyez sur la touche Tabulation jusqu'à ce que le premier état,
:active, soit sélectionné. - Appuyez sur 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é. - Continuez d'appuyer sur la touche Tabulation pour parcourir tous les états disponibles.
Ajouter une classe en cours de sortie
Le bouton Classes d'éléments se trouve à côté du bouton Activer/Désactiver l'état de l'élément. Placez le focus dessus en appuyant sur Tabulation, puis sur Entrée. Le focus se déplace vers un champ de texte de modification intitulé Ajouter un cours.
Le bouton Classes d'éléments permet principalement d'ajouter des classes existantes à un élément. Par exemple, si votre feuille de style contenait 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 le nom du cours vous-même 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. Placez le focus dessus en appuyant sur Tabulation, puis appuyez sur Entrée. Le focus se déplace vers un champ de texte modifiable dans l'outil d'inspection du style. Le contenu textuel initial du champ correspond au nom de la balise de l'élément sélectionné dans l'arborescence DOM. Vous pouvez saisir le nom de classe de votre choix dans ce champ, puis appuyer sur la touche Tabulation pour lui attribuer des propriétés CSS.
Onglet "Calculés"
Lorsque le focus est placé sur l'onglet Computed (Calculé), appuyez sur Tabulation pour déplacer le focus vers l'intérieur et explorer son contenu. 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é.
Parcourir tous les styles calculés
Appuyez sur la touche Tabulation jusqu'à ce que vous accédiez à la collection des styles calculés. Ils sont présentés sous la forme d'un tree ARIA. Développez une liste pour afficher 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 actuellement 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 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. Lorsque le volet Styles est actif, 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 tree ARIA. 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 focus est placé sur le volet "Accessibilité", appuyez sur Tabulation pour déplacer le focus vers l'intérieur et explorer 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 d'accessibilité est présentée sous la forme d'un tree ARIA, 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 sous le nom "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 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 arbres ARIA, mais elles ne disposent actuellement pas de gestion du focus. Elles ne sont donc pas utilisables au clavier.
Panneau "Audits" (Audits)
Le panneau Audits vous permet d'exécuter une série de tests sur un site pour rechercher les problèmes courants liés aux performances, à l'accessibilité, au référencement et à un certain nombre d'autres catégories.
Configurer et exécuter un audit
- Lorsque le panneau Audits s'ouvre pour la première fois, le focus est placé 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.
- Appuyez sur Maj+Tabulation ou revenez en arrière en mode navigation pour modifier les paramètres d'audit.
- Lorsque vous êtes prêt à exécuter l'audit, revenez au bouton Exécuter l'audit et appuyez sur Entrée.
- Le focus passe dans une fenêtre modale avec un bouton Annuler qui vous permet de quitter l'audit. Vous pouvez entendre une série de sons 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 pas actuellement marquées avec un élément
fieldset. Il peut être plus facile de les parcourir en mode Parcourir pour déterminer quelles commandes sont associées à chaque section. - Aucune annonce n'est diffusée ni par le signal sonore ni par la région en direct 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" est peut-être le moyen le plus simple d'obtenir les 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 permettent d'accéder aux sections pertinentes. 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, appuyez sur Maj+Tabulation pour quitter le rapport, puis recherchez le bouton Effectuer un audit.