Otsikkohierarkia

Otsikkohierarkia on käytäntö, jossa <h1>–<h6>-elementtejä käytetään muodostamaan johdonmukainen jäsennys sivun sisällöstä. Oikein toteutettuna se antaa ruudunlukuohjelmien käyttäjille ilmaisen sisällysluettelon. Väärin toteutettuna (ohitetut tasot, vain koristeelliset otsikot, useita h1-elementtejä, yleiset div-elementit otsikoina) se tekee sivusta käsittämättömän avustavien teknologioiden käyttäjille.

Perusrakenne

<h1>Artikkelin otsikko (yksi per sivu)</h1>
  <h2>Pääosio</h2>
    <h3>Alaosio</h3>
    <h3>Alaosio</h3>
  <h2>Pääosio</h2>
    <h3>Alaosio</h3>
      <h4>Ala-alaosio</h4>

Säännöt:

1. Yksi <h1> per sivu — sivun ensisijainen otsikko. Useammat h1-elementit hämmentävät ruudunlukuohjelmia sivun identiteetin suhteen.
2. Ei ohitettuja tasoja laskeutuessa. <h2>:ta voi seurata <h3> (yksi taso syvemmälle), muttei <h4> (kaksi tasoa syvemmälle). Tason ohittaminen viestii ruudunlukuohjelmalle, että välissä on jotain puuttuvaa.
3. Otsikot heijastavat sisällön rakennetta, eivät visuaalista tyyliä. Jos teksti näyttää isolta, mutta ei ole uuden sisällön otsikko, käytä tyyliteltyä kappaletta, ei otsikkoa.
4. Ei tyhjiä otsikoita. <h2></h2> on merkityksetön. Joko täytä se tai poista se.

Miksi ruudunlukuohjelmat välittävät tästä

Yleisin ruudunlukuohjelmien navigaatiotoiminto on “siirry seuraavaan otsikkoon” — H-näppäin JAWSissa ja NVDAssa, rotorin “Otsikot”-tila VoiceOverissa, otsikkojen lukukontrolli TalkBackissa.

Käyttäjä, joka avaa pitkän artikkelin, painaa H-näppäintä toistuvasti saadakseen käsityksen artikkelin rakenteesta ennen minkään lukemista. Jos otsikot ovat johdonmukaisia, hän saa ilmaisen jäsennyksen tekstistä. Jos otsikot ovat vain koristeellisia tai ohittavat tasoja, hän saa pelkkää kohinaa.

Mitä tuotannossa menee pieleen

• Ei <h1>:tä. Sivulla ei ole ensisijaista otsikkoa. Ruudunlukuohjelmat ilmoittavat sivun otsikon <title>-elementistä, mutta sivun sisäisellä otsikkonavigaatiolla ei ole ankkuria. Yleistä huonosti rakennetuilla CMS-sivuilla, joissa artikkelin otsikko piirretään tyyliteltynä tekstinä, muttei koskaan merkitä <h1>:ksi.
• Useita <h1>-elementtejä. “Hero-otsikko” ja “ensimmäisen osion otsikko” molemmat merkitty <h1>:ksi. Ruudunlukuohjelmien käyttäjät kuulevat kaksi h1:tä eivätkä osaa sanoa, kumpi on sivun otsikko.
• Ohitetut tasot. <h1> → <h3>, koska muotoilu ei halunnut <h2>-kokoista tekstiä. Ruudunlukuohjelmien navigaatio ilmoittaa “puuttuvan otsikkotason”.
• Div-elementit tyyliteltyinä otsikoina. <div class="hed-xl">Osion otsikko</div>. Ruudunlukuohjelma ei saa otsikkoa. Korjaus: käytä oikeaa <hN>-elementtiä, tyylittele CSS:llä.
• Otsikot layoutin välineenä. <h2>:n asettaminen sivupalkin tunnisteeseen, koska se näyttää visuaalisesti otsikolta, mutta tunniste ei ole sisältöterminä otsikko. Käytä tyyliteltyä kappaletta.

Otsikkohierarkian auditointi

Kolme lähestymistapaa:

1. Ruudunlukuohjelman otsikkolista. Avaa Insert+F7 NVDAssa tai VO+U → Otsikot. Näytetyn listan pitäisi toimia järkevänä sivun jäsennyksenä. Jos ei toimi, korjaa koodia.
2. HeadingsMap-selainlaajennus. Renderöi sivun otsikkorakenteen visuaalisesti. Tasot ja aukot käyvät välittömästi ilmi.
3. axe-core-skannaus. Havaitsee puuttuvan h1:n, ohitetut tasot (joissakin konfiguraatioissa) ja tyhjät otsikot.

Miksi yksi h1 per sivu on kiistanalainen

HTML5 ehdotti alun perin, että sisäkkäiset <section>-elementit loisivat omat otsikkoalueensa, sallien useamman <h1>:n. Selaimet ja ruudunlukuohjelmat eivät koskaan toteuttaneet tätä toimintaa. W3C:n WCAG-työryhmä on palannut “yksi h1 per sivu” -ohjeistukseen. Useimmat modernit tyylioppaat ja saavutettavuusauditoinnit noudattavat yhden h1:n sääntöä.