path: root/files/fr/outils/inspecteur_accessibilite/index.html

---
title: Inspecteur de l'accessibilité
slug: Outils/Inspecteur_accessibilite
tags:
  - Accessibilité
  - DevTools
  - Guide
  - Inspecteur Accessibilié
  - Outils
translation_of: Tools/Accessibility_inspector
---
<div>{{ToolsSidebar}}</div>

<p class="summary">L'inspecteur d'accessibilité permet d'accéder aux informations importantes exposées aux technologies d'assistance sur la page courante via l'arbre d'accessibilité. On peut ainsi de vérifier ce qui manque ou qui nécessite une attention particulière. Dans cet article, nous verrons les principales fonctionnalités de cet outil et comment les utiliser.</p>

<h2 id="Un_(très)_bref_guide_sur_l'accessibilité">Un (très) bref guide sur l'accessibilité</h2>

<p>L'accessibilité est un ensemble de pratiques visant à rendre les sites web utilisables par le plus de personnes possible. Cela consiste à éviter de rendre le site inutilisable par les personnes handicapées d'une quelconque façon et/ou utilisant un réseau à faible débit et/ou parlant une certaine langue, etc.</p>

<p>On évoquera souvent ici les personnes avec des handicaps visuels et la façon de rendre le contenu accessible, notamment grâce aux <a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">API d'accessibilité</a> disponibles dans les navigateurs et qui permettent d'exposer des informations sur les rôles des différents éléments sur la page (est-ce que ce sont des textes, des boutons, des liens, des éléments de formulaires, autre chose ?).</p>

<p>Les éléments HTML qui existent dans le DOM ont une sémantique qui fournit une indication quant aux rôles par défaut qu'ils sont censés avoir. Toutefois, on utilise parfois des éléments avec une sémantique faible, voire neutre ({{htmlelement("div")}} et {{htmlelement("span")}}) afin de construire des contrôles complexes et pour lesquels, la sémantique HTML ne suffit pas à décrire le but de tels contrôles. Dans ces cas de figure, on pourra utiliser les attributs de rôle <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> afin de fournir des rôles spécifiques.</p>

<p>Les rôles des éléments ainsi que les autres informations exposées par les API d'accessibilité sont organisés et présentés au sein d'une structure hiérarchique appelée « l'arbre d'accessibilité ». Cette structure ressemble un peu à l'arbre du DOM mais contient un nombre plus restreint d'éléments et des informations légèrement différentes à leur sujet.</p>

<p>Les outils d'assistance tels que les lecteurs d'écran utilisent ces informations afin de déterminer ce qui se trouve sur une page web, d'indiquer aux utilisateurs ce qui est présent et leur permettre d'interagir avec la page. L'inspecteur d'accessibilité utilise également ces informations afin de pouvoir déboguer les problèmes d'accessibilité grâce aux outils de développement.</p>

<h2 id="Accéder_à_l'inspecteur_d'accessibilité">Accéder à l'inspecteur d'accessibilité</h2>

<p>L'inspecteur d'accessibilité est disponible par défaut à partir de Firefox 63 :</p>

<p><img alt="L'onglet de l'inspecteur d'accessibilité, désactivé, dans les outils de développement de Firefox et avec un bouton intitulé « Activer les fonctionnalités d'accessibilité »" src="https://mdn.mozillademos.org/files/16366/Screen_Shot_2018-11-30_at_11.58.54.png" style="border-style: solid; border-width: 1px; height: 700px; width: 1986px;"></p>

<p>Par défaut, les fonctionnalités des outils de développement dédiées à l'accessibilité sont désactivées (sauf si elles ont été activées depuis un autre onglet ou que le moteur d'accessibilité de Firefox est déjà démarré si vous utiliser un lecteur d'écran ou un outil de test). Ces fonctionnalités sont désactivées, car le moteur d'accessibilité fonctionne en arrière-plan et peut consommer des ressources et diminuer les performances qui sont des indicateurs qu'on pourrait suivre via d'autres onglets (<a href="/fr/docs/Outils/Memory">Mémoire</a> et <a href="/fr/docs/Outils/Performance">Performances</a> par exemple). De même, on peut ne pas vouloir diminuer les performances du navigateur. C'est pour ces raisons que ces fonctionnalités sont désactivées par défaut et qu'il faut les « éteindre » à moins que vous les utilisiez activement.</p>

<p>Vous pouvez activer ces fonctionnalités en cliquant sur le bouton « Activer les fonctionnalités d'accessibilité ».</p>

<p>Une fois le contenu de l'onglet chargé, vous pouvez utiliser le bouton « Désactiver les fonctionnalités d'accessibilité » situé en haut à gauche des outils afin de les désactiver à nouveau. Si vous utilisez un outil qui a besoin du moteur d'accessibilité pour fonctionner, ce bouton sera désactivé.</p>

<div class="note">
<p><strong>Note</strong> : Si vous utilisez les fonctionnalités d'accessibilité dans plusieurs onglets et que vous les désactiver dans un onglet, les fonctionnalités seront désactivées pour tous les onglets.</p>
</div>

<h2 id="Fonctionnalité_du_panneau_Accessibilité">Fonctionnalité du panneau Accessibilité</h2>

<p>Le panneau d'accessibilité, lorsqu'il est activé, ressemble à ceci :</p>

<p><img alt="Le panneau d'accessibilité des outils de développement Firefox, activé, qui montre deux panneaux d'informations ainsi qu'un bouton pour désactiver les fonctionnalités d'accessibilité." src="https://mdn.mozillademos.org/files/16022/accessibility-inspector-panel-on.png" style="border-style: solid; border-width: 1px; height: 654px; width: 1692px;"></p>

<p>Sur le côté gauche, on a un arbre hiérarchique qui représente l'ensemble des éléments de l'arbre d'accessibilité de la page courante. Les éléments qui possèdent des éléments fils disposent d'une flèche sur laquelle on peut cliquer afin d'afficher les éléments fils et d'accéder aux niveaux inférieurs de la hiérarchie. Chaque objet de cet arbre possède deux propriétés qui sont affichées :</p>

<ul>
 <li>Rôle — le rôle de cet élément sur la page (ex. <code>pushbutton</code> ou <code>footer</code>). Cette valeur peut être celle d'un rôle fourni par le navigateur ou un rôle fourni via l'attribut WAI-ARIA <code>role</code>.</li>
 <li>Nom — le nom donné à cet élément sur la page. Le nom dépend de l'élément. Ainsi, la plupart des éléments textuels auront comme nom la valeur de leur attribut <code>textContent</code> tandis que les contrôles de formulaires seront nommés selon l'élément {{htmlelement("label")}} associé.</li>
</ul>

<p>Sur le côté droit, on peut voir des informations supplémentaires à propos de l'élément sélectionné à gauche. Les propriétés visibles sont :</p>

<ul>
 <li><em>name</em> — le nom de l'élément, tel qu'indiqué ci-avant.</li>
 <li><em>role</em> — le rôle de l'élément, tel qu'indiqué ci-avant.</li>
 <li><em>actions</em> — une liste d'actions qui peuvent être effectuées sur l'élément. Ainsi, un bouton poussoir (<code>pushbutton</code>) disposerait de l'action "Press" (pour « appuyer ») tandis qu'un lien aurait l'action "Jump" (pour « aller à »).</li>
 <li><em>value</em> — la valeur de l'élément. Cette propriété peut avoir un sens différent selon le type d'élément. Ainsi, un champ d'un formulaire (<em>role</em>: <em>entry</em>) aurait comme valeur celle qui est saisie dans le champ. Pour un hyperlien, la valeur associée serait l'URL indiquée dansvia l'attribut <code>href</code> de l'élément <code>&lt;a&gt;</code>.</li>
 <li><em>DOMNode</em> — le type de nœud du DOM que représente l'élément de l'arbre d'accessibilité. Vous pouvez cliquer sur l'icône de ciblage situé à la droite de la valeur afin de sélectionner le nœud dans l'<a href="/fr/docs/Outils/Inspecteur">inspecteur</a>. Survoler cette icône surlignera le nœud sur la page.<br>
  <img alt="La propriété DOMNode, située dans l'inspecteur d'accessibilité avec l'icône de ciblage qui permet de mettre en avant l'élément correspondant sur la page." src="https://mdn.mozillademos.org/files/16025/dom-node-target-icon.png" style="height: 55px; width: 294px;"></li>
 <li><em>description</em> — une description plus détaillée fournie par l'élément ; c'est généralement la valeur de l'attribut <code>title</code>.</li>
 <li><em>help</em> — cette propriété n'est pas implémentée par Gecko et renvoie toujours la chaîne de caractères vide. Cette propriété a été retirée de l'inspecteur dans Firefox 62 ({{bug(1467643)}}).</li>
 <li><em>keyboardShortcut</em> — un raccourci clavier qui permet d'activer l'élément, comme indiqué avec l'attribut <code>accessKey</code>. Cette propriété fonctionne correctement à partir de Firefox 62 ({{bug("1467381")}}).</li>
 <li><em>childCount</em> — le nombre d'éléments fils que contient l'élément courant dans la hiérarchie de l'arbre d'accessibilité.</li>
 <li><em>indexInParent</em> — un index qui situe l'élément courant parmi ses voisins par rapport à son élément parent. Si l'élément courant est le premier élément de son élément parent, la valeur de cet index sera 0, si c'est le deuxième élément, cet index vaudra 1, etc.</li>
 <li><em>states</em> — une liste des différents états, liés à l'accessibilité, qui peuvent être appliqués à l'élément courant. Ainsi, un lien pourra avoir les états <em>focusable</em> (recevoir le focus), <em>linked</em>, <em>text selectable</em><em>, opaque, enabled</em> et <em>sensitive</em>. Pour connaître la liste des différents états internes, voir l'article <a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/States">États dans Gecko</a>.</li>
 <li><em>attributes</em> — une liste de l'ensemble des attributs relatifs à l'accessibilité qui sont appliqués à l'élément. Ces attributs peuvent contenir les attributs stylistiques tels que {{cssxref("margin-left")}} et {{cssxref("text-indent")}} mais aussi des d'autres informations : est-ce que l'élément peut être déplacé à la souris, quel est son niveau de titre, etc. Pour connaître la liste des attributs possibles, voir l'article <a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Attrs">Attributs d'objet dans Gecko</a>.</li>
</ul>

<div class="note">
<p><strong>Note :</strong> Les informations mises à disposition sont les mêmes quelle que soit la plateforme. L'inspecteur expose l'arbre d'accessibilité de Gecko plutôt que les informations d'accessibilité de la plateforme sous-jacente.</p>
</div>

<h3 id="Contrôles_au_clavier">Contrôles au clavier</h3>

<p>Le panneau Accessibilité est intégralement accessible au clavier :</p>

<ul>
 <li>Il est possible d'utiliser la touche tabulation pour passer du bouton de désactivation au panneau gauche au panneau droit.</li>
 <li>Lorsqu'un des panneaux a le focus, on peut déplacer le focus entre les différents éléments qui compose ce panneau grâce aux flèches haut et bas du clavier. Les flèches droite et gauche permettent de développer ou de réduire les arborescences.</li>
</ul>

<p> </p>

<h3 id="Afficher_l'arbre_accessibilité_en_JSON">Afficher l'arbre accessibilité en JSON</h3>

<p>Il est possible d'afficher l'arbre accessibilité en JSON avec un clic droit sur une ligne dans le panneau Accessibilité et en cliquant sur "<strong>Afficher JSON" </strong>:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16423/print_to_json.png" style="border: 1px solid black; display: block; height: 238px; margin: 0px auto; width: 800px;"></p>

<p>Cela ouvrira un nouvel onglet avec la partie de l'arbre d'accessibilité chargé dans la visualisation JSON :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16424/accessibility_json.png" style="display: block; height: 586px; margin: 0px auto; width: 800px;"></p>

<p>Une fois ouvert, il est possible de sauvegarder ou copier les données. La visualisation JSON peut également afficher le JSON "brut" dans in onglet séparé.</p>

<h2 id="Fonctionnalités_notables_associées">Fonctionnalités notables associées</h2>

<p>Lorsque les fonctionnalités d'accessibilité sont activées, des fonctionnalités supplémentaires deviennent disponibles.</p>

<h3 id="Options_de_menu_contextuel">Options de menu contextuel</h3>

<p>Une option supplémentaire devient disponible dans le menu contextuel de la page (menu accessible via clic-droit) et dans l'onglet HTML de l'inspecteur (clic-droit sur l'élément) :</p>

<p><img alt="Le menu contextuel dans la zone d'affichage du navigateur avec l'option « Inspecter les propriétés d'accessibilité » surlignée" src="https://mdn.mozillademos.org/files/16028/web-page-context-menu.png" style="border-style: solid; border-width: 1px; height: 798px; width: 1200px;"></p>

<p><img alt="Le menu contextuel de l'inspecteur du DOM avec l'option « Afficher les propriétés d'accessibilité » surlignée" src="https://mdn.mozillademos.org/files/16020/dom-inspector-context-menu.png" style="border-style: solid; border-width: 1px; height: 803px; width: 1200px;"></p>

<p>Lorsque vous choisissez l'option « Inspecter les propriétés d'accessibilité » via le menu contextuel, cela ouvre automatiquement le panneau « Accessibilité » des outils de développement et affiche l'élément dans l'arbre d'accessibilité ainsi que ses propriétés.</p>

<div class="note">
<p><strong>Note</strong> : Certains éléments du DOM n'ont pas de propriétés d'accessibilité. Dans ces cas, l'option <em>Inspecter les propriétés d'accessibilité</em> du menu sera masquée.</p>
</div>

<h3 id="Mise_en_avant_des_éléments">Mise en avant des éléments</h3>

<p>Dans le panneau « Accessibilité », lorsque la souris survole un élément d'accessibilité, on peut voir un surlignage semi-transparent qui recouvre l'élément sur la page. Le nom et le rôle de l'élément seront également affichés via une petite barre d'informations au-dessus de l'élément, au côté d'information de contraste de couleur si approprié. On peut ainsi facilement déterminer la correspondance entre les éléments de la page et les éléments de l'arbre d'accessibilité.</p>

<p>Dans l'exemple suivant, on peut voir que l'image a été surlignée, que son rôle est <em><code>graphic</code></em> et que son nom est <code><em>"Road, Asphalt, Sky, Clouds, Fall"</em></code>. On peut également voir le ratio de contraste des couleurs, ici 3.46, qui apparaît dans la barre d'informations au-dessus de l'image.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16302/image_accessibility.png" style="border: 1px solid black; display: block; height: 347px; margin: 0px auto; width: 451px;"></p>

<h4 id="Contraste_des_couleurs">Contraste des couleurs</h4>

<p>Le ratio de contraste est une information particulièrement utile lors de la conception de la palette de couleurs d'un site web. En effet, si les couleurs ne sont pas suffisamment contrastées, les lecteurs souffrant d'un handicap visuel (daltonisme par exemple) ne pourront pas lire le texte de la page. Les règles d'accessibilité web, <a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Web Content Accessibility Guidelines (WCAG) 1.4</a>, indique pour une conformité AA, que le niveau de contraste 4.5.1 est le ratio minimal à respecter entre une couleur de premier plan et une couleur d'arrière-plan pour le texte standard et 4.5.1 pour les titres (critère 1.4.3). Pour une conformité AAA, les rations sont 7.1 pour le texte, et 4.5.1 pour les titres (critère 1.4.6).<br>
 <br>
 Par exemple :</p>

<p><img alt="A screenshot of colour contrast highlighter where text contrast if below the AA WCAG threshold." src="https://mdn.mozillademos.org/files/16459/Screen_Shot_2019-01-29_at_10.11.13.png" style="display: block; height: 237px; margin: 0px auto; width: 357px;"></p>

<p>Le contraste des couleurs du texte sur l'image est de 2.86. Cette valeur, trop faible, indique que le contraste peut ne pas être suffisant pour la lecture. On peut également voir dans cette illustration le symbole triangulaire qui alerte sur le non-respect des règles d'accessibilité.</p>

<p>À partir de Firefox 65, afficher cette information pour un texte aillant une image de fond complexe (i.e un dégradé), donnera une plage de valeurs de contraste. Par exemple :</p>

<p> </p>

<p><img alt="A screenshot of colour contrast highlighter where for text over gradient background with contrast satisfying the AAA WCAG guidelines." src="https://mdn.mozillademos.org/files/16460/Screen_Shot_2019-01-29_at_10.21.07.png" style="display: block; height: 434px; margin: 0px auto; width: 1484px;"></p>

<p> </p>

<p>On voit avec cette image que le niveau de contraste va de 4.72 à 5.98. Ces nombres sont suivis de la note "AAA" et d'une coche verte qui indique que le texte possède un niveau de contraste supérieur ou égal à 4.5:1 ou plus et qu'il respecte les règles de contraste amélioré, correspondant au niveau AAA.</p>

<p>Voir <a href="/fr/docs/Apprendre/a11y/CSS_and_JavaScript#Color_and_color_contrast">les bonnes pratiques d'accessibilité CSS et JavaScript</a> pour plus d'informations.</p>

<h3 id="Sélecteur_d'accessibilité">Sélecteur d'accessibilité</h3>

<p><a href="/fr/docs/Outils/Inspecteur/Comment/Sélectionner_un_élément">Le panneau Inspecteur pour l'inspection du code HTML</a> possède un sélecteur qui permet de choisir un élément sur la page et de le retrouver dans le DOM. De même, le panneau  <em>Accessibilité</em> possède un bouton de sélection sur lequel on peut appuyer pour ensuite survoler la page et choisir un des éléments affichés afin de retrouver l'élément dans le panneau dans l'arbre d'accessibilité.</p>

<p>Les icônes pour les deux sélecteurs (accessibilité et inspecteur HTML) varient légèrement, comme on peut le voir dans ces deux captures d'écran :</p>

<p><img alt="Le bouton pour l'inspecteur du DOM est encadré et on peut voir la bulle d'informations « Sélectionner un élément de la page »" src="https://mdn.mozillademos.org/files/16024/dom-inspector-picker.png" style="border-style: solid; border-width: 1px; height: 677px; width: 1716px;"></p>

<p><img alt="Le bouton de l'inspecteur d'accessibilité est encadré en rouge et on peut voir la bulle d'informations « Sélectionner un objet accessible de la page »" src="https://mdn.mozillademos.org/files/16023/accessibility-inspector-picker.png" style="border-style: solid; border-width: 1px; height: 677px; width: 1717px;"></p>

<p>Lorsqu'on clique sur un élément de la page grâce à ce sélecteur, on peut voir l'élément sélectionné dans l'arbre d'accessibilité du panneau et le sélecteur est alors désactivé. Pour garder le sélecteur actif tout en voyant les éléments ciblés mis en avant dans l'arbre d'accessibilité, vous pouvez maintenir la touche <kbd>Maj</kbd> lors du ciblage (l'arbre d'accessibilité pointera vers l'élément survolé tant que la touche <kbd>Maj</kbd> sera enfoncée).</p>

<p>Lorsque le sélecteur est activé, vous pouvez le désactivé en appuyant à nouveau sur le bouton ou en appuyant sur la touche <kbd>Esc</kbd>.</p>

<h2 id="Scénarios_d'utilisation">Scénarios d'utilisation</h2>

<p>L'inspecteur d'accessibilité peut s'avérer particulièrement utile pour localiser les problèmes d'accessibilité. On peut l'utiliser pour dénicher les éléments qui n'ont pas d'équivalent textuel correct (les images sans attribut <code>alt</code> ou les champs de formulaire sans libellé), car ils auront la propriété <code>name</code> qui vaudra <code>null</code>. Par exemple :</p>

<p><img alt="Un champ de formulaire surligné dans la page et pour lequel les informations sont affichées dans le panneau accessibilité où on voit que la propriété name est null car cet élément n'a pas de libellé associé" src="https://mdn.mozillademos.org/files/16027/use-case-no-label.png" style="border-style: solid; border-width: 1px; height: 1180px; width: 1182px;"></p>

<p>Cet outil est également utile pour vérifier la sémantique des éléments. On peut utiliser le menu contextuel « Inspecter les propriétés d'accessibilité » afin de vérifier rapidement si un élément possède le bon rôle (autrement dit : est-ce qu'un bouton est vraiment indiqué comme un bouton ? est-ce qu'un lien apparaît réellement comme un lien ? etc..</p>

<p><img alt="Un élément d'interface qui ressemble à un bouton mais pour lequel les informations affichées dans le panneau accessibilité montrent qu'il n'est pas un bouton mais un élément de section pour lequel la propriété name vaut null" src="https://mdn.mozillademos.org/files/16026/use-case-fake-button.png" style="border-style: solid; border-width: 1px; height: 1180px; width: 1182px;"></p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/docs/Apprendre/a11y">Notions fondamentales d'accessibilité</a></li>
 <li><a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité">Informations pour le débogage</a></li>
 <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG">Comprendre les règles WCAG</a></li>
 <li><a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">Notions de base WAI-ARIA</a></li>
 <li><a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">Les API d'accessibilité : un outil clé pour l'accessibilité web</a> (en anglais), écrit par Léonie Watson</li>
</ul>