Rooli Asiakirjarakenne

`heading`

Merkitsee elementin otsikoksi. Käytä ensin <h1>–<h6>-elementtejä — ne sisältävät oikean semantiikan ja tason automaattisesti. Turvaudu role="heading"-attribuuttiin vain, kun täytyy päivittää elementti, joka ei voi olla <h*>.

Milloin käyttää

Käytä aina ensin <h1>–<h6>-elementtejä. Natiivi otsikkoelementti antaa roolin, tason ja sisäänrakennetun käyttäjäagentin tyylityksen.

role="heading" on sopiva vain, kun natiivi otsikko ei ole mahdollinen — tyypillisesti rajoittuneessa sisällönhallintajärjestelmässä, joka renderöi kaiken tekstin <p>- tai <div>-elementteinä. Tässä tapauksessa TÄYTYY asettaa aria-level lukuun 1–6 (tai suuremmaksi, mutta avustava teknologia ei käytännössä käsittele tasoja yli 6:n).

Älä ohita otsikkotasoja: <h2>-elementin jälkeen ei tule suoraan <h4> ilman välissä olevaa <h3>-elementtiä. Ruudunlukuohjelmien käyttäjät, jotka navigoivat otsikoilla, luottavat siihen, että rakenne on johdonmukainen.

Yleisiä virheitä

role="heading" ilman aria-level-attribuuttia. Rooli edellyttää tason.
Visuaalisesti otsikolta näyttävä teksti (iso lihavoitu teksti) <div>- tai <span>-elementissä ilman otsikkoroolia. Ruudunlukuohjelmien käyttäjät ohittavat ne kokonaan.
Useita <h1>-elementtejä sivulla, kun tarkoitetaan vain yhtä pääotsikkoa. Paras käytäntö on yksi <h1> per sivu, joka nimeää pääsisällön.
Tasojen ohittaminen — hyppääminen h2:sta h4:ään — rikkoo dokumentin rakenteen.
Koristeellinen teksti, joka on muotoiltu otsikon näköiseksi mutta ei tarkoitettu sellaiseksi, merkitty silti otsikoksi. Hämmentää ruudunlukuohjelmien navigointia.

Esimerkki

<!-- Suositeltava -->
<h2>How to file a complaint</h2>

<!-- Vain kun <h2> on mahdoton -->
<div role="heading" aria-level="2">How to file a complaint</div>