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.

Un (très) bref guide sur l'accessibilité

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.

On évoquera souvent ici les personnes avec des handicaps visuels et la façon de rendre le contenu accessible, notamment grâce aux API d'accessibilité 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 ?).

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 (<div> et <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 WAI-ARIA afin de fournir des rôles spécifiques.

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èrements différentes à leur sujet.

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.

Accéder à l'inspecteur d'accessibilité

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

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é »

Par défaut, les fonctionnalités des outils de développement dédiées à l'accessibilité sont désactivée (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 (Mémoire et Performances par exemple). De même, on peut ne pas vouloir diminuer les performances du navigateurs. 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.

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

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é.

Note : 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.

Fonctionnalité du panneau Accessibilité

Le panneau d'accessibilité, lorsqu'il est activé, ressemble à ceci :

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é.

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 :

  • Rôle — le rôle de cet élément sur la page (ex. pushbutton ou footer). Cette valeur peut être celle d'un rôle fourni par le navigateur ou un rôle fourni via l'attribut WAI-ARIA role.
  • 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 textContent tandis que les contrôles de formulaires seront nommés selon l'élément <label> associé.

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 :

  • name — le nom de l'élément, tel qu'indiqué ci-avant.
  • role — le rôle de l'élément, tel qu'indiqué ci-avant.
  • actions — une liste d'actions qui peuvent être effectuées sur l'élément. Ainsi, un bouton poussoir (pushbutton) disposerait de l'action "Press" (pour « appuyer ») tandis qu'un lien aurait l'action "Jump" (pour « aller à »).
  • value — 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 (role: entry) 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 href de l'élément <a>.
  • DOMNode — 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'inspecteur. Survoler cette icône surlignera le nœud sur la page.
    La propriété DOMNode, situé dans l'inspecteur d'accessibilité avec l'icône de ciblage qui permet de mettre en avant l'élément correspondant sur la page.
  • description — une description plus détaillée fournie par l'élément ; c'est généralement la valeur de l'attribut title.
  • help — 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).
  • keyboardShortcut — un raccourci clavier qui permet d'activer l'élément, comme indiqué avec l'attribut accessKey. Cette propriété fonctionne correctement à partir de Firefox 62 (bug 1467381).
  • childCount — le nombre d'élément fils que contient l'élément courant dans la hiérarchie de l'arbre d'accessibilité.
  • indexInParent — 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.
  • states — 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 focusable (recevoir le focus), linked, text selectable, opaque, enabled et sensitive. Pour connaître la liste des différents états internes, voir l'article États dans Gecko.
  • attributes — 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 margin-left et 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 Attributs d'objet dans Gecko.

Note : 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.

Contrôles au clavier

Le panneau Accessibilité est intégralement accessible au clavier :

  • Il est possible d'utiliser la touche tabulation pour passer du bouton de désactivation au panneau gauche au panneau droit.
  • 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.

Fonctionnalités notables associées

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

Options de menu contextuel

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) :

Le menu contextuel dans la zone d'affichage du navigateur avec l'option « Inspecter les propriétés d'accessibilité » surlignée

Le menu contextuel de l'inspecteur du DOM avec l'option « Afficher les propriétés d'accessibilité » surlignée

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.

Note : Certains éléments du DOM n'ont pas de propriétés d'accessibilité. Dans ces cas, l'option Inspecter les propriétés d'accessibilité du menu sera masquée.

Mise en avant des éléments

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. On peut ainsi facilement déterminer la correspondance entre les éléments de la page et les éléments de l'arbre d'accessibilité.

Dans l'exemple suivant, on peut voir que l'image a été surlignée, que son rôle est graphic et que son nom est "Road, Asphalt, Sky, Clouds, Fall". 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.

Contraste des couleurs

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, Web Content Accessibility Guidelines (WCAG) 2.0, indique 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 un petit texte sur une page web. Ainsi, avec le cas suivant :

On voit que le contraste des couleurs du texte sur l'image est de 2.77. 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é. Avec un contraste suffisant, on pourra avoir le résultat suivant :

On voit avec cette image que le niveau de contraste est de 12.63 et que ce nombre est suivi de la note AAA et d'une coche verte qui indique que le texte possède un niveau de contraste supérieur ou égal à 7:1 et qu'il respecte les règles de contraste amélioré, correspondant au niveau AAA.

Sélecteur d'accessibilité

Le panneau Inspecteur pour l'inspection du code HTML 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  Accessibilité 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é.

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 :

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 »

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 »

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 Shift lors du ciblage (l'arbre d'accessibilité pointera vers l'élément survolé tant que la touche Shift sera enfoncée).

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

Scénarios d'utilisation

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 alt ou les champs de formulaire sans libellé) car ils auront la propriété name qui vaudra null. Par exemple :

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é

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..

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

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : mdnwebdocs-bot, hellosct1, SphinxKnight
Dernière mise à jour par : mdnwebdocs-bot,