Libellés et relations ARIA

Utiliser des étiquettes ARIA pour créer des descriptions d'éléments accessibles

Alice Boxhall

Dave Gash

Meggin Kearney

Étiquettes

ARIA fournit plusieurs mécanismes pour ajouter des étiquettes et des descriptions aux éléments. En fait, ARIA est le seul moyen d'ajouter une aide accessible ou un texte descriptif. Examinons les propriétés utilisées par ARIA pour créer des libellés accessibles.

libellé aria

aria-label permet de spécifier une chaîne à utiliser comme libellé accessible. Cela remplace tout autre mécanisme d'étiquetage natif, tel qu'un élément label. Par exemple, si un élément button comporte à la fois du contenu textuel et un élément aria-label, seule la valeur aria-label est utilisée.

Vous pouvez utiliser un attribut aria-label lorsque vous avez une indication visuelle de l'objectif d'un élément, par exemple un bouton qui utilise un graphique au lieu de texte, mais que vous devez tout de même clarifier cette fonction pour toute personne qui ne peut pas accéder à l'indication visuelle, comme un bouton qui n'utilise qu'une image pour indiquer son objectif.

aria-labelledby

aria-labelledby permet de spécifier l'ID d'un autre élément dans le DOM en tant que libellé d'élément.

Cette méthode est semblable à l'utilisation d'un élément label, à quelques différences près.

1. aria-labelledby peut être utilisé pour n'importe quel élément, pas seulement pour les éléments étiquetés.
2. Alors qu'un élément label fait référence à l'élément auquel il étiquette, la relation est inversée dans le cas de aria-labelledby. L'élément étiqueté fait référence à l'élément qui l'étiquette.
3. Un seul élément de libellé peut être associé à un élément étiqueté, mais aria-labelledby peut utiliser une liste d'IDREF pour composer un libellé à partir de plusieurs éléments. L'étiquette sera concaténée dans l'ordre dans lequel les IDREF sont indiqués.
4. Vous pouvez utiliser aria-labelledby pour faire référence à des éléments masqués et qui, autrement, ne se trouveraient pas dans l'arborescence d'accessibilité. Par exemple, vous pouvez ajouter une span masquée à côté d'un élément auquel vous souhaitez ajouter un libellé, et y faire référence avec aria-labelledby.
5. Toutefois, comme ARIA n'affecte que l'arborescence d'accessibilité, aria-labelledby ne vous donne pas le comportement habituel de clic sur un libellé que vous obtenez en utilisant un élément label.

Il est important de noter que aria-labelledby remplace toutes les autres sources de noms d'un élément. Ainsi, si un élément comporte à la fois un aria-labelledby et un aria-label, ou un aria-labelledby et un label HTML natif, le libellé aria-labelledby est toujours prioritaire.

Relations

aria-labelledby est un exemple d'attribut de relation. Un attribut de relation crée une relation sémantique entre les éléments de la page, quelle que soit leur relation DOM. Dans le cas de aria-labelledby, cette relation est "cet élément est libellé par cet élément".

La spécification ARIA répertorie huit attributs de relation. Six d'entre elles, aria-activedescendant, aria-controls, aria-describedby, aria-labelledby et aria-owns, font référence à un ou plusieurs éléments pour créer un lien entre les éléments de la page. Dans chaque cas, la différence réside dans la signification de ce lien et la manière dont il est présenté aux utilisateurs.

aria est propriétaire

aria-owns est l'une des relations ARIA les plus utilisées. Cet attribut nous permet d'indiquer à la technologie d'assistance qu'un élément séparé dans le DOM doit être traité comme un enfant de l'élément actuel, ou de réorganiser les éléments enfants existants dans un ordre différent. Par exemple, si un sous-menu pop-up est positionné visuellement près de son menu parent, mais ne peut pas être un enfant DOM de son parent, car cela affecterait la présentation visuelle, vous pouvez utiliser aria-owns pour présenter le sous-menu en tant qu'enfant du menu parent à un lecteur d'écran.

aria-activedescendant

aria-activedescendant joue un rôle connexe. Tout comme l'élément actif d'une page est celui qui est ciblé, définir le descendant actif d'un élément nous permet d'indiquer à la technologie d'assistance qu'un élément doit être présenté à l'utilisateur comme l'élément ciblé lorsque son parent a réellement le focus. Par exemple, dans une zone de liste, vous pouvez laisser le curseur de page sur le conteneur de la zone de liste, tout en conservant son attribut aria-activedescendant à jour sur l'élément de liste actuellement sélectionné. Ainsi, la technologie d'assistance peut voir l'élément actuellement sélectionné comme s'il s'agissait de l'élément sélectionné.

aria-décrit par

aria-describedby fournit une description accessible de la même manière que aria-labelledby fournit un libellé. Comme aria-labelledby, aria-describedby peut faire référence à des éléments qui ne sont pas visibles, qu'ils soient masqués par le DOM ou aux utilisateurs des technologies d'assistance. Il s'agit d'une technique utile lorsqu'un utilisateur peut avoir besoin d'un texte explicatif supplémentaire, que ce soit pour les utilisateurs de technologies d'assistance uniquement ou pour tous les utilisateurs.

Un exemple courant est un champ de saisie de mot de passe accompagné d'un texte descriptif expliquant les exigences minimales applicables au mot de passe. Contrairement à un libellé, cette description peut ou non être présentée à l'utilisateur. Celui-ci peut choisir d'y accéder, elle peut venir après toutes les autres informations ou être remplacée par autre chose. Par exemple, si l'utilisateur saisit des informations, son entrée est renvoyée en retour et peut interrompre la description de l'élément. Ainsi, une description est un excellent moyen de communiquer des informations supplémentaires, mais pas essentielles ; elle n'interfère pas avec des informations plus critiques telles que le rôle de l'élément.

aria-posinset et aria-setsize

Les autres attributs de relation sont légèrement différents et fonctionnent ensemble. aria-posinset ("position dans l'ensemble") et aria-setsize ("taille de l'ensemble") permettent de définir une relation entre les éléments frères d'un ensemble, comme une liste.

Lorsque la taille d'un ensemble ne peut pas être déterminée par les éléments présents dans le DOM (par exemple, lorsque le rendu différé est utilisé pour éviter d'avoir une longue liste dans le DOM en même temps), aria-setsize peut spécifier la taille réelle de l'ensemble, et aria-posinset peut spécifier la position de l'élément dans l'ensemble. Par exemple, dans un ensemble qui peut contenir 1 000 éléments, vous pouvez indiquer qu'un élément particulier a une aria-posinset de 857, même s'il apparaît en premier dans le DOM, puis utiliser des techniques HTML dynamiques pour vous assurer que l'utilisateur peut explorer la liste complète à la demande.