Standarder · ARIA

Rolle Dokumentstruktur

definition

Markerer et element som definitionen på et begreb. Parres med role="term" (eller native <dfn>) for at knytte begrebet til dets definition. Brug native <dl>/<dt>/<dd> eller <dfn> først — de medfører semantikken gratis.

Hvornår skal den bruges

Til ordlister og begreb/definition-par bruges den native HTML-beskrivelseliste: <dl> med <dt> (begreb) og <dd> (definition). Til et begreb der defineres løbende i prosa, bruges <dfn>. Begge eksponeres til skærmlæsere uden ARIA.

role="definition" er kun relevant, når det omgivende element ikke kan være <dd> eller <dfn> — for eksempel inde i et CMS, der rendrer ordlisteindgange som <div>. Parres med role="term" på det tilsvarende begrebselement.

Rollen fortæller skærmlæsere, at elementet indeholder en definition (forklaringen), adskilt fra det begreb, der defineres. De fleste hjælpeteknologier tilbyder kun begrænset ekstra navigation for definitioner ud over at annoncere rollen, så den praktiske værdi er beskeden — de native elementer er næsten altid tilstrækkelige.

Typiske fejl

  • role="definition" uden et parret role="term". Definitionen har intet begreb at knytte sig til.
  • Markering af begrebet som role="definition" (og omvendt). Spejlbilledet af den korrekte tilknytning.
  • Brug af role="definition" på et generisk <p>-element i brødtekst, der tilfældigvis definerer noget. Brug <dfn> på selve begrebet i prosaen.
  • Ordliste opbygget med role="list" af role="listitem", hvor hvert element blander begreb og definition. Brug en <dl>, så begreb/definition-parringen bevares.
  • <dfn> uden id til at forankre links. Definitioner er mest nyttige, når andre sider kan linke direkte til dem.

Eksempel

<!-- Foretrukket -->
<dl>
  <dt>ARIA</dt>
  <dd>Accessible Rich Internet Applications, et sæt attributter, der tilføjer tilgængelighedssemantik til HTML.</dd>
  <dt>APG</dt>
  <dd>ARIA Authoring Practices Guide, W3C's reference over almindelige widget-mønstre.</dd>
</dl>

<!-- Når native elementer er umulige -->
<div role="term" id="aria-term">ARIA</div>
<div role="definition" aria-labelledby="aria-term">
  Et sæt attributter, der tilføjer tilgængelighedssemantik til HTML.
</div>