Naviguer dans DevTools avec une technologie d’assistance

  • Article

Cet article vous aide à utiliser DevTools par le biais du clavier et des technologies d’assistance telles que les lecteurs d’écran. Ce guide vous guide à travers les outils et onglets les plus accessibles, et met en évidence les problèmes que vous pouvez rencontrer.

Pour connaître les fonctionnalités DevTools liées à l’amélioration de l’accessibilité d’une page web, consultez Fonctionnalités de test d’accessibilité.

Panneaux d’outils à onglets contenant des onglets et des pages

Pour connaître la terminologie des onglets, des outils et des panneaux, consultez Panneaux d’outils à onglets contenant des onglets et des pages dans Vue d’ensemble de DevTools.

Techniquement, les onglets sont une liste de tabulations ARIA.

Raccourcis clavier

Pour connaître les raccourcis clavier par défaut pour DevTools, consultez Raccourcis clavier. Veillez à ajouter un signet et à y faire référence à mesure que vous explorez les différents outils.

Ouvrir DevTools

Dans Microsoft Edge, vous pouvez ouvrir DevTools à l’aide de la souris ou du clavier, de l’une des manières suivantes. L’outil qui est ouvert dépend de la façon dont vous ouvrez DevTools.

Méthodes principales :

Opération Outil obtenu
Cliquez avec le bouton droit sur un élément d’une page web, puis sélectionnez Inspecter. L’outil Éléments , avec l’arborescence DOM développée pour afficher l’élément de page cliqué avec le bouton droit.
Appuyez sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS). Outil précédemment utilisé, ou outil d’accueil .
Appuyez sur F12. Outil précédemment utilisé, ou outil d’accueil .

Autres méthodes :

Opération Outil obtenu
Dans la barre d’outils Microsoft Edge, sélectionnez Paramètres et bien plus (icône « Paramètres et plus »)>Autres outils>Outils de développement. Outil précédemment utilisé, ou outil d’accueil .
Appuyez sur Ctrl+Maj+J (Windows, Linux) ou Cmd+Option+J (macOS). Outil Console .
Appuyez sur Ctrl+Maj+C (Windows, Linux) ou Cmd+Option+C (macOS). L’outil Éléments , avec l’arborescence DOM développée pour afficher l’élément <body> .
Appuyez sur Maj+F10 pour ouvrir le menu contextuel. Pour sélectionner la commande Inspecter , appuyez sur Flèche vers le haut , puis sur Entrée. L’outil Éléments , avec l’arborescence DOM développée pour afficher l’élément <html> .
Appuyez sur Tab ou Maj+Tab pour mettre le focus sur un élément de page. Appuyez ensuite sur Maj+F10 pour ouvrir le menu contextuel. Pour sélectionner la commande Inspecter , appuyez sur Flèche vers le haut , puis sur Entrée. L’outil Éléments , avec l’arborescence DOM développée pour afficher l’élément de page prioritaire.

Vous pouvez passer d’un outil à l’autre à l’aide des touches de navigation du clavier ou du menu Commandes.

  • Avec DevTools ouvert, appuyez sur Ctrl+] (Windows, Linux) ou Cmd+] (macOS) pour déplacer le focus sur l’outil suivant de la barre d’activité.

  • Appuyez sur Ctrl+[ (Windows, Linux) ou Cmd+[ (macOS) pour déplacer le focus sur l’outil précédent dans la barre d’activités.

  • Appuyez sur Tab ou Maj+Tab à plusieurs reprises jusqu’à ce que le focus se déplace vers les onglets de la barre d’activité ou de la barre d’outils Affichage rapide , puis utilisez les touches de direction pour vous déplacer entre les outils.

Problèmes connus :

  • Certains outils, tels que les outils Console et Performances , peuvent déplacer le focus dans la zone de contenu de l’outil dès que l’outil est sélectionné. Cela peut rendre la navigation par touches de direction difficile.

  • Le nom de l’outil sélectionné est annoncé, mais uniquement après avoir annoncé le contenu ciblé dans l’outil. Cette séquence d’annonces peut facilement manquer le nom de l’outil.

Pour sélectionner un outil spécifique, utilisez le menu Commandes. Dans le menu Commandes, un outil est indiqué sous la forme d’un élément Panneau ou Affichage rapide .

  1. Avec DevTools ouvert, appuyez sur Ctrl+Maj+P (Windows, Linux) ou Cmd+Maj+P (macOS) pour ouvrir le menu Commandes.

    Le menu Commande est une zone de liste déroulante de saisie semi-automatique de recherche approximative.

  2. Tapez le nom d’un outil, puis utilisez la flèche vers le bas du clavier pour accéder à l’option correcte.

  3. Appuyez sur Entrée pour exécuter une commande.

Pour ouvrir l’outil Éléments :

  1. Ouvrez le menu Commandes.

  2. Commencez à taper des éléments, sélectionnez la commande Afficher les éléments , puis appuyez sur Entrée.

L’ouverture d’un outil de cette façon met le focus sur la zone de contenu de l’outil. Dans le cas de l’outil Éléments , le focus se déplace dans l’arborescence DOM.

L’outil Éléments

Inspecter un élément sur la page

  1. Accédez à l’élément que vous souhaitez inspecter à l’aide du curseur dans le lecteur d’écran.

  2. Cliquez avec le bouton droit sur l’élément, puis sélectionnez l’option Inspecter . Cela ouvre l’outil Éléments et concentre l’élément dans l’arborescence DOM.

L’arbre DOM est disposé en tant qu’arbre ARIA. Pour obtenir un exemple, consultez Naviguer dans l’arborescence DOM avec un clavier.

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

  1. Cliquez avec le bouton droit sur un nœud dans l’arborescence DOM.

  2. Développez l’option Copier .

  3. Sélectionnez Copier le code externeHTML.

Problèmes connus :

  • Copier outerHTML ne sélectionne souvent pas le nœud actuel, mais sélectionne plutôt le nœud parent. Toutefois, le contenu de l’élément doit toujours se trouver dans le copié outerHTML.

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

  • Lorsque le focus est sur un nœud de l’arborescence DOM, appuyez sur Entrée pour modifier le nœud.

  • Appuyez sur Tab pour passer d’une valeur d’attribut à l’autre. Lorsque vous entendez « espace », vous êtes à l’intérieur d’une entrée de texte vide et vous pouvez taper une nouvelle valeur d’attribut.

  • Appuyez sur Ctrl+Entrée (Windows, Linux) ou Cmd+Entrée (macOS) pour accepter la modification et entendre tout le contenu de l’élément.

Problèmes connus :

  • Lorsque vous tapez dans l’entrée de texte, vous n’obtenez aucun commentaire. Si vous effectuez une faute de frappe et utilisez les touches de direction pour explorer votre entrée, vous n’obtenez également aucun commentaire. Le moyen le plus simple de case activée votre travail consiste à accepter la modification, puis à écouter l’intégralité de l’élément à annoncer.

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

  • Lorsque le focus est sur un nœud de l’arborescence DOM, appuyez sur Entrée pour modifier le nœud.

  • Appuyez sur Tab pour passer d’une valeur d’attribut à l’autre. Lorsque vous entendez le nom de l’élément, pour instance, h2, vous êtes à l’intérieur d’une entrée de texte et vous pouvez modifier le type de l’élément.

  • Appuyez sur Ctrl+Entrée (Windows, Linux) ou Cmd+Entrée (macOS) pour accepter la modification.

Par exemple, lorsque vous tapez h3 , puis appuyez sur Ctrl+Entrée (Windows, Linux) ou Cmd+Entrée (macOS), les balises de début et de fin de l’élément h3 changent.

Onglets dans l’outil Éléments

L’outil Éléments contient des onglets supplémentaires pour inspecter des éléments tels que le CSS appliqué à un élément, ou l’emplacement approprié dans l’arborescence d’accessibilité.

  • Lorsque le focus est sur l’arborescence DOM, appuyez sur Tab jusqu’à entendre que le volet Styles est sélectionné.

  • Appuyez sur Flèche droite pour explorer les autres onglets disponibles.

L’arborescence DOM transforme les éléments avec href des attributs en liens pouvant être ciblés, vous devrez peut-être appuyer plusieurs fois sur Tab 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

Le volet Styles comporte des contrôles permettant de filtrer les styles, d’activer les états des éléments (tels que :active et :focus), d’activer 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 qui a le focus dans l’arborescence DOM.

Le concept clé à comprendre à propos du volet Styles est qu’il affiche uniquement les styles pour le nœud actuellement sélectionné dans l’arborescence DOM. Par exemple, supposons que vous avez terminé d’inspecter les styles d’un <header> nœud et que vous souhaitez maintenant examiner les styles d’un <footer> nœud. Pour ce faire, vous devez d’abord sélectionner le <footer> nœud dans l’arborescence DOM.

Vous pouvez trouver plus rapide d’utiliser le flux de travail Inspecter pour inspecter un nœud qui se trouve à proximité générale du footer nœud (par exemple, un lien dans le pied de page), qui concentre l’arborescence DOM, puis utiliser votre clavier pour accéder au nœud exact qui vous intéresse.

É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 devenir d’abord un expert dans cet outil.

  • Avec le focus sur le volet Styles , appuyez sur Tab pour déplacer le focus à l’intérieur et explorer le contenu.

  • Appuyez sur Tab jusqu’à ce que le premier style soit actif. Si vous utilisez un lecteur d’écran, ce premier style est annoncé comme element.style {}.

  • Appuyez sur Flèche 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. Par 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 Tab pour passer des versions modifiables de chaque propriété CSS aux valeurs correspondantes. À 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 appuyez sur Échap pour quitter le mode et revenir à la navigation par touches de direction.

Pour obtenir d’autres raccourcis, consultez Informations de référence sur le clavier du volet Styles.

Problèmes connus :

  • Si vous utilisez le champ de texte modifiable Filtre , vous ne pouvez pas naviguer dans 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 , puis appuyez sur Tab jusqu’à ce que le bouton Basculer l’état de l’élément ait le focus.

  2. Appuyez sur Entrée pour afficher la section État de l’élément Force, qui contient des cases à cocher.

  3. Appuyez sur Tab jusqu’à ce que le premier état, :active, soit activé.

  4. Appuyez sur Espace pour activer la case à cocher. Si l’élément actuellement sélectionné dans l’arborescence DOM a un :active style, il est maintenant appliqué.

  5. Appuyez sur Tab pour explorer tous les états disponibles.

Ajouter une classe existante

Le bouton Classes d’éléments se trouve en regard du bouton Basculer l’état de l’élément . Pour déplacer le focus sur le bouton Classes d’éléments, appuyez sur Tab, puis sur Entrée. Le focus se déplace dans un champ de texte de modification intitulé Ajouter une nouvelle 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 contenait une classe d’assistance nommée .clearfix, vous pouvez appuyer . à l’intérieur du champ modifier le texte pour afficher une liste de suggestions de classes et utiliser la flèche bas pour rechercher la .clearfix suggestion. Vous pouvez également taper le nom de la classe vous-même et appuyer sur Entrée pour l’appliquer.

Ajouter une nouvelle règle de style

Le bouton Nouvelle règle de style est adjacent au bouton Classes d’éléments. Pour y placer le focus, appuyez sur Tab , puis sur Entrée. Le focus se déplace dans un champ de texte modifiable à l’intérieur de l’inspecteur de style. Le contenu de texte initial du champ est le nom de la balise de l’élément sélectionné dans l’arborescence DOM. Vous pouvez taper le nom de classe souhaité dans ce champ, puis appuyer sur Tab pour lui attribuer des propriétés CSS.

Onglet Calculé

Avec le focus sur l’onglet Calculé , appuyez sur Tab pour déplacer le focus à l’intérieur et explorer le contenu. Dans l’onglet Calculé, vous trouverez des contrôles permettant d’explorer les propriétés CSS qui sont réellement appliquées à un élément par ordre de spécificité.

Explorer tous les styles calculés

Appuyez sur Tab jusqu’à atteindre la collection de styles calculés. Les styles calculés sont présentés sous la forme d’une arborescence ARIA. Le développement d’une zone de liste 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 qui correspond actuellement, le nom de fichier de la feuille de style qui contient le sélecteur et le numéro de ligne du sélecteur.

Problèmes connus :

  • Si vous utilisez le champ Filtrer le texte, vous ne pouvez plus inspecter les styles.

Onglet Écouteurs d’événements

Pour inspecter les écouteurs d’événements appliqués à un élément, sélectionnez l’outil Éléments , puis sélectionnez l’onglet Écouteurs d’événements (regroupé avec l’onglet Styles ).

Lorsque le focus est placé sur l’onglet Styles , appuyez sur la flèche 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’une arborescence ARIA. Vous pouvez utiliser les touches de direction pour les parcourir. Un lecteur d’écran annonce le nom de l’objet DOM auquel l’écouteur d’événements est attaché, ainsi que le nom de fichier dans lequel l’écouteur d’événements est défini et le numéro de ligne.

Onglet Accessibilité

Sélectionnez la touche Tab pour vous déplacer dans l’onglet Accessibilité de l’outil Éléments .

L’onglet Accessibilité se trouve près de l’onglet Styles. Sous l’onglet Accessibilité, il existe des contrôles permettant d’explorer l’arborescence d’accessibilité, les attributs ARIA appliqués à un élément et les propriétés d’accessibilité calculées. Consultez Tester l’accessibilité à l’aide de l’onglet Accessibilité.

Arborescence d’accessibilité

L’arborescence d’accessibilité est présentée sous la forme d’une arborescence ARIA où chaque treeitem correspond à un élément dans le 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 de direction pour parcourir l’arborescence et explorer les relations parent-enfant.

Problèmes connus :

  • Le type d’arborescence ARIA utilisé par l’onglet Accessibilité peut ne pas être correctement exposé dans Microsoft Edge pour les lecteurs d’écran macOS comme VoiceOver. Abonnez-vous à Chromium problème #868480 pour être informé de la progression de ce problème.
  • Chacune des sections Attributs ARIA et Propriétés calculées est marquée en tant qu’arborescence ARIA, mais chaque section n’a pas actuellement de gestion des focus et n’est pas opérable au clavier.

Persistance de l’info-bulle de l’outil Inspecter et de la superposition de couleur de grille

Lorsque vous cliquez sur le bouton Inspecter l’outil et que vous vous déplacez dans la page web affichée, l’info-bulle Inspecter change. Pour conserver l’info-bulle actuelle et la superposition de couleur de grille affichées, appuyez longuement sur Ctrl+Alt (Windows, Linux) ou Ctrl+Option (macOS) pendant que vous vous déplacez dans la page web rendue.

Cette technique peut être utile lors de l’utilisation d’une loupe d’écran ou d’autres technologies d’assistance. Si vous ne conservez pas l’info-bulle de l’outil Inspecter, la superposition de pointage change constamment lorsque vous utilisez l’outil Inspecter (bouton Inspecter l’outil).

Consultez Analyser les pages à l’aide de l’outil Inspecter.

L’outil Lighthouse

Lighthouse exécute une série de tests sur un site pour case activée pour des problèmes courants liés aux performances, à l’accessibilité, au RÉFÉRENCEMENT et à un certain nombre d’autres catégories.

Configurer et générer un rapport

  1. Lorsque l’outil Lighthouse est ouvert pour la première fois dans DevTools, le focus est placé sur le bouton Générer un rapport . Par défaut, le formulaire est configuré pour exécuter des rapports pour chaque catégorie à l’aide de l’émulation mobile sur une connexion 3G simulée.

  2. Pour modifier les paramètres du rapport, utilisez Maj+Tab pour mettre le focus sur les paramètres lighthouse, ou revenez en mode Parcourir.

  3. Lorsque vous êtes prêt à exécuter le rapport, revenez au bouton Générer un rapport et appuyez sur Entrée.

  4. Le focus se déplace dans une fenêtre modale avec un bouton Annuler qui vous permet de quitter l’audit. Vous pouvez entendre une série d’écouteurs 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 fieldset élément. Il peut être plus facile de les parcourir en mode Navigation pour déterminer quels contrôles sont associés à chaque section.
  • Il n’y a pas d’écouteur ou d’annonce de région en direct lorsque l’audit est terminé. En règle générale, l’audit prend environ 30 secondes, après quoi vous devriez être en mesure d’accéder aux résultats. L’utilisation du mode Parcourir peut être le moyen le plus simple d’atteindre les résultats.

Le rapport Lighthouse est organisé en sections qui correspondent à 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 passer aux sections pertinentes. Dans chaque section se trouvent des éléments extensibles details , 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 dernier details élément qui contient tous les audits passés.

Pour exécuter un nouvel audit, utilisez Maj+Tab pour quitter le rapport et sélectionnez le bouton Générer un rapport .

Voir aussi

Remarque

Les parties de cette page sont des modifications basées sur le travail créé et partagé par Google et utilisées conformément aux termes décrits dans la licence internationale Creative Commons Attribution 4.0. La page d’origine se trouve ici et est créée par Rob Dodson.

Licence Creative Commons Cette œuvre est concédée sous licence creative commons attribution 4.0 international.