ARIA : attribut aria-details
L'attribut global aria-details
identifie l'élément (ou les éléments) qui fournissent des informations supplémentaires liées à l'objet.
Description
L'attribut aria-details
permet de fournir des informations supplémentaires ou des descriptions complexes à un objet. Il sert à informer les utilisateur·ice·s de technologies d'assistance en leur donnant un accès à un contenu plus détaillé, que ce contenu soit dans le document courant ou sous forme de lien vers une ressource externe.
D'autres propriétés HTML et WAI-ARIA ont des objectifs similaires. L'élément HTML <label>
ainsi que les propriétés aria-label
et aria-labelledby
servent à fournir des libellés courts pour un objet. L'attribut HTML title
et les propriétés aria-description
et aria-describedby
permettent de fournir des descriptions textuelles plus longues. Cependant, lorsque des informations supplémentaires, des descriptions complexes ou un contenu navigable sont nécessaires et disponibles, il faut utiliser l'attribut aria-details
.
L'attribut aria-details
a un objectif similaire à l'attribut HTML longdesc
(jamais vraiment pris en charge), qui permettait de fournir une URL vers une longue description du contenu d'un élément remplacé, mais qui a été déprécié faute de support et à cause de mauvais usages.
L'attribut aria-details
prend comme valeur l'id
, ou une liste d'id
séparés par des espaces, des éléments contenant les informations détaillées. Lorsqu'il est présent, les technologies d'assistance informent l'utilisateur·ice de la disponibilité d'informations étendues et permettent de naviguer vers le contenu référencé.
Les éléments référencés par aria-details
sont censés contenir plus d'informations que ce qui serait normalement fourni via aria-describedby
.
Les éléments référencés par aria-details
doivent être visibles pour tou·te·s les utilisateur·ice·s. aria-details
informe les personnes qui ne pourraient pas repérer visuellement que du contenu explicatif est disponible.
Note :
aria-details
n'a aucun impact sur la description accessible.
Contrairement à aria-describedby
, les éléments référencés par aria-details
ne sont pas utilisés dans la description accessible et ne sont pas transformés en simple chaîne de texte pour les technologies d'assistance. Si le contenu associé n'est pas trop long et que le transformer en texte simple ne fait pas perdre d'information, préférez aria-describedby
. Il est toutefois valide qu'un élément ait à la fois aria-details
et une description via aria-describedby
ou aria-description
.
Exemple
Pour les rôles de définition et de terme, aria-details
serait ajouté sur l'élément term
avec l'id
de l'élément ayant le rôle definition
.
<p>
La notation fonctionnelle <strong>cubic-bezier()</strong> définit une courbe
de <span role="term" aria-details="bezier bezImg">Bézier</span>. Comme ces
courbes sont continues, elles servent souvent à adoucir le début et la fin de
la courbe et sont donc parfois appelées fonctions d'assouplissement.
</p>
<p role="definition" id="bezier">
Une <strong>courbe de Bézier</strong> (prononcé \ ˈbe-zē-ˌā \)
<i aria-description="Prononciation anglaise">BEH-zee-ay</i>) est une courbe
décrite mathématiquement, utilisée en infographie et en animation. La courbe
est définie par un ensemble de points de contrôle, au minimum deux. Les
graphiques et animations web utilisent des courbes de Bézier cubiques, qui
sont des courbes à quatre points de contrôle P<sub>0</sub>, P<sub>1</sub>,
P<sub>2</sub> et P<sub>3</sub>.
</p>
<a
href="bezierExplanation.html"
id="bezImg"
aria-label="Explication de la courbe de Bézier dans les fonctions d'assouplissement CSS">
<img
alt="Courbe de Bézier animée montrant 4 points de contrôle."
src="bezier.gif" />
</a>
Valeurs
- Liste de références d'ID
-
Un
id
ou une liste d'id
séparés par des espaces des éléments qui fournissent ou lient des informations supplémentaires.
Interfaces associées
Element.ariaDetailsElements
-
La propriété
ariaDetailsElements
fait partie de l'interface de chaque élément. Sa valeur est un tableau de sous-classes deElement
qui reflètent les références d'id
dans l'attributaria-details
(avec quelques particularités). ElementInternals.ariaDetailsElements
-
La propriété
ariaDetailsElements
fait partie de l'interface de chaque élément personnalisé. Sa valeur est un tableau de sous-classes deElement
qui reflètent les références d'id
dans l'attributaria-details
(avec quelques particularités).
Rôles associés
Utilisé dans TOUS les rôles.
Spécifications
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA)> # aria-details> |
Voir aussi
- L'attribut HTML
id
- L'attribut ARIA
aria-labelledby
- L'attribut ARIA
aria-describedby
- L'attribut ARIA
aria-description
- L'attribut
alt
des images (alt
) - L'attribut HTML
title