ARIA : attribut aria-details

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.

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 de Element qui reflètent les références d'id dans l'attribut aria-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 de Element qui reflètent les références d'id dans l'attribut aria-details (avec quelques particularités).

Rôles associés

Utilisé dans TOUS les rôles.

Spécifications

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