Arborescence d'accessibilité

Introduction à l'arborescence d'accessibilité

Alice Boxhall

Dave Gash

Meggin Kearney

Imaginez que vous créiez une interface utilisateur réservée aux utilisateurs de lecteurs d'écran. Ici, vous n'avez pas besoin de créer d'UI visuelle, mais fournissez simplement suffisamment pour le lecteur d'écran.

Ce que vous devez créer est une sorte d'API décrivant la structure de la page, similaire à l'API DOM, mais avec moins d'informations et de nœuds, car une grande partie de ces informations n'est utile que pour la présentation visuelle. Il pourrait ressembler à quelque chose comme ça.

Il s'agit en fait de ce que le navigateur présente au lecteur d'écran. La navigateur prend l'arborescence DOM et la modifie dans un format utile pour les technologies d'assistance. Cette arborescence modifiée est appelée Accessibilité Arborescence.

Vous pourriez visualiser l'arborescence d'accessibilité comme une ancienne page Web. des années 90: quelques images, beaucoup de liens, peut-être un champ et un bouton.

En balayant visuellement une page comme celle-ci, vous bénéficiez d'une expérience semblable à celle ce qu'un utilisateur de lecteur d'écran obtiendrait. L'interface existe, mais elle est simple. et direct, à l'instar d'une interface en arborescence d'accessibilité.

L'arborescence d'accessibilité est celle avec laquelle la plupart des technologies d'assistance interagissent. La le flux fonctionne quelque chose comme ceci.

1. Une application (le navigateur ou une autre application) expose une version sémantique de son UI à une technologie d'assistance via une API
2. La technologie d'assistance peut utiliser les informations qu'elle lit via l'API pour : créer une autre présentation d'interface utilisateur pour l'utilisateur. Par exemple, un lecteur d'écran crée une interface dans laquelle l'utilisateur entend un texte parlé représentation de l'application.
3. La technologie d'assistance peut également permettre à l'utilisateur d'interagir avec l'application dans d'une autre manière. Par exemple, la plupart des lecteurs d'écran fournissent des hooks pour permettre à de simuler facilement un clic de souris ou un appui avec le doigt.
4. La technologie d'assistance renvoie l'intention de l'utilisateur (par exemple, "cliquer") à l'application via l'API d'accessibilité. L'application a alors la responsabilité interpréter l'action de manière appropriée dans le contexte de l'interface utilisateur d'origine

Pour les navigateurs Web, il y a une étape supplémentaire dans chaque direction, car le navigateur est en fait une plate-forme pour les applications Web qui s’y exécutent. Le navigateur doit donc traduire l'application Web en arborescence d'accessibilité, et vous devez vous assurer que les événements appropriés sont déclenchés en JavaScript en fonction des actions de l'utilisateur de la technologie d'assistance.

Mais cela relève de la responsabilité du navigateur. Notre travail en tant que développeurs Web est tout simplement d'être au courant de ce problème et de développer des pages Web de ce processus afin de créer une expérience accessible à nos utilisateurs.

Pour ce faire, nous nous assurons d'exprimer correctement la sémantique de nos pages: vous assurer que les éléments importants de la page ont les bonnes pratiques des rôles, des états et des propriétés, et que nous spécifions des noms et des descriptions détaillées. Le navigateur peut alors laisser la technologie d'assistance accéder pour créer une expérience personnalisée.

Sémantique en HTML natif

Un navigateur peut transformer l'arborescence DOM en arborescence d'accessibilité, car une grande partie Le DOM a une signification sémantique implicite. Autrement dit, le DOM utilise du code HTML natif qui sont reconnus par les navigateurs et fonctionnent de manière prévisible sur divers plates-formes. L'accessibilité des éléments HTML natifs tels que des liens ou des boutons est ce qui est géré automatiquement. Nous pouvons profiter de cette accessibilité intégrée en écrivant du code HTML qui exprime la sémantique des éléments de notre page.

Cependant, nous utilisons parfois des éléments qui ressemblent à des éléments natifs, mais qui ne le sont pas. Par exemple, ce "bouton" n’est pas du tout un bouton.

Il peut être construit en HTML de différentes manières : l'une des méthodes ci-dessous.

<div class="button-ish">Give me tacos</div>

Lorsque nous n'utilisons pas un élément bouton réel, le lecteur d'écran n'a aucun moyen de savoir ce sur quoi elle a atterri. Nous devrions également effectuer le travail supplémentaire d'ajouter "tabindex" utilisables uniquement au clavier, car, comme il est codé maintenant, il ne peut être utilisé à l'aide d'une souris.

Nous pouvons facilement résoudre ce problème en utilisant un élément button standard au lieu d'un élément div. L'utilisation d'un élément natif offre également l'avantage de s'occuper du clavier pour nous. Et n'oubliez pas : ne perdez pas votre image les effets simplement parce que vous utilisez un élément natif, vous pouvez appliquer un style aux éléments natifs pour qu'elles s'affichent comme vous le souhaitez, tout en conservant la sémantique implicite et comportemental.

Plus tôt, nous avons noté que les lecteurs d'écran annonceront le rôle, le nom, l'état et la valeur. En utilisant l'élément sémantique, le rôle, l'état et la valeur appropriés sont abordés, mais nous devons également veiller à ce que le nom d'un élément visible.

De manière générale, il existe deux types de noms:

• Les libellés visibles, qui permettent à tous les utilisateurs d'associer un sens à un et
• Les alternatives textuelles, qui ne sont utilisées que lorsqu'un visuel n'est pas nécessaire libellé.

Pour les éléments au niveau du texte, aucune action n'est requise de votre part, car, par définition, comportera du texte. Toutefois, pour les éléments d'entrée ou de contrôle, contenu comme des images, nous devons nous assurer de spécifier un nom. En fait, Proposer des contenus non textuels au format texte est le point fort premier élément de la checklist WebAIM.

L'une des façons d'y parvenir est de suivre la recommandation selon laquelle les données des formulaires les libellés de texte associés ». Il existe deux façons d'associer un libellé à un formulaire tel qu'une case à cocher. Si vous utilisez l'une ou l'autre des méthodes, le texte du libellé devient une cible de clic pour la case à cocher, ce qui est également utile pour la souris pour les utilisateurs d'écrans tactiles. Pour associer un libellé à un élément :

• Placer l'élément d'entrée dans un élément de libellé

<label>
    <input type="checkbox">Receive promotional offers?
</label>

ou

• Utilisez l'attribut for du libellé et faites référence au id de l'élément.

<input id="promo" type="checkbox">
<label for="promo">Receive promotional offers?</label>

Si la case a été correctement libellée, le lecteur d'écran peut signaler que l'élément a un rôle de case à cocher, est coché et s'appelle "Recevoir les offres promotionnelles ?".