Utiliser des étiquettes ARIA pour créer des descriptions d'éléments accessibles
É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.
aria-labelledby
peut être utilisé pour n'importe quel élément, pas seulement pour les éléments étiquetés.- Alors qu'un élément
label
fait référence à l'élément auquel il étiquette, la relation est inversée dans le cas dearia-labelledby
. L'élément étiqueté fait référence à l'élément qui l'étiquette. - 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. - 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 unespan
masquée à côté d'un élément auquel vous souhaitez ajouter un libellé, et y faire référence avecaria-labelledby
. - 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émentlabel
.
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.