Les outils pour les développeurs Chrome lancent une arborescence d'accessibilité complète afin de permettre aux développeurs d'en obtenir un aperçu plus complet. Dans cet article, découvrez comment cette arborescence est créée et comment l'utiliser dans votre travail.
Qu'est-ce que l'arborescence d'accessibilité ?
Les technologies d'assistance telles que les lecteurs d'écran utilisent l'API d'accessibilité de Chromium pour interagir avec le contenu Web. Le modèle sous-jacent de cette API est l'arborescence d'accessibilité, c'est-à-dire une arborescence d'objets d'accessibilité que les technologies d'assistance peuvent interroger pour obtenir des attributs et des propriétés, et effectuer des actions sur ces éléments. Les développeurs Web façonnent et manipulent l'arborescence d'accessibilité principalement à l'aide de propriétés DOM telles que les attributs ARIA pour HTML.
Dans les Outils pour les développeurs Chrome, nous fournissons un volet d'accessibilité pour aider les développeurs à comprendre comment leur contenu est exposé aux technologies d'assistance. Concrètement, lorsqu'un nœud est sélectionné dans l'arborescence DOM, les propriétés du nœud d'accessibilité correspondant s'affichent dans le volet, ainsi qu'une vue des ancêtres du nœud et de ses enfants immédiats.
Comment l'arbre est-il créé ?
Avant d'expliquer à quoi ressemble cette nouvelle arborescence complète dans les outils de développement, voyons brièvement ce qu'est l'arborescence d'accessibilité de façon plus concrète. L'arborescence d'accessibilité est une dérivée de l'arborescence DOM. Sa structure est à peu près la même, mais elle a été simplifiée pour supprimer les nœuds sans contenu sémantique, comme un élément <div> uniquement utilisé pour le style. Chaque nœud de l'arborescence possède un rôle tel que Button ou Heading, et souvent un nom qui peut être issu d'attributs ARIA ou dérivé du contenu du nœud. Si nous examinons un document HTML:
<html>
<head>
<title>How old are you?</title>
</head>
<body>
<label for="age">Age</label>
<input id="age" type="number" name="age" value="42">
<div>
<button>Back</button>
<button>Next</button>
</div>
</body>
</html>
Le moteur de rendu de Chromium, nommé Blink, dérive une arborescence d'accessibilité interne à peu près comme suit :
role='rootWebArea' focusable name='How old are you?'
role='genericContainer' ignored
role='genericContainer' ignored
role='labelText'
role='staticText' name='Age'
role='spinButton' editable focusable name='Age' value='42'
role='genericContainer' editable
role='staticText' editable name='42'
role='genericContainer'
role='button' focusable name='Back'
role='staticText' name='Back'
role='button' focusable name='Next'
role='staticText' name='Next'
Notez que cette représentation contient plusieurs nœuds superflus dotés du rôle genericContainer, ce qui contredit l'instruction ci-dessus selon laquelle l'arborescence d'accessibilité est une dérivée simplifiée de l'arborescence DOM. Pourtant, la plupart de ces nœuds ne se trouvent que dans l'arbre interne et ne seraient pas exposés aux technologies d'assistance. Étant donné que les outils de développement collectent leurs informations d'accessibilité directement à partir du processus de moteur de rendu, il s'agit de la représentation sous forme d'arborescence qu'ils gèrent.
Arborescence d'accessibilité complète dans les outils de développement
Nouvelle arborescence d'accessibilité complète synchronisée avec l'arborescence DOM afin que les développeurs puissent basculer entre les deux arborescences. Nous espérons que la nouvelle arborescence vous permettra d'en savoir plus sur son exploration, son utilité et sa facilité d'utilisation.
Maintenant que vous savez comment fonctionne l'arborescence d'accessibilité, vous pouvez utiliser les outils de développement pour voir à quoi ressemble la nouvelle arborescence. Le document HTML suivant, avec un titre, un en-tête et deux boutons, est utilisé pour afficher l'arborescence.
<!DOCTYPE html>
<title>Test</title>
<h1>Heading for example page</h1>
<div>
<button>Back</button>
<button>Next</button>
</div>
L'arborescence précédente ne vous permettrait d'explorer qu'un seul nœud et ses ancêtres.
Désormais, lorsque vous activez/désactivez la nouvelle arborescence, elle remplace l'arborescence DOM et vous permet de voir toute l'arborescence d'accessibilité de la page:
Construction d'arbres paresseux
Pour que l'arborescence soit performante même pour les sites volumineux, elle est construite en différé sur l'interface au fur et à mesure qu'elle est explorée. Une fois qu'un nœud est développé dans l'arborescence, les enfants des nœuds sont récupérés via le protocole CPP (Chrome DevTools Protocol), et l'arborescence est recompilée.
Diffusions en direct
La nouvelle arborescence est en ligne et se met à jour de façon dynamique si l'arborescence d'accessibilité change dans le moteur de rendu. Elle s'intègre au même mécanisme que celui qui informerait la technologie d'assistance des modifications apportées à l'arborescence, et l'utilise pour émettre des événements vers l'interface des outils de développement avec des nœuds mis à jour. En pratique, le backend CDP écoute les mises à jour de l'arborescence, effectue le suivi des nœuds précédemment demandés et envoie des événements à l'interface DevTools si l'un de ces nœuds change.
Le récit de nombreux arbres
Dans la description de l'arborescence d'accessibilité, vous avez découvert comment Blink construit une arborescence d'accessibilité pour le DOM qu'il effectue afin que les outils de développement récupèrent cette arborescence via CDP. Bien que cela soit vrai, nous avons omis quelques complications dans cette description. Dans les faits, il existe de nombreuses façons d'explorer l'arborescence d'accessibilité dans Chromium. Lors de la conception de l'arborescence des outils de développement, nous avons choisi de faire apparaître certains éléments des composants d'accessibilité de Chromium que nous voulions mettre en avant.
Plates-formes
Chaque plate-forme possède une API d'accessibilité différente. Bien que la forme de l'arborescence soit la même sur toutes les plates-formes, l'API permettant d'interagir avec l'arborescence est différente, et les noms des attributs peuvent varier. Les outils de développement affichent l'arborescence interne de Chromium, dans laquelle les rôles et les attributs correspondent généralement à ceux définis dans la spécification ARIA.
Cadres multiples et isolation de sites
Étant donné que Chromium place le contenu de chaque onglet dans différents processus de moteur de rendu, mais qu'il isole également les documents intersites dans différents processus de moteur de rendu, nous devons nous connecter séparément via la CDP à chaque document enfant hors processus et extraire son arborescence d'accessibilité. Nous assemblons ensuite ces sous-arborescences sur l'interface pour donner l'illusion d'une arborescence cohérente, même si elles résident dans des processus de moteur de rendu différents dans Chromium.
Nœuds ignorés et sans intérêt
Nous masquons certains nœuds par défaut: les nœuds ignorés et ceux avec le rôle "générique" sans nom. Ces nœuds n'ont aucune signification sémantique et, dans le cas de nœuds ignorés, ils ne sont pas exposés aux technologies d'assistance. Nous masquons ces nœuds pour éviter d'encombrer l'arborescence. Si ce n'était pas le cas, l'arborescence d'accessibilité pour la plupart des pages Web ressemblerait à ceci:
La mise en garde est que cela signifie essentiellement que nous devons construire un autre arbre que celui disponible sur le backend. Supposons, par exemple, que nous avons les nœuds A, B, C et X, où A a l'enfant X et B, et X un l'enfant C. Si X est un nœud ignoré, nous éliminons X de l'arborescence et créons à la place une arborescence dans laquelle C est un enfant de A.
Sur l'interface, nous construisons l'arborescence complète, y compris les nœuds ignorés, et nous ne les élaisons que juste avant de les afficher. Nous procédons de la sorte pour deux raisons:
- Il est beaucoup plus simple de gérer les mises à jour des nœuds depuis le backend, car nous avons la même arborescence sur les deux points de terminaison. Dans cet exemple, si le nœud B est supprimé, nous recevrons une mise à jour pour le nœud X (puisque ses enfants ont changé), mais si nous avions éliminé ce nœud, nous aurions eu du mal à savoir quoi mettre à jour.
- Elle garantit que tous les nœuds DOM disposent d'un nœud d'accessibilité correspondant. Lorsque l'arborescence est activée, nous sélectionnons le nœud correspondant au nœud actuellement sélectionné dans l'arborescence DOM. Ainsi, pour l'exemple précédent, si l'utilisateur active ou désactive l'arborescence alors que le nœud DOM correspondant à X est sélectionné, nous injectons X entre les nœuds A et B, puis sélectionnons X dans l'arborescence. Cela permet à l'utilisateur d'inspecter le nœud d'accessibilité pour tous les nœuds DOM et de déterminer pourquoi le nœud est ignoré.
Idées futures
Le lancement de la nouvelle arborescence d'accessibilité n'est que le début. Nous avons quelques idées pour de futurs projets qui pourraient nous appuyer sur cette nouvelle vue, mais n'hésitez pas à nous faire part de vos commentaires.
Autres filtres
Comme expliqué ci-dessus, nous filtrons actuellement les nœuds qui ne sont pas intéressants. Nous pourrions proposer un moyen de désactiver ce comportement et d'afficher tous les nœuds, ou fournir d'autres filtres tels que Afficher les nœuds des points de repère ou Afficher les en-têtes.
Mettre en évidence les problèmes d'accessibilité
Nous pourrions intégrer une analyse des "bonnes pratiques en matière d'accessibilité" à l'arborescence et mettre en évidence les problèmes d'accessibilité directement sur les nœuds incriminés.
Afficher les actions d'accessibilité dans les outils de développement
L'arbre que nous affichons actuellement est purement à sens unique: il nous permet d'avoir une idée des informations qui pourraient être transmises aux technologies d'assistance lors de la navigation sur une page Web spécifique. Les actions d'accessibilité représentent la communication dans l'autre direction: elles permettent à la technologie d'assistance d'agir sur l'interface utilisateur présentée. Nous pourrions afficher ces actions dans les outils de développement pour permettre des actions comme "cliquer", "défiler" ou modifier des valeurs sur la page à l'aide de l'API disponible pour la technologie d'assistance.