Rolle Dokumentstruktur

`definition`

Markiert ein Element als Definition eines Begriffs. Mit role="term" (oder nativem <dfn>) kombinieren, um den Begriff mit seiner Definition zu verknüpfen. Bevorzugt werden native <dl>/<dt>/<dd>- oder <dfn>-Elemente — sie tragen die Semantik von Haus aus.

Anwendungsfälle

Für Glossare und Begriff-/Definitions-Paare empfiehlt sich die native HTML-Beschreibungsliste: <dl> mit <dt> (Begriff) und <dd> (Definition). Für einen Begriff, der inline im Fließtext definiert wird, ist <dfn> geeignet. Beide Elemente werden Screenreadern ohne ARIA zugänglich gemacht.

role="definition" ist nur dann angebracht, wenn das umgebende Element weder <dd> noch <dfn> sein kann — etwa innerhalb eines CMS, das Glossareinträge als <div> ausgibt. In diesem Fall sollte es mit role="term" am zugehörigen Begriff kombiniert werden.

Die Rolle teilt Screenreadern mit, dass das Element eine Definition (die Erklärung) enthält und sich vom Begriff unterscheidet, der definiert wird. Die meisten assistiven Technologien bieten über die bloße Rollenankündigung hinaus kaum zusätzliche Navigation für Definitionen — der praktische Mehrwert ist daher gering, und die nativen Elemente sind fast immer ausreichend.

Typische Fehler

role="definition" ohne ein dazu passendes role="term". Die Definition hat keinen Begriff, dem sie zugeordnet werden kann.
Den Begriff als role="definition" und die Definition als role="term" auszeichnen — eine Vertauschung der richtigen Zuordnung.
role="definition" auf einem generischen <p>-Element verwenden, das zufällig etwas erklärt. Besser ist <dfn> am Begriff selbst innerhalb des Fließtexts.
Ein Glossar mit role="list" aus role="listitem"-Elementen aufbauen, wobei jedes Element Begriff und Definition zusammenwürfelt. Eine <dl> bewahrt die Paarung von Begriff und Definition.
<dfn> ohne id, an die andere Seiten verlinken könnten. Definitionen sind am nützlichsten, wenn sie als Sprungziel verlinkt werden können.

Beispiel

<!-- Bevorzugt -->
<dl>
  <dt>ARIA</dt>
  <dd>Accessible Rich Internet Applications, a set of attributes that add accessibility semantics to HTML.</dd>
  <dt>APG</dt>
  <dd>ARIA Authoring Practices Guide, the W3C reference of common widget patterns.</dd>
</dl>

<!-- Wenn native Elemente nicht möglich sind -->
<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>