WCAG-kriteeri 2.4.6 Otsikot ja nimilaput (AA) edellyttää, että otsikot kuvaavat selkeästi sisältöä, joka niitä seuraa. Otsikon täytyy olla informatiivinen ja ymmärrettävä siis myös itsenäisesti, irrotettuna kappaleestaan.
Otsikot ovat ruudunlukijakäyttäjien yleisin tapa navigoida
Ruudunlukijalla sisältöä voi navigoida nopeasti muutamalla eri tavalla. Yksi tavoista on kuunnella sisällöstä pelkät otsikot. Silloin otsikoiden sanavalinnat muodostuvat erityisen tärkeiksi. Jos otsikot eivät kuvaa sisältöä kunnolla, on rakennetta vaikea ymmärtää.
Otsikot luovat sivulle jäsennellyn rungon, joka toimii kuin sisällysluettelo. WebAIMin tuoreimman ruudunlukijakyselyn mukaan otsikoiden käyttö tiedon löytämiseen on yleistynyt. Otsikoiden avulla navigointi on kyselyn mukaan edelleen yleisin tapa hakea sisältöä pitkiltä sivuilta. Otsikoilla siis todella on väliä.
Millainen on kuvaava otsikko?
Kuvaileva otsikko kertoo siitä, mitä tulevassa sisällössä kerrotaan. Hyvä otsikko on ytimekäs ja informatiivinen. Se kertoo täsmällisesti, mistä on kyse. Otsikossa kannattaa nimetä käsiteltävä asia mahdollisimman tarkasti ja välttää liian yleisluonteisia termejä.
Tässä pari esimerkkiä tyypillisistä, mutta sisältöä huonosti kuvaavista otsikoista ja niille kuvailevammat vastineet.
- “Lisätietoa”-otsikon kuvaava versio olisi “Lisätietoa palvelun hinnoittelusta”.
- ”Yhteystiedot” -otsikon kuvaava versio olisi ”Asiakaspalvelun yhteystiedot”.
Kuvaava otsikko kertoo parhaimmillaan siis sisällön rajauksista, aiheesta tai näkökulmasta. Kuvaavassa versiossa käyttäjän ei tarvitse arvailla, mitä lisätieto tarkoittaa juuri tässä kontekstissa. Tätä on se kuvailevuus, jota WCAG 2.4.6 edellyttää.
Vinkit kuvaaviin otsikoihin
Käytä semanttisia otsikkotasoja (H1–H6)
Älä muotoile leipätekstin ulkonäköä otsikon näköiseksi. Otsikko on otsikko vain, kun se on merkitty otsikoksi koodissa.
Pidä otsikkotasojen järjestys loogisena ja hierarkkisena
Looginen hierarkia heijastelee sisältöjen suhteita toisiinsa (pää- ja alaotsikoiden suhteita sisällön näkökulmasta). Älä hyppää tasolta H2 suoraan H4:ään, vaan etene hierarkkisesti.
Joskus verkossa törmää sivuihin, joiden kaikki sisältöjen otsikot ovat H2-tasoa, vaikka sisältö olisi selvästi hierarkkista. H2- tason ”pääotsikon” alla oleva ensimmäinen alaotsikko on aina tasoa H3. Epälooginen järjestys vaikeuttaa navigointia.
Lisää kullekin sivulle vain yksi H1-tason otsikko
H1-otsikko kuvaa koko sivun pääaiheen ja alemmat otsikkotasot jäsentävät sitä. H1-otsikko voi olla sama kuin sivun Title. (HTML sallii joustavuutta, mutta tämä malli tukee selkeää rakennetta.)
Lisää otsikko ennen sisältöä
Otsikko kuvaa aina seuraavaa osuutta, ei edellistä.
Siivoa tyhjät otsikot sisällöstä
Sisältöjä syötettäessä sivulle voi jäädä helposti tyhjiä otsikkotasoja kappalejakojen takia. Varmista, ettei sisältöön jää tyhjiä otsikoita turhaan sekoittamaan.
Pidä terminologia johdonmukaisena
Käytä samoista asioista samoja termejä läpi sivuston. Voit esitellä asiasta käytettävät synonyymit, kun mainitset asiasta ensimmäisen kerran. Valitse sitten termi, jota käytät johdonmukaisesti läpi palvelun. Johdonmukainen nimeäminen tekee asiasta tutun ja helpottaa sisällön löytämistä.
Kerro otsikossa vain yksi asia
Jos otsikkoon kasautuu useita eri teemoja, voit todennäköisesti jakaa sisällön kahteen erilliseen alalukuun. Silloin saat yksittäisistä otsikoista kuvaavampia ja sisällöstä kevyemmin silmäiltävää.
Kuvaavat otsikot parantavat hakukonetuloksia
Kun otsikot kuvaavat sisältöä ja jäsennys on looginen, sivun sisällöstä saa helpommin käsityksen silmäilemällä. Tästä on hyötyä myös hakukoneoptimoinnissa eli SEOssa. Hakukoneet hyödyntävät otsikoita sisällön ymmärtämiseen ja silloin selkeä sekä hierarkkinen otsikkorakenne on todettu tehokkaimmaksi.
