Selkeät rakenteet

Sisältöön on helppo rakentaa selkeä navigointi, kun kokonaisuus on jäsennelty hyvin. Hyvin pitkät sivut voivat säikäyttää lukijaa, joten yhdellä sivulla kannattaa pitää yhteen aiheeseen tai aihekokonaisuuteen liittyvät asiat. Hyvin pitkäksi venynyt sivu saattaa olla järkevää jakaa osiin. Uudelle tai uusittavalle sivustolle voi myös rakentaa haitarielementin, jonka avulla sivun sisältöä voi avata ja sulkea. Suljettuna haitarielementit tekevät sivusta lyhyemmän ja käyttäjän on helpompi etenkin mobiililaitteen näytöllä saada kokonaiskuva sivun sisällöstä.

Sivujen määrä vaikuttaa luonnollisesti navigaation rakentamiseen: laajalla sivustolla navigaatiossa usein tarvitaan useita alavalikoita, kun suppeammalla sivustolla voi pärjätä osien alavalikolla.

Navigaation linkkien nimien pitää vastata sivujen pääotsikoita. Esimerkiksi kun navigaatiossa on linkki Selkeät rakenteet, linkistä klikkaamalla päätyy sivulle, jonka ensimmäinen otsikko on Selkeät rakenteet. Myös murupolussa on tärkeää näyttää osien otsikot kokonaan.

Otsikoilla on erittäin suuri merkitys verkkosivujen helppolukuisuuteen ja saavutettavuuteen. Hyvin tehty otsikointi parantaa verkkosivun luettavuutta ja silmäiltävyyttä. Looginen ja riittävä väliotsikoiden käyttö helpottaa sivun sisällön hahmottamista ja auttaa jäsentämään tekstiä.

Käytä kylliksi väliotsikoita

Otsikot tekevät tekstistä helposti silmäiltävää ja selailtavaa. Verkkotekstissä otsikoita kannattaa käyttää reilusti, sillä silmä hakeutuu leipätekstistä erottuviin elementteihin.

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ä. Lauseotsikko on usein toimiva.

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?

Vertaa kahta otsikkoa:

Selkeä kieli auttaa ymmärtämään VAI

Selkeä kieli

Kumpi kertoo lukijalle enemmän sisällöstä?

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ä otsikkotasojen hierarkiaa ei rikota: 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. Toiseen suuntaan tasojen yli voi toki hypätä: esimerkiksi luvun viimeinen alaotsikko voi olla tason 4 otsikko, jota seuraa seuraavan luvun pääotsikko tasolla 2.

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 ulkoasua kannattaa muokata keskitetysti

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 korjattavaa, kannattaa ulkoasua muokata keskitetysti. Otsikoiden ulkoasu määritellään CSS-tyylitiedostossa. Jos et voi itse vaikuttaa siihen, varmista, 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.

Linkkien saavutettavuus on keskeistä verkkosisällön saavutettavuudelle. Linkkien saavutettavuudessa pitää huomioida esimerkiksi linkkiteksti, linkin kohde, linkkien visuaalinen erottuvuus ja linkkien määrä sivulla.

Yleensä suositellaan, että linkit avautuisivat samaan välilehteen. Kyseessä on kuitenkin suositus, ei sääntö, joten asiassa voi myös käyttää tapauskohtaista harkintaa.

Kirjoita kuvaavia linkkitekstejä

Linkkiteksti on se teksti, jota klikkaamalla siirrytään linkin kohteeseen. Linkkitekstillä on suuri merkitys, koska se kertoo käyttäjälle, mihin linkki johtaa: usein pitkä verkko-osoite tai hyvin lyhyt teksti ovat kumpikin huonoja vaihtoehtoja.

Linkkien tulisi ulkoasunsa puolesta erottua tekstimassasta. Silloin ne ovat yksi keino auttaa käyttäjää silmäilemään sivun sisältöä. Myös siksi lukuisat ”Lue lisää” -linkit voivat olla turhauttavia ja hyödyttömiä.

Lisäksi näkövammaiset ruudunlukuohjelmien käyttäjät voivat selailla sivua linkistä toiseen liikkumalla tai tarkastella sivulta pelkkää linkkilistaa.

Linkkitekstin pitäisikin kuvata riittävästi kohdetta, johon käyttäjä päätyy linkkiä klikkaamalla.

• Pelkkä ”Lue lisää” on yleensä huono linkkiteksti, sillä se ei kerro käyttäjälle linkin kohteesta mitään.
• Esimerkki toimivasta linkkitekstistä:
  ”Osasta kirjastoja on mahdollista saada Saavutettavuuskirjasto Celian äänikirjoja myös cd-levyillä. Lue lisää cd-levyjen lainaamisesta.”
• Jos linkki ohjaa esimerkiksi pdf- tai word-dokumenttiin, tämä kannattaa kertoa linkkitekstissä.
• Jos linkistä siirrytään esimerkiksi suomenkieliseltä sivustolta englanninkieliselle sivustolle, se kannattaa kertoa linkkitekstissä tai linkin yhteydessä.

Pelkkä verkko-osoite linkkitekstinä

Pelkän verkko-osoitteen (url) laittamista linkkitekstiksi kannattaa yleensä välttää ainakin, jos osoite on pitkä ja vaikea. Se hankaloittaa lukemista eikä ole ruudunlukuohjelmienkaan kannalta yleensä suositeltava vaihtoehto.

Tulostettavissa dokumenteissa verkko-osoitteen (url) kirjoittaminen näkyviin voi olla hyödyllistä, mutta tällöinkin osoitteen pitäisi olla riittävän lyhyt ja selkeä.

Kuvat linkkeinä

Kuvia käytetään linkkeinä melko paljon. Tällöin kuvan vaihtoehtoisen tekstin laatimisessa pitää huomioida kuvan funktio eli se, että kuva johtaa jonnekin.

Ohjeita kuvalinkkien vaihtoehtoisten tekstien kirjoittamisesta on artikkelissa Toiminnallisten kuvien alt-tekstit.

Samaan vai eri välilehteen?

Linkkien pitäisi saavutettavuusohjeistusten mukaan avautua pääsääntöisesti samaan välilehteen tai ikkunaan. Tämä on yleensä käyttäjälle kognitiivisesti selkeämpi vaihtoehto kuin se, että linkin kohde avautuisi uuteen välilehteen tai ikkunaan.

Yleensä julkaisujärjestelmissä onkin oletuksena, että linkki avautuu samaan välilehteen tai ikkunaan. Tällöin sivun päivittäjän ei tarvitse tehdä mitään erityistä.

Jos halutaan, että linkki avautuu uuteen välilehteen tai ikkunaan, sivun päivittäjän täytyy yleensä muokata linkin asetuksia. Monilla sivuilla on käytäntönä, että sivuston sisäiset linkit avautuvat samaan välilehteen, kun taas uudelle sivustolle vievät linkit avautuvat uuteen ikkunaan tai välilehteen. Tällä halutaan varmistaa, että selailija ei hukkaa alkuperäistä sivua. Näin voi toimia, mutta käyttäjälle tulisi linkin yhteydessä kertoa, että se aukeaa uuteen ikkunaan.

Tiedostojen linkittäminen

Monesti linkkien kautta avautuu esimerkiksi pdf- tai word-tiedosto. Tämä kannattaa kertoa myös linkkitekstissä, eli tiedostomuoto kannattaa liittää osaksi linkkitekstiä. Älä tee linkkitekstiä pelkästä tiedostomuodon päätteestä (esim. ”pdf”) – se ei  kerro esimerkiksi ruudunlukijan käyttäjälle lainkaan, minkä niminen tiedosto linkin kautta aukeaa, vaan hän kuulee ainoastaan ”linkki pdf”.

Hyvä tapa on antaa linkin tekstissä tiedoston nimi tai pääotsikko sekä kertoa tiedostotyyppi, vaikkapa ”Vuosikertomus 2019, pdf”.

Linkkien ulkoasu

Hyvä linkki erottuu selkeästi ympäröivästä leipätekstistä. Linkkien tulisi erottua myös muuten kuin pelkän värin perusteella. Värin ohella alleviivaus on tuttu tapa kertoa, että kyseessä on linkki.

Linkin värin tulisi erottua riittävästi sekä leipätekstistä että taustasta, eli siinä tulee olla riittävä kontrasti.

Väreistä ja kontrasteista on kerrottu enemmän osiossa Värit ja kontrastit.

Luettelojen avulla tekstistä voi tehdä helposti silmäiltävää, mikä on verkkoteksteissä tärkeää. Hyödynnä siis luetteloja silloin, kun se on mahdollista. Esimerkiksi ohjeet kannattaa kirjoittaa luetteloina.

Käytä luetteloissa sopivia luettelotyyppejä.

• Jos luettelon eri kohdilla ei ole tiettyä järjestystä, käytä järjestämätöntä listaa <ul>.
• Jos luettelon eri kohdat keskenään järjestyksessä, käytä järjestettyä listaa <ol>.

Ruudunlukuohjelmat tunnistavat luettelot ja kertovat käyttäjille tietoa luettelosta. Osa ruudunlukuohjelmista ilmoittaa, montako kohdetta luettelossa on, osa kertoo, milloin sivulla on luettelomerkki.

Esimerkki järjestämättömästä listasta:

• banaani
• appelsiini
• omena
• ananas
• mandariini

Esimerkki järjestetystä listasta:

WCAG-periaatteet:

1. havaittava
2. hallittava
3. ymmärrettävä
4. lujatekoinen

Liian raskaat ja pitkät listat eivät tue silmäiltävyyttä. Muista, että tietoa voi jakaa osioihin.

Käytä taulukoita vain tiedon esittämiseen. Vältä tekstin tai sisällön asettelua taulukoiden avulla. Älä esitä vertailtavaa tietoa kuvana taulukosta, vaan tee taulukko editorissa taulukkotyökalujen avulla. Hyvin tehtyä taulukkoa voi käyttää myös avustavan teknologian avulla.

Sivusuuntainen vierittäminen on hankalaa, joten taulukoissa olisi hyvä pitää sarakkeiden määrä melko pienenä ja käyttää enemmän rivejä. Jos taulukosta on tulossa hyvin leveä, pohdi, voiko sarakeotsikot muuttaa riviotsikoiksi ja riviotsikot sarakeotsikoiksi.