Rôle Structure du document

`definition`

Marque un élément comme la définition d'un terme. À associer avec role="term" (ou le natif <dfn>) pour lier le terme à sa définition. Préférez d'abord <dl>/<dt>/<dd> ou <dfn> — ils portent la sémantique nativement.

Quand l’utiliser

Pour les glossaires et les paires terme/définition, utilisez la liste de description HTML native : <dl> avec <dt> (terme) et <dd> (définition). Pour un terme défini dans le fil de la prose, utilisez <dfn>. Ces deux éléments sont exposés aux lecteurs d’écran sans ARIA.

role="definition" ne convient que lorsque l’élément englobant ne peut pas être <dd> ou <dfn> — par exemple dans un CMS qui rend les entrées de glossaire sous forme de <div>. Associez-le avec role="term" sur l’élément correspondant au terme.

Ce rôle indique aux lecteurs d’écran que l’élément contient une définition (l’explication), distincte du terme défini. La plupart des technologies d’assistance offrent peu de navigation supplémentaire pour les définitions au-delà de l’annonce du rôle — la valeur pratique est donc modeste ; les éléments natifs sont presque toujours suffisants.

Erreurs courantes

role="definition" sans role="term" associé. La définition n’a aucun terme auquel se rattacher.
Marquer le terme avec role="definition" (et inversement). C’est l’image miroir du bon mapping.
Utiliser role="definition" sur un <p> générique de corps de texte qui se trouve à définir quelque chose. Mieux vaut utiliser <dfn> sur le terme dans la prose.
Glossaire construit avec role="list" de role="listitem" où chaque élément mélange terme et définition. Utilisez un <dl> pour préserver l’association terme/définition.
<dfn> sans id pour permettre les liens profonds. Les définitions sont plus utiles quand d’autres pages peuvent y pointer directement.

Exemple

<!-- Préféré -->
<dl>
  <dt>ARIA</dt>
  <dd>Accessible Rich Internet Applications, un ensemble d'attributs qui ajoutent une sémantique d'accessibilité au HTML.</dd>
  <dt>APG</dt>
  <dd>ARIA Authoring Practices Guide, la référence W3C des patterns de widgets courants.</dd>
</dl>

<!-- Quand les éléments natifs sont impossibles -->
<div role="term" id="aria-term">ARIA</div>
<div role="definition" aria-labelledby="aria-term">
  Un ensemble d'attributs qui ajoutent une sémantique d'accessibilité au HTML.
</div>