Saa­vu­tet­ta­vien verk­ko­si­vu­jen teks­ti­si­säl­lön muistilista

WCAG-kriteeristön saavutettavuusvaatimukset koskevat monipuolisesti verkkosisältöjä visuaalisuuden, teknisen toteutuksen ja sisällön osalta. Blogistamme löytyy kattavasti kirjoituksia saavutettavuudesta, mutta tässä tekstissä keskityn nimenomaan tekstisisällön tuottamiseen ja verkkosivujen päivittäjän rooliin. Mitä tulee muistaa, kun kirjoittaa uutta sisältöä nettisivuille tai päivittää sivun sisältöä?

Tutustu sivuston ominaisuuksiin

Saavutettavien sisältöjen tekemistä ja päivittämistä sivustolle voi helpottaa kooditasolla. Esimerkiksi osa linkkitekstien ominaisuuksista voidaan viestiä koodissa. Usein tekstieditorissa on myös mahdollista merkitä, että linkki avautuu uuteen välilehteen. Tähän ominaisuuteen voi yhdistää automaattisesti linkkitekstin perään tulevan symbolin, josta esimerkki linkkitekstiosiossa.

PDF- tai muiden tiedostojen upottamiseksi sivulle on voitu luoda oma tyylinsä, jolloin osa tiedoista tulee automaattisesti tietyssä muodossa. Lisäksi on mahdollista merkitä koodissa kuvituskuvat (esimerkiksi artikkelien pääkuvat) ohitettaviksi ruudunlukijoilla. Riippuu siis sivuston ominaisuuksista, mitä kaikkea tulee ottaa huomioon käytännössä.

Kuvien alt-teksti eli vaihtoehtoinen teksti tai tekstivastine

Kuvia lisätessä on tärkeää muistaa, etteivät kaikki sivustolla kävijät näe niitä. Päivittäjän tuleekin pohtia, onko kuva olennaisen tärkeä sivun sisällön ymmärtämisen kannalta. Jos kyseessä on pelkkä koristekuva, joka ei tuo lisäinformaatiota, sen alt-teksti on hyvä jättää tyhjäksi. Jos kuvan sisältö on kuvailtu tekstimuodossa esimerkiksi kuvatekstissä, tällöinkin alt-tekstin voi jättää tyhjäksi.

Alt-tekstien osalta tilannetta monimutkaistaa se, että niitä käytetään myös hakukoneoptimoinnissa. Tällöin pelkkään koristekuvaankin neuvotaan kirjoittamaan sivun sisältöä kuvaava teksti, joka sisältää avainsanan. Esimerkkinä sivu, jonka otsikko on Sopimusneuvottelut ja kuvassa on kaksi kättä, jotka kättelevät. Informaatiosisällöltään olennainen alt-teksti olisi sellainen, jossa kuvaillaan mahdollisimman tarkasti, mitä kuvassa tapahtuu. Hakukoneoptimoinnin kannalta on oleellisempaa, mitä muuta sisältöä kyseisellä sivulla on ja mitä tällä kuvituskuvalla symboloidaan eli tässä esimerkkitapauksessa sopimusneuvotteluita.

Kuten esimerkistä huomaa, saavutettavuus ja hakukoneoptimointi eivät aina kohtaa. Jos sivusto kuuluu esimerkiksi digipalvelulain piiriin, silloin on syytä painottaa saavutettavuusnäkökulmaa kuvien alt-teksteissä. Jos puolestaan sivun sisällön on tärkeää nousta esiin hakukoneissa mahdollisimman hyvin, kannattaa panostaa hakukoneoptimointiin. Jos kuvituskuvat on koodissa merkitty ohitettavaksi ruudunlukijalla, alt-tekstissä voi keskittyä pelkästään hakukoneoptimoinnin näkökulmaan.

Joskus voi olla mahdotonta kuvailla helposti ja lyhyesti tekstinä esimerkiksi monimutkainen, paljon tietoa sisältävä infografiikka. Tällöin voi hyvin tehdä erillisen saavutettavan version kuvalle sen sijaan, että yrittää ahtaa kaiken oleellisen tiedon alt-tekstiin. Se voi olla esimerkiksi erillinen tekstivastine, jossa kuvaillaan kaikki infografiikan sisältämä tieto.

Tekstin muotoilu ja tekstityylit

Kun tekstiä syöttää sivustolle, useimmissa editoreissa on erilaisia vaihtoehtoja tekstin muotoiluun: voi lihavoida, kursivoida ja alleviivata. Usein on myös toteutettu muutama otsikkotyyli tai erilaisia nostotyylejä. Jos tekstiä kopioi esimerkiksi Wordista, tulee tarkistaa, etteivät Wordin muotoilut tule vahingossa mukana.

Etenkin otsikkotyylien kanssa tulee olla johdonmukainen: jos tekstissä on otsikko, tulee se merkitä oikein eli H-otsikkotyylillä, ei esimerkiksi lihavoimalla. Tämä johtuu siitä, että koodin puolella H-otsikot tulkitaan otsikoiksi, lihavoitua tekstiä ei.

Ruudunlukija näkee koodista, mitkä asiat on merkitty otsikoiksi, mikä taas helpottaa ruudunlukijaa käyttävän kävijän navigoimista sivulla. Ruudunlukuohjelmassa on mahdollista verkkoroottorin avulla listata sivulta pelkät otsikot. Jos sivulla ei ole käytetty otsikkotägejä oikein, tämä lista on puutteellinen.

Tekstieditoreissa voi olla harmillisen helppoa myös jättää tyhjiä otsikkotägejä tekstin sekaan, jos tyhjälle riville kappaleiden tai otsikon väliin jää vahingossa muotoiluksi otsikkotyyli. Visuaalisesti sitä on vaikea erottaa, mutta jälleen koodipuolella tyhjä otsikkotägi on huono asia.

Otsikkotasoja tulisi muistaa käyttää hierarkian mukaisessa oikeassa järjestyksessä eli H2-otsikon jälkeen ei hypätä suoraan H4-otsikkoon, vaan väliin tarvitaan H3. H2-otsikkotasoja voi käyttää peräkkäin, jos asiat ovat samanarvoisia, eikä alemmille otsikkotasoille siksi ole tarvetta.

Listat tulisi merkitä listoiksi eli käyttää tekstieditorissa tarjolla olevia luettelomerkkejä tai numeroitua listaa, vaikka listan voi periaatteessa tyylitellä itse tekstin sekaan käyttämällä ranskalaisia viivoja tai numeroita. Oikean tekstityylin käyttö helpottaa jälleen ruudunlukijaa käyttävää kävijää.

Millainen on hyvä linkkiteksti?

Jokaisen linkin tarkoitus on WCAG-kriteerien mukaan käytävä ilmi linkkitekstistä tai linkkitekstistä ja sen kontekstista. Ennen linkin klikkaamista kävijälle tulee kertoa, mitä tapahtuu, kun linkkiä klikkaa. Oletus on, että linkki vie sivuston sisällä jollekin toiselle sivulle. Jos linkistä tapahtuu jotain muuta, se tulee kertoa:

• Avautuuko linkki uuteen selainikkunaan tai välilehteen?
• Viekö linkki sivuston ulkopuolelle?
• Ladataanko linkistä jokin tiedosto?

Itsekin netinkäyttäjänä arvostan sitä, että voin ennen linkin klikkaamista arvioida, onko linkin takana oleva asia sen arvoinen, että haluan ladata vaikkapa PDF-tiedoston.

Miten tämä sitten käytännössä toteutetaan? Pitääkö kaikkien linkkitekstien olla muotoa ”siirryt uuteen välilehteen Ylen sivuille uutiseen, joka käsittelee saavutettavuusdirektiivin valvonnan alkamista syksyllä 2020”? Ei sentään. Osa tiedoista voidaan viestiä ohjelmallisesti koodissa tai vaikkapa symbolein.

Näkyvään linkkitekstiin tulee kuitenkin kirjoittaa oleellinen informaatio linkin kohteesta. Hyvä tapa arvioida linkkitekstin toimivuutta on irrottaa se muusta ympäröivästä kontekstista ja miettiä, ymmärtäisikö linkin tarkoituksen, jos näkisi (tai kuulisi) vain tekstin. Tämäkin perustuu ruudunlukuohjelman käyttötapaan: roottoriin voi listata pelkät sivulta löytyvät linkit. Jos lista täyttyy linkeistä ”tästä”, ”täältä”, ”lue lisää” ja ”näytä kaikki”, informaatioarvo on varsin huono.

”Lue lisää” on varsin yleisesti käytetty linkkiteksti, joka periaatteessa kyllä täyttää WCAG-kriteerin 2.4.4 vaatimuksen, jos linkin ympäröivä kontekstikertoo riittävästi lisätietoa linkistä. Se on kuitenkin helppo korvata tekstissä pidemmällä linkkitekstillä kertomalla, mistä kehotetaan lukemaan lisää, esimerkiksi: ”Lue lisää saavutettavuudesta”.

Asiaa monimutkaistaa se, että samaan kohteeseen johtavalla linkillä tulisi olla aina sama linkkiteksti ja eri kohteisiin johtavilla eri. Eli kahdella linkillä, jotka johtavat vaikkapa Karhu Huolenpito -sivulle, tulisi olla sama linkkiteksti.

Kielioppisäännöillä on merkitystä

Ruudunlukuohjelmat pääsääntöisesti ymmärtävät kielioppisääntöjä. Saavutettavalla sivustolla onkin erityisen tärkeää kiinnittää huomiota siihen, miten esimerkiksi päivämäärät ja lukusanat kirjoitetaan.

Pilkunviilaukselta vaikuttava ero päivämäärän kirjoittamisessa osoittautuu merkittäväksi ruudunlukijalla:

• ”21.10.” luetaan ”kahdeskymmenesensimmäinen lokakuuta”
• ”21.10” ilman jälkimmäistä pistettä luetaan ruudunlukijalla ”kaksikymmentäyksi piste kymmenen”

Kieliopillisesti oikein kirjoitettuna ruudunlukija osaa tulkita luvun päivämääräksi ja lukee sen niin. Väärin kirjoitettu, päivämääräksi tarkoitettu numeroiden ja pisteen yhdistelmä luetaan juuri sellaisena.

Lukusanojen kanssa ymmärrettävyys paranee, kun käytetään oikeaa välimerkkiä:

• Luvun ”1234000” ruudunlukija lukee yksittäisinä numeroina (”yksi kaksi kolme neljä nolla nolla nolla”), mikä tietysti toimii, jos se on tarkoitettu tulkittavaksi yksittäisinä numeroina.
• Luvun ”1,234,000” suomenkielinen ruudunluku lukee numeroina ja pilkkuina, jos asetuksissa on merkitty myös välimerkit luettaviksi.
• Kielioppisääntöjen mukaisen luvun ”1 234 000” ruudunlukuohjelma tulkitsee oikein: ”miljoona kaksisataakolmekymmentäneljätuhatta”

Ensimmäisen esimerkin peräkkäin lueteltujen lukujen pötkö on mielestäni myös näkevän vaikeampi hahmottaa kuin välilyönnein eroteltu.

Moni käytännön vinkki täsmentyy verkkosivuston käyttöliittymän ja päivitysnäkymän mukaan. Autamme mielellämme, jos saavutettavan ja hakukoneoptimoidun sisällön kiemurat mietityttävät!

Kaikki digitaaliseen saavutettavuuteen liittyvät artikkelimme