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.
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 ({{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 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èrement 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.
L'inspecteur d'accessibilité est disponible par défaut à partir de Firefox 63 :
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 (Mémoire et Performances 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.
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.
Le panneau d'accessibilité, lorsqu'il est activé, ressemble à ceci :
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 :
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.textContent tandis que les contrôles de formulaires seront nommés selon l'élément {{htmlelement("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 :
pushbutton) disposerait de l'action "Press" (pour « appuyer ») tandis qu'un lien aurait l'action "Jump" (pour « aller à »).href de l'élément <a>.
title.accessKey. Cette propriété fonctionne correctement à partir de Firefox 62 ({{bug("1467381")}}).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.
Le panneau Accessibilité est intégralement accessible au clavier :
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 "Afficher JSON" :
Cela ouvrira un nouvel onglet avec la partie de l'arbre d'accessibilité chargé dans la visualisation JSON :
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é.
Lorsque les fonctionnalités d'accessibilité sont activées, des fonctionnalités supplémentaires deviennent disponibles.
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) :
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.
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é.
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.
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) 1.4, 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).
Par exemple :
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é.
À 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 :
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.
Voir les bonnes pratiques d'accessibilité CSS et JavaScript pour plus d'informations.
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 :
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 Maj lors du ciblage (l'arbre d'accessibilité pointera vers l'élément survolé tant que la touche Maj 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.
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 :
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..
