Rooli Asiakirjarakenne

`definition`

Merkitsee elementin termin määritelmäksi. Yhdistä role="term"-rooliin (tai natiivin <dfn>-elementin kanssa) termin ja määritelmän liittämiseksi. Käytä ensin natiiveja <dl>/<dt>/<dd>- tai <dfn>-elementtejä — ne kantavat semantiikan valmiina.

Käyttötilanteet

Sanastoille ja termi/määritelmä-pareille käytetään natiiveja HTML-kuvauslistoja: <dl> sekä <dt> (termi) ja <dd> (määritelmä). Juoksevassa tekstissä määriteltävälle termille käytetään <dfn>-elementtiä. Molemmat ovat ruudunlukuohjelmien käytettävissä ilman ARIAa.

role="definition" on asianmukainen vain silloin, kun ympäröivä elementti ei voi olla <dd> tai <dfn> — esimerkiksi CMS:ssä, joka renderöi sanastomerkinnät <div>-elementteinä. Yhdistä role="term"-rooliin yhteensopivassa termielementissä.

Rooli kertoo ruudunlukuohjelmille, että elementti sisältää määritelmän (selityksen) erotettuna termistä, jota se määrittelee. Useimmat apuvälineteknologiat tarjoavat määritelmille vain vähän navigaatiotukea roolilukuun vastaamisen lisäksi, joten käytännön hyöty on vaatimaton — natiivit elementit ovat lähes aina riittäviä.

Yleisimmät virheet

role="definition" ilman yhteensopivaa role="term"-roolia. Määritelmällä ei ole termiä, johon kiinnittyä.
Termin merkitseminen role="definition"-roolilla (ja päinvastoin). Oikean yhdistämisen peilikuva.
role="definition" käyttäminen tavallisella <p>-elementillä, joka sattuu määrittelemään jotain. Parempi käyttää <dfn> itse termille tekstissä.
Sanasto rakennettuna role="list"-roolilla ja role="listitem"-rooleilla, joissa jokainen kohta yhdistää termin ja määritelmän yhteen. Käytetään <dl>-elementtiä, jotta termi/määritelmä-parit säilyvät.
<dfn> ilman id-attribuuttia linkkiankkurina. Määritelmät ovat hyödyllisimpiä, kun muut sivut voivat syvälinkata niihin.

Esimerkki

<!-- Suositeltava -->
<dl>
  <dt>ARIA</dt>
  <dd>Accessible Rich Internet Applications, joukko attribuutteja, jotka lisäävät saavutettavuussemantiikan HTML:ään.</dd>
  <dt>APG</dt>
  <dd>ARIA Authoring Practices Guide, W3C:n viiteopas yleisistä widget-malleista.</dd>
</dl>

<!-- Kun natiivit elementit ovat mahdottomia -->
<div role="term" id="aria-term">ARIA</div>
<div role="definition" aria-labelledby="aria-term">
  Joukko attribuutteja, jotka lisäävät saavutettavuussemantiikan HTML:ään.
</div>