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 un texte d'aide ou de description accessible. Examinons les propriétés qu'ARIA utilise pour créer des étiquettes 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 button comporte à la fois du contenu textuel et un aria-label, seule la valeur aria-label sera utilisée.

Vous pouvez utiliser un attribut aria-label lorsque vous avez une sorte d'indication visuelle de l'objectif d'un élément, par exemple un bouton qui utilise un graphique plutôt que du texte, mais que vous devez tout de même clarifier cette finalité pour toute personne qui ne peut pas y accéder, par exemple 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 du DOM en tant que libellé d'un élément.

Cette opération s'apparente à l'utilisation d'un élément label, à quelques différences près.

1. aria-labelledby peut être utilisé sur n'importe quel élément, pas seulement sur les éléments étiquetés.
2. Alors qu'un élément label fait référence à l'élément qu'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 auquel un libellé peut être associé, 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 fournis.
4. Vous pouvez utiliser aria-labelledby pour faire référence à des éléments masqués qui, autrement, ne figureraient pas dans l'arborescence d'accessibilité. Par exemple, vous pouvez ajouter un span masqué à 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 des libellés que vous obtenez en utilisant un élément label.

Il est important de noter que aria-labelledby remplace toutes les autres sources de noms pour un élément. Ainsi, par exemple, si un élément possède à 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 eux, 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 façon dont il est présenté aux utilisateurs.

CANNOT TRANSLATE

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 distinct 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 à proximité de son menu parent, mais qu'il 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 sur 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 sélectionné, 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 en tant qu'élément sélectionné lorsque son parent est réellement le focus. Par exemple, dans une zone de liste, vous pouvez laisser le curseur de la page sur le conteneur de zone de liste tout en mettant à jour son attribut aria-activedescendant pour qu'il corresponde à l'élément de liste actuellement sélectionné. L'élément actuellement sélectionné apparaît ainsi à la technologie d'assistance comme s'il s'agissait de l'élément sélectionné.

aria-décrite

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 autrement, qu'ils soient masqués pour le DOM ou pour les utilisateurs de technologies d'assistance. Cette technique est utile lorsqu'un utilisateur a besoin d'un texte explicatif supplémentaire, qu'il ne s'applique qu'aux utilisateurs de technologies d'assistance ou à tous.

Un exemple courant est un champ de saisie de mot de passe qui est accompagné d'un texte descriptif expliquant les exigences minimales en matière de mot de passe. Contrairement à une étiquette, cette description peut ou non être présentée à l'utilisateur. Celui-ci peut choisir d'y accéder, d'y accéder après toutes les autres informations ou d'être ignorée par une autre. Par exemple, si l'utilisateur saisit des informations, son entrée est renvoyée et peut interrompre la description de l'élément. Ainsi, une description est un excellent moyen de communiquer des informations supplémentaires, mais non essentielles. Elle ne gênera pas la diffusion d'informations plus critiques telles que le rôle de l'élément.

aria-posinset et aria-setsize

Les autres attributs de relation sont un peu 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 pouvant 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 d'abord dans le DOM, puis utiliser des techniques HTML dynamiques pour que l'utilisateur puisse explorer la liste complète à la demande.