Ruolo Struttura del documento

`definition`

Contrassegna un elemento come definizione di un termine. Va abbinato a role="term" (o al nativo <dfn>) per associare il termine alla sua definizione. Usare prima gli elementi nativi <dl>/<dt>/<dd> o <dfn> — portano già con sé la semantica necessaria.

Quando usarlo

Per glossari e coppie termine/definizione, si consiglia di usare la lista di descrizione HTML nativa: <dl> con <dt> (termine) e <dd> (definizione). Oppure, per un termine definito all’interno di un testo in prosa, si usa <dfn>. Entrambi sono esposti agli screen reader senza richiedere ARIA.

role="definition" è appropriato solo quando l’elemento circostante non può essere <dd> o <dfn> — ad esempio all’interno di un CMS che rende le voci di glossario come <div>. Va abbinato a role="term" sull’elemento che contiene il termine corrispondente.

Il role comunica agli screen reader che l’elemento contiene una definizione (la spiegazione), distinta dal termine che viene definito. La maggior parte delle tecnologie assistive offre una navigazione limitata per le definizioni, al di là dell’annuncio del role, quindi il valore pratico è modesto — gli elementi nativi sono quasi sempre sufficienti.

Errori comuni

role="definition" senza un role="term" abbinato. La definizione non ha alcun termine a cui collegarsi.
Contrassegnare il termine come role="definition" (e viceversa). Si tratta dell’inversione del mapping corretto.
Usare role="definition" su un generico elemento <p> di testo che si limita a definire qualcosa. È preferibile usare <dfn> sul termine stesso all’interno della prosa.
Glossario costruito con role="list" di role="listitem" in cui ogni elemento raggruppa termine e definizione insieme. Occorre usare un <dl> in modo che l’abbinamento termine/definizione sia preservato.
<dfn> senza un id a cui agganciare i link. Le definizioni sono più utili quando altre pagine possono collegarsi direttamente a esse.

Esempio

<!-- Soluzione preferita -->
<dl>
  <dt>ARIA</dt>
  <dd>Accessible Rich Internet Applications, un insieme di attributi che aggiungono semantica di accessibilità all'HTML.</dd>
  <dt>APG</dt>
  <dd>ARIA Authoring Practices Guide, il riferimento W3C dei pattern comuni per i widget.</dd>
</dl>

<!-- Quando gli elementi nativi non sono disponibili -->
<div role="term" id="aria-term">ARIA</div>
<div role="definition" aria-labelledby="aria-term">
  A set of attributes that add accessibility semantics to HTML.
</div>