Selkeät rakenteet

Pidä ulkoasu erillään sisällöstä

Painotuotemaailmassa tunnistamme erilaisia tekstin osia ja yksiköitä usein sen perusteella, miltä ne näyttävät. Verkkosisällöt eivät nojaa pelkästään ulkoasuun, vaan verkon merkintäkielillä tekstin osia voi merkitä semanttisesti, eli antaa osille merkityksen, jonka myös tietokoneet osaavat tulkita ja välittää. Näin hekin, jotka eivät näe muotoiluja, saavat tiedon siitä, kun tekstissä esiintyy vaikkapa otsikko tai taulukko.

Sisältöjä tekevän kannalta tämä tarkoittaa, että visuaalisesti esimerkiksi otsikolta tai luettelolta näyttävät asiat täytyy ohjelmallisesti merkitä sellaisiksi. Näin tieto niistä välittyy myös heille, jotka tutkivat verkkosisältöjä apuvälineiden kuten ruudunlukuohjelmien välityksellä. Se, miten sisällöt merkitään, riippuu sisällön tyypistä ja julkaisujärjestelmästä. Tekstinkäsittelyohjelmissa vastaus on tyylien ja työkalujen käyttäminen tekstin muotoiluun. Verkkotekstien, esimerkiksi uutisten tai blogikirjoitusten, muotoilussa tulee käyttää oikeita html-merkintöjä tai editorin tyylejä, jotka tuottavat koodiin oikeat merkinnät.

Tässä osiossa annetaan ohjeita tekstimuotoisen verkkosisällön saavutettavuuteen: otsikointi ja hyvän otsikon muotoilu, linkit ja linkkien nimeäminen sekä luetteloiden ja taulukoiden käyttäminen saavutettavasti. Kuva- ja äänitiedostojen sekä erilaisten asiakirjojen saavutettavuuteen on vinkkejä omissa osioissaan.

Ohjeita saavutettaviin rakenteisiin

Hyvä otsikointi parantaa saavutettavuutta

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.

Hyvä linkki ei johda harhaan

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ä

Nykyään kuvia käytetään linkkeinä melko paljon. Tällöin kuvan vaihtoehtoisen tekstin laatimisessa pitää huomioida kuvan sisällön lisäksi kuvan funktio eli se, että kuva toimii myös linkkinä.

Lisää ohjeita kuvalinkkien vaihtoehtoisten tekstien kirjoittamisesta

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 konventionaalinen 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.