Consultez l’arborescence d’accessibilité pour la prise en charge du clavier et du lecteur d’écran
Plusieurs fonctionnalités DevTools case activée pour la prise en charge du clavier et du lecteur d’écran. L’utilisation de l’outil Inspecter pour case activée l’accessibilité de chaque élément de page individuellement peut prendre beaucoup de temps. Une autre façon de case activée une page web consiste à utiliser l’arborescence d’accessibilité. L’arborescence d’accessibilité indique les informations que la page fournit aux technologies d’assistance telles que les lecteurs d’écran.
L’arborescence d’accessibilité est un sous-ensemble de l’arborescence DOM, qui contient des éléments de l’arborescence DOM qui sont pertinents et utiles pour afficher le contenu d’une page dans un lecteur d’écran. L’arborescence d’accessibilité se trouve sous l’onglet Accessibilité de l’outil Éléments (près de l’onglet Styles).
Pour explorer l’utilisation de l’arborescence d’accessibilité :
Ouvrez la page web de démonstration des tests d’accessibilité dans une nouvelle fenêtre ou un nouvel onglet.
Pour ouvrir DevTools, cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter. Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS). DevTools s’ouvre.
Sélectionnez le bouton Inspecter (
) dans le coin supérieur gauche de DevTools afin que le bouton soit mis en surbrillance (bleu).Dans la page web rendue, dans la section Don , pointez sur le bouton 100 . La superposition de l’outil Inspecter s’affiche.
Dans la page web rendue, cliquez sur le bouton 100 . Dans DevTools, l’outil Éléments s’affiche. L’arborescence DOM affiche l’élément
<div class="donationbutton">100</div>pour le bouton 100 . Le volet Styles affiche les règles CSS qui s’appliquent à l’élément .
À droite de l’onglet Styles , sélectionnez l’onglet Accessibilité . L’arborescence d’accessibilité de l’élément s’affiche et est développée :
Tout élément de l’arborescence qui n’a pas de nom ou a un rôle de generic (par exemple, l’élément <div class="donationbutton">100</div> ) pose problème, car cet élément ne sera pas disponible pour les utilisateurs du clavier ou pour les utilisateurs qui utilisent une technologie d’assistance.