string

aria-details

Référence un élément qui fournit des informations détaillées sur l'élément courant, sous une forme plus riche qu'un simple texte.

Description

aria-details est similaire à aria-describedby, mais destiné à des descriptions riches (tableaux, listes, images…) plutôt qu’à du texte simple. Il accepte un id référençant l’élément de détail. Les technologies d’assistance signalent à l’utilisateur que des détails supplémentaires sont disponibles.

Syntaxe

<img src="graphique.png"
     alt="Graphique des ventes 2024"
     aria-details="graphique-details" />
<div id="graphique-details">
  <table>…</table>
</div>

Exemples

Figure avec tableau de données associé :

<figure>
  <img src="camembert.svg"
       alt="Répartition du budget"
       aria-details="budget-table" />
  <figcaption>Répartition du budget 2024</figcaption>
</figure>

<table id="budget-table">
  <caption>Détail du budget 2024</caption>
  <tr><th>Poste</th><th>Montant</th></tr>
  <tr><td>Développement</td><td>45 %</td></tr>
  <tr><td>Marketing</td><td>30 %</td></tr>
  <tr><td>Support</td><td>25 %</td></tr>
</table>

Notes

Différence avec aria-describedby : aria-describedby est pour du texte simple ; aria-details est pour des contenus structurés riches (tables, listes, figures). Un seul id est accepté (contrairement à aria-describedby qui en accepte plusieurs).

Support AT : le support de aria-details est encore partiel dans certains lecteurs d’écran. Tester avec NVDA, JAWS et VoiceOver.

Support navigateurs