Otsikot

** Tällä sivulla on alussa sisällysluettelo sivun sisältöön. Loppuun on koottu tiivistelmä sivun ohjeista. Vertaa sivun rakennetta Linkit-sivuun, jossa on erilainen rakenne. Kerro kommenttisi Facebook-ryhmässä tai lähetä sähköpostia. **

Hyvä otsikointi parantaa saavutettavuutta

Otsikoilla on erittäin suuri merkitys verkkosivujen helppolukuisuuteen ja saavutettavuuteen ylipäänsä. Otsikointi vaikuttaa yleisesti verkkosivun luettavuuteen ja silmäiltävyyteen. Looginen ja riittävä väliotsikoiden käyttö helpottaa sivun sisällön hahmottamista ja auttaa jäsentämään tekstiä.

Käytä runsaasti väliotsikoita

Otsikot tekevät teksistä helposti silmäiltävää ja selailtavaa. Verkkotekstissä otsikoita kannattaa käyttää reilusti, sillä silmä hakeutuu leipätekstistä erottuviin elementteihin, kuten otsikoihin. Aina kun tekstissä aletaan puhua uudesta asiasta tai näkökulmasta, kannattaa kappaleen alkuun laittaa otsikko.

Kirjoita kuvaavia otsikoita

Koska ihmiset tutkivat tyypillisesti sivun sisältöä otsikoita silmäilemällä tai selailemalla, otsikoiden kannattaa olla kuvaavia ja täsmällisiä.

Mieti, mikä on alla olevan tekstin keskeisin asia ja kirjoita se tiiviisti otsikkoon. Voit kokeilla lukea sivulta pelkät otsikot. Saatko niiden avulla käsityksen sivun sisällöstä kokonaisuutena?

Tärkein sana otsikon alkuun?

Otsikon sisäistä rakennetta ja sanajärjestystä kannattaa myös miettiä. Jos sijoittaa tärkeimmän sanan tai asian otsikon alkuun, otsikoiden selailu ja silmäily on todennäköisesti kaikkein vaivattominta. Esimerkiksi sivulla, joka käsittelee erilaisia tapoja varautua onnettomuuksiin, kannattaa kirjoittaa mieluummin ”Tulipaloon varautuminen” ja ”Maanjäristykseen varautuminen” kuin ”Varautuminen tulipaloon” ja ”Varautuminen maanjäristykseen”. Riippuu tietysti asiayhteydestä ja otsikon aiheesta, onko sanajärjestyksen vaihtaminen mahdollista.

Tärkeintä on joka tapauksessa pitää otsikko mahdollisimman selkeänä ja täsmällisenä.

Vältä epäselviä otsikoita

Vältä vaikeaselkoisia tai epämääräisiä otsikoita. Esimerkiksi ”Lisätietoa”, ”Tutustu tarkemmin” tai ”Toimi näin” eivät ole yleensä kovin informatiivisia otsikoita. Vertauskuvia kannattaa myös välttää asiatekstin otsikoissa.

WCAG-standardi ohjaa kuvaaviin otsikoihin

WCAG-ohjeistuksen kriteeri (2.4.6) ohjeistaa tekemään kuvaavia otsikoita. Tätä voi olla vaikea määritellä tyhjentävästi, koska kuvaavuus on pitkälti laadullinen termi. Kun ottaa huomioon edellä olevan ohjeistuksen otsikoiden kirjoittamisesta, pääsee aika pitkälle.

Tee otsikot editorissa otsikoiksi

On erittäin tärkeää, että otsikot ovat myös html-koodissa otsikoita. Ruudunlukuohjelman käyttäjä saa tällöin oikean käsityksen sivun otsikkorakenteesta. Otsikot myös näkyvät oikeanlaisina riippumatta selaimesta ja laitteesta.

Toinen WCAG:n otsikoita koskeva kriteeri (1.3.1) vaatii oikeaa teknistä toteutusta. Otsikoiden pitää olla ”ohjelmallisesti tunnistettavia” eli käytännössä otsikoiden pitää olla merkattu loogisesti html-koodin otsikkotageilla. Sivun lähdekoodissa otsikot näkyvät näin:

<h1>Ylimmän tason otsikko</h1>

<h2>Toiseksi ylimmän tason otsikko</h2>

<h3>Kolmanneksi ylimmän tason otsikko</h3>

Ja niin edelleen. h-kirjain tulee englannin kielen sanasta heading ja numero tarkoittaa otsikon tasoa.

Tärkeää on myös, että otsikkotasoja käytetään loogisesti: ylätason otsikon alla on alemman tason otsikko tai otsikoita. Eri otsikkotasojen yli ei saa hyppiä: h1-tason otsikon jälkeen tulee h2-tason otsikko tai otsikoita, sitten tarvittaessa sen alle h3-tason otsikoita jne.

Teknisestä näkökulmasta sivulla on vain yksi ylimmän tason eli h1-tason otsikko, joka on käytännössä sivun nimi. Sisällön otsikkotasot alkavat h2-tasolta. Editorissa tämä h2-otsikko voi olla esimerkiksi termillä yläotsikko tai pääotsikko.

Verkkoeditorit auttavat otsikoinnissa

Verkkosivujen julkaisujärjestelmien editorit tekevät html-tagit yleensä automaattisesti. Verkkosivun päivittäjän täytyy siis yleensä vain osata valita editorista sopiva otsikkotaso. Esimerkiksi ”Yläotsikko” tai ”Pääotsikko” voi tuottaa html-koodiin h2-tason otsikon, ”Alaotsikko” h3-tason otsikon.

Hyvä otsikointi parantaa myös hakukonenäkyvyyttä

Kun otsikot on tehty oikein eli otsikko on sisällöltään kuvaava, otsikkorakenne on looginen ja otsikoita on käytetty riittävästi, sivun näkyvyys hakukonetuloksissa paranee.

Panostamalla otsikointiin parannat siis verkkosisällön saavutettavuutta ja löydettävyyttä verkkohaun kautta.

Otsikoiden ulkoasusta vastaa päätoimittaja

Verkkosivua kannattaa katsoa julkaisun jälkeen myös mobiililaitteilla. Jos otsikot rivittyvät oudosti tai jos ylipäänsä otsikoiden ulkoasussa, fontissa tai värissä on mielestäsi korjattavaa, ota yhteys verkkosivuston päätoimittajaan tai pääkäyttäjään, joka vastaa sivuston ja samalla otsikoiden ulkoasusta. Otsikoiden ulkoasu määritellään CSS-tyylitiedostossa, ja päätoimittaja tai pääkäyttäjä varmistaa, että tarvittavat muutokset tehdään tyylitiedostoon.

Älä siis tee itse muutoksia otsikoiden fonttiin, fonttikokoon tai väriin verkkosivun editorissa, vaikka editori antaisi siihen mahdollisuuden. Muutokset eivät välttämättä näy samalla tavalla kaikissa selaimissa.

Tiivistelmä tämän sivun ohjeista

  • Käytä runsaasti väliotsikoita jaksottamaan tekstiä.
  • Kirjoita sisältöä kuvaavia otsikoita. Mieti, mikä on kiteytys otsikon alla olevasta tekstistä ja kirjoita se otsikkoon.
  • Kirjoita napakoita ja selkeitä otsikoita.
  • Sijoita otsikon tärkein asia otsikon alkuun, jos mahdollista. Näin otsikoiden silmäily on helppoa.
  • Lauseotsikot ovat usein helpompia ymmärtää kuin otsikot, joissa ei ole verbiä.
  • Käytä otsikkotasoja. Älä tee otsikoita lihavoimalla tai suurentamalla fonttikokoa, vaan käytä julkaisueditorin otsikkotyylejä tai -muotoiluja.
  • Käytä otsikkotasoja loogisesti. Sivulla on yksi pääotsikko. Sen alla voi olla eri tasojen otsikoita.
  • Älä hypi otsikkotasojen yli: jos käytät esimerkiksi yläotsikkoa, sen alle tulee seuraavaksi alaotsikko, ei alaotsikon alaotsikko.
  • Otsikoiden ulkoasusta vastaa yleensä verkkosivuston päätoimittaja, pääkäyttäjä tai visuaalinen suunnittelija.