Rol Documentstructuur

`definition`

Markeert een element als de definitie van een term. Combineer met role="term" (of natief <dfn>) om de term aan de definitie te koppelen. Gebruik bij voorkeur natief <dl>/<dt>/<dd> of <dfn> — die bevatten de semantiek al van zichzelf.

Wanneer gebruiken

Voor woordenlijsten en term-definitieparen gebruikt men de native HTML-beschrijvingslijst: <dl> met <dt> (term) en <dd> (definitie). Voor een inline term die in lopende tekst wordt gedefinieerd, gebruikt men <dfn>. Beide worden zonder ARIA aan schermlesers blootgesteld.

role="definition" is alleen passend wanneer het omringende element geen <dd> of <dfn> kan zijn — bijvoorbeeld in een CMS dat woordenlijstitems als <div> weergeeft. Combineer het met role="term" op het bijbehorende termelement.

De rol vertelt schermlesers dat het element een definitie bevat (de uitleg), los van de term die wordt gedefinieerd. De meeste hulptechnologie biedt weinig extra navigatie voor definities buiten het aankondigen van de rol, dus de praktische meerwaarde is bescheiden — de native elementen volstaan vrijwel altijd.

Veelvoorkomende fouten

role="definition" zonder een gekoppeld role="term". De definitie heeft geen term om aan te koppelen.
De term markeren als role="definition" (en omgekeerd). Spiegelbeeld van de correcte koppeling.
role="definition" gebruiken op een generiek <p>-element van lopende tekst dat toevallig iets definieert. Gebruik liever <dfn> op de term zelf in de tekst.
Een woordenlijst opgebouwd met role="list" van role="listitem" waarbij elk item term en definitie samensmelts. Gebruik een <dl> zodat de term-definitiekoppeling behouden blijft.
<dfn> zonder id om links naar te verankeren. Definities zijn het nutst wanneer andere pagina’s er rechtstreeks naar kunnen doorlinken.

Voorbeeld

<!-- Voorkeur -->
<dl>
  <dt>ARIA</dt>
  <dd>Accessible Rich Internet Applications, een verzameling attributen die toegankelijkheidssemantieken toevoegen aan HTML.</dd>
  <dt>APG</dt>
  <dd>ARIA Authoring Practices Guide, de W3C-referentie van veelgebruikte widgetpatronen.</dd>
</dl>

<!-- Wanneer native elementen onmogelijk zijn -->
<div role="term" id="aria-term">ARIA</div>
<div role="definition" aria-labelledby="aria-term">
  Een verzameling attributen die toegankelijkheidssemantieken toevoegen aan HTML.
</div>