Ce guide vise à aider les utilisateurs qui s'appuient principalement sur des technologies d'assistance telles que l'accès aux lecteurs d'écran et l'utilisation des Outils pour les développeurs Chrome. Les outils pour les développeurs Chrome sont une suite d'outils pour les développeurs Web intégrée au navigateur Google Chrome. Consultez la documentation de référence sur l'accessibilité si vous recherchez les 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 de développement. 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 en cours de route.
Présentation
Avant de commencer, il est utile d'avoir un modèle mental sur la structure de l'interface utilisateur des outils de développement. Les outils de développement sont divisés en plusieurs panneaux organisés dans un élément ARIA tablist. Exemple :
- Le panneau Elements (Éléments) vous permet d'afficher et de modifier les nœuds DOM ou CSS.
- Le panneau Console vous permet de lire les journaux JavaScript et les objets de modification en temps réel.
La zone de contenu de chaque panneau contient un certain nombre d'outils différents, souvent appelés onglets ou volets dans la documentation. Par exemple, le panneau Elements contient des onglets supplémentaires pour inspecter les écouteurs d'événements, l'arborescence d'accessibilité, etc. La distinction entre les onglets et les volets est quelque peu arbitraire. La seule raison pour laquelle vous voyez un terme est d'assurer la cohérence avec le reste de la documentation officielle des outils de développement.
Raccourcis clavier
La documentation de référence sur les raccourcis clavier DevTools est un aide-mémoire utile. N'oubliez pas de l'ajouter à vos favoris et de vous y référer au fur et à mesure que 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 de développement, via des raccourcis clavier ou des é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 déplacer 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 curseur dans le
tablistd'un panneau et utiliser les touches fléchées pour changer de panneau, mais il peut être plus rapide d'utiliser les raccourcis mentionnés précédemment.
Problèmes connus
- Certains panneaux, tels que Console et Performances, peuvent se déplacer dans leur zone de contenu dès qu'ils sont activés. Il peut alors être difficile de naviguer à l'aide des touches fléchées.
- Le nom du panneau sélectionné est annoncé, mais seulement après que le contenu sélectionné a été lu dans le panneau. Il peut donc très facilement passer à côté.
Naviguer à l'aide du menu de commandes
Pour sélectionner un panneau spécifique, utilisez le menu Commandes:
- Une fois les outils de développement ouverts, appuyez sur Ctrl+Maj+P ou Cmd+Maj+P (Mac) pour ouvrir le menu Commandes. Le menu de commande est une liste déroulante de saisie semi-automatique pour la recherche.
- 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 Commande.
- Saisissez E, puis L. L'option Panel > Show Items (Panneau > Afficher les éléments) est sélectionnée.
- Appuyez sur Entrée pour exécuter la commande qui ouvre le panneau.
Lorsque vous ouvrez un panneau de cette façon, le curseur est placé sur le contenu du panneau lui-même. Dans le panneau Elements, le curseur se place dans l'arborescence DOM.
Panneau "Elements"
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 Éléments s'ouvre et l'élément est sélectionné dans l'arborescence DOM.
L'arbre DOM se présente sous la forme d'un ARIA tree. Pour obtenir un exemple, consultez la section Parcourir l'arborescence DOM à l'aide du clavier.
Copier le code d'un élément de l'arborescence DOM
- Sélectionnez un nœud dans l'arborescence DOM pour afficher le menu contextuel par clic droit.
- Développez l'option Copy (Copier).
- Sélectionnez Copier le code HTML externe.
Problèmes connus
- Souvent, Copy outerHTML ne sélectionne pas le nœud actuel, mais sélectionne son nœud parent. Toutefois, le contenu de l'élément doit toujours se trouver dans le outerHTML copié.
Modifier les attributs d'un élément dans l'arborescence DOM
- Lorsque le nœud est sélectionné dans l'arborescence DOM, appuyez sur Entrée pour le rendre modifiable.
- Appuyez sur Tab pour passer d'une valeur d'attribut à l'autre. Lorsque vous entendez "espace", cela signifie que vous vous trouvez dans une entrée de texte vide et que vous pouvez saisir une nouvelle valeur d'attribut.
- Appuyez sur Ctrl+Entrée ou Cmd+Entrée (Mac) pour accepter la modification et entendre tout le contenu de l'élément.
Problèmes connus
- Lorsque vous saisissez du texte, vous ne recevez aucun commentaire. Si vous faites une faute d'orthographe et utilisez les touches fléchées pour explorer vos entrées, vous n'obtenez aucun retour d'information. Le moyen le plus simple de vérifier votre travail consiste à accepter la modification, puis à écouter l'annonce entière.
Modifier le code HTML d'un élément dans l'arborescence DOM
- Lorsque le nœud est sélectionné dans l'arborescence DOM, appuyez sur Entrée 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 une entrée de texte et 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 sont remplacées par h3.
Onglets du panneau "Elements"
Le panneau Elements (É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é.
- Placez le curseur sur un nœud dans l'arborescence DOM, puis appuyez sur Tab jusqu'à ce que vous entendiez 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 sélectionnables. Vous devrez donc peut-être appuyer plusieurs fois sur Tabulation pour accéder au volet "Styles".
Problèmes connus
Les onglets Points d'arrêt DOM et Propriétés ne sont pas accessibles avec le clavier.
Volet "Styles"
Le volet Styles contient des commandes pour filtrer les styles, activer/désactiver les états des éléments (comme :active et :focus), activer/désactiver les classes et ajouter de nouvelles classes. Il existe également un puissant outil d'inspection des styles qui permet 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. Il peut être plus rapide d'utiliser le workflow Inspect (Inspecter) pour inspecter un nœud situé à proximité du nœud footer (un lien en pied de page, par exemple), qui cible l'arborescence DOM, puis d'utiliser votre 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 judicieux de vous familiariser d'abord avec cet outil.
- Placez le curseur dans le volet Styles, puis appuyez sur Tab pour déplacer le curseur à l'intérieur 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 énonce 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 curseur commence sur une version modifiable du nom du style.
- Appuyez sur Tabulation pour passer d'une version modifiable de chaque propriété CSS aux valeurs correspondantes. À la fin de chaque bloc de style se trouve un champ de texte vierge et modifiable que vous pouvez utiliser pour ajouter d'autres propriétés CSS.
- Vous pouvez continuer à appuyer sur Tab 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.
Lisez attentivement les références clavier du volet "Styles" pour en savoir plus sur les autres raccourcis clavier.
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 des éléments
Pour activer ou désactiver l'état d'un élément, comme :active ou :focus, procédez comme suit:
- Accédez au volet Styles et appuyez sur Tab 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 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é. - Continuez d'appuyer sur Tabulation pour explorer tous les états disponibles.
Ajouter une classe existante
À côté du bouton Activer/Désactiver l'état de l'élément se trouve le bouton Classes d'éléments. Déplacez-vous vers cet élément en appuyant sur Tab, puis sur Entrée. Le curseur se place dans un champ de texte d'édition intitulé Add New Class (Ajouter une nouvelle classe).
Le bouton Classes d'éléments permet principalement d'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 d'édition pour afficher une liste de suggestions de classes, puis 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
À côté du bouton Classes d'éléments se trouve le bouton Nouvelle règle de style. Déplacez-vous vers cet élément en appuyant sur Tab, puis sur Entrée. Le curseur se place dans un champ de texte modifiable à l'intérieur de l'outil d'inspection du style. Le contenu textuel initial du champ est le nom de 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 Tabulation pour lui attribuer des propriétés CSS.
Onglet "Calculé"
Sélectionnez l'onglet Calculé, puis appuyez sur Tabulation pour déplacer le curseur à l'intérieur et explorer son contenu. L'onglet Calculé contient des commandes vous permettant d'identifier les propriétés CSS 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 atteigniez la collection de styles calculés. Elles sont présentées sous la forme d'un tree ARIA. Le développement d'une zone de liste permet d'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 correspondant, le nom de fichier de la feuille de style qui contient le sélecteur et son numéro de ligne.
Problèmes connus
- Si vous utilisez le champ de texte Filtre, vous ne pourrez plus inspecter les styles.
Onglet "Écouteurs d'événements"
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). Placez le curseur sur le volet Styles, puis 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é
Placez le curseur dans le volet Accessibilité, puis appuyez sur Tabulation pour déplacer le curseur à l'intérieur et explorer son contenu. Le volet Accessibilité contient 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 en tant que "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 s'affiche pas correctement dans Chrome pour les lecteurs d'écran macOS tels que VoiceOver. Abonnez-vous au problème Chromium n° 868480 pour être informé de l'évolution de ce problème.
- Les sections Attributs ARIA et Propriétés calculées sont balisées en tant qu'arborescences ARIA, mais elles ne disposent pas actuellement de la gestion des sélections et ne peuvent donc pas être utilisées au clavier.
Panneau "Audits"
Le panneau Audits vous permet d'exécuter une série de tests sur un site afin de détecter 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
- Lorsque vous ouvrez le panneau Audits 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 de chaque catégorie à l'aide d'une émulation mobile sur une connexion 3G simulée.
- Utilisez les touches Maj+Tabulation ou revenez en mode "Parcourir" 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 curseur se place dans une fenêtre modale avec un bouton Annuler qui vous permet de quitter l'audit. Vous pouvez entendre une série de icônes 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 balisées avec un élément
fieldset. Il peut être plus facile de les parcourir en mode navigation pour déterminer quelles commandes sont associées à chaque section. - Une fois l'audit terminé, aucune icône sonore ni aucune annonce concernant la région active ne sont diffusées. 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'obtenir des 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 que vous pouvez utiliser pour accéder aux sections pertinentes. Chaque section contient des éléments details extensibles, qui contiennent des informations sur les 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 les touches Maj+Tabulation pour quitter le rapport et recherchez le bouton Effectuer un audit.