Otsikoinnin merkityksestä


Verkkosivut. muodostuvat kolmella tekniikalla; HTML, CSS ja JavaScript. HTML merkkauksen tehtävänä on toteuttaa sivun rakenne, CSS muotoiluilla toteutetaan sivun ulkoasu ja JavaScrip koodilla tarvittaessa lisätoiminnallisuutta. Tämä jako on tärkeä ymmärtää myös saavutettavuuden kannalta ja on tärkeää myös tavallisille sisällöntuottajille. Tässä artikkelissa käsittelen ainoastaan HTML roolia ja senkin osalta ainoastaan otsikoita.

HTML – miksi sen oikeellisuus on tärkeää?

HTML merkkauksen tehtävä on vain ja ainoastaan muodostaa sivun rakenne. Huomaa, rakenne. Ei ulkoasua.

Kaikki verkkosivun ulkoasuun liittyvä määrittely tehdään CSS tyyleillä. Myös silloin kun et itse ole toteuttanut minkäänlaisia omia tyylimäärittelyjä. Tällöin selaimet käyttävät omia, sisäänrakennettuja, tyylejään ns. ”User Agent Stylesheet” tyylejä. HTML merkkaus kertoo aina vain ja ainoastan mitä kyseinen sisältö sivulla on. Esimerkiksi kuva, tekstikappale, otsikko, linkki, lista jne. Ja tästä syystä käytettävä elementti on aina valittava sen sisällön perusteella. Ei koskaan sen perusteella miltä se näyttäisi sivulla.

Otsikot verkkosivuilla

HTML merkkauksessa otsikot muodostetaan H1 – H6 elementeillä. Sivun otsikko on aina tyypiltään H1 ja niitä saa olla sivulla ainoastaan yksi. Tyypillisesti sivun otsikko muodostuu automaattisesti julkaisujärjestelmän sivun nimestä.

Varsinaisen sisällön otsikoinnissa ylin otsikkotaso on H2. Eli pienempi numero tarkoittaa merkittävämpää otsikkoa ja suurempi numero alaotsikkoa. Vaikka otsikoita on aina tasolle H6 saakka, harvoin käytetään sivuilla h4 syvempää otsikkohierarkiaa. Saa toki käyttää, jos se on tarpeen.

Otsikoiden hierarkia

Otsikoiden tulee olla hierarkkisesti ehjä kokonaisuus. H2 otsikkoa saa seurata toinen H2 tason otsikko tai jos seuraava otsikko on alisteinen H2 tasolle, H3 otsikko. Otsikkotason yli ei saa hypätä eli H2 otsikon jälkeen seuraava otsikko ei saa olla H4 tai alempi taso.

Otsikkotasoja tulee tarkastella myös koko sivun tasolla, ei pelkästään vaikkapa artikkelin tekstin tasolla. Mikäli sivulla on käytetty otsikoita sivupalkeissa, alatunnisteessa (footer) tms. Tulee niiden muodostaa myös yhtenäinen ja ehyt hierarkkinen rakenne.

Miksi otsikot ovat tärkeitä?

Vastaus: Koska otsikot ovat osa sivun rakennetta. Ja avustavat tekniikat perustavat kaiken toimintansa sivun rakenteeseen.

Viimeisimmän ruudunlukijoiden keskuudessa tehdyn käyttäjätutkimuksen mukaan käyttäjät kättävät sivun sisällössä navigoimiseen ja sisältöön tutustumiseen ylivoimaisesti eniten otsikoiden avulla tapahtuvaa navigointia. Ruudunlukija on käyttöliittymä, joka tarjoaa käyttäjille erilaisia käyttötapoja sisältöön tarjoten mm. listauksia sivun linkeistä, otsikoista tai maamerkkielementeistä. Näitä listauksia hyödyntäen käyttäjä voi luoda mielikuvan sivun sisällöstä ja siirtyä haluamaansa sisältökohtaan.

Webaim organisaation viimeisimmän käyttäjätutkimuksen (2023-2024) mukaan yli 70% käyttää otsikoita ensisijaisena keinona hakea sisältöä sivuilta.

Webaim tutkimuksen ggraafi, joka osoittaa, etä yli 70% ruudunlukijan käyttäjistä käyttä sivun otsikointia ensisijaisena keinona hakea sisältöä sivulta.

Otsikko on siis osa sivun rakennetta ja rakenteen on oltava kunnossa, jotta avustavat tekniikat kuten ruudunlukuohjelmat toimisivat oikein. On siis syytä varmistaa, että sivujen tekninen rakenne, HTML-merkkaus, on toteutettu oikein.

HTML merkkaus ja ulkoasu

Saavutettavuustestauksissa törmään säännöllisesti tilanteisiin, joissa sisällöntuottajat ovat valinneet otsikon sillä perusteella, mikä heidän mielestään näyttää parhaalta. Tämä on siis kaikella tapaa väärin. On muistettava, että HTML-elementillä ei ole ulkoasua. Ulkoasu tulee aina CSS muotoiluilla ja ulkoasu tulee suunnitella tarpeen mukaan.

Samalla HTML -elementillä voi olla useita eri ulkoasumäärittelyjä käytössä myös saman sivun sisällä. Eli esimerkiksi H2 tason otsikolla voi olla erilaiset muotoilut (kirjasintyyppi, koko, väri jne.) sen mukaan onko sitä käytetty sivulla artikkelin tekstissä tai vaikkapa alatunnisteessa.

Huolehdi aina siitä, että käytät otsikoita oikein.