Saavutettava sisällön­tuotanto WordPress-verkkosivuilla

Verkkosivujen saavutettavuus mielletään usein tekniseksi asiaksi, joka kuuluu kehittäjille ja suunnittelijoille. Todellisuudessa iso osa verkkosivuston saavutettavuudesta syntyy arjessa: kun kirjoitat blogiartikkelin, lisäät kuvan tai linkität toiselle sivulle. Vaikka sivuston rakenne olisi teknisesti kunnossa, yksikin huolimattomasti lisätty sisältöosio voi tehdä sivusta vaikeakäyttöisen osalle kävijöistä.

Tässä artikkelissa käymme läpi käytännön ohjeet, joita noudattamalla verkkosivujen sisällöntuottaja voi varmistaa, että hänen julkaisema sisältö täyttää WCAG 2.1 AA -tason vaatimukset ja on kaikkien käytettävissä. Jos saavutettavuusdirektiivi ja sen vaatimukset eivät ole vielä tuttuja, kannattaa lukea ensin artikkelimme verkkosivujen saavutettavuudesta.

Miksi saavutettavuus kuuluu myös sisällön­tuottajalle?

Arviolta 15–20 prosenttia ihmisistä käyttää verkkosivustoja jollakin apuvälineellä. Ruudunlukija, näppäimistönavigointi, suurennettu teksti tai heikentynyt värinäkö ovat esimerkkejä tilanteista, joissa huonosti tuotettu sisältö muuttuu käyttökelvottomaksi.

Saavutettavuus ei ole lisäominaisuus. Se on osa sisällön laatua.

Otsikkohierarkia: rakenne ennen ulkonäköä

Otsikot eivät ole vain visuaalinen elementti. Ruudunlukijat käyttävät otsikkorakennetta sivuston navigointiin: käyttäjä voi hypätä otsikoista toiseen samoin kuin näkevä käyttäjä silmäilee sivua.

Sivulla saa olla vain yksi H1-otsikko, ja se on yleensä sivun tai artikkelin pääotsikko. Alaotsikot merkitään H2-tasolle, ja niiden alla voidaan käyttää H3- ja H4-tasoja. Tärkeintä on, että hierarkia on looginen: tasoista ei voi hypätä, eli H2:n alle ei voi laittaa suoraan H4:ää.

Yleinen virhe on korvata otsikko lihavoidulla tekstikappaleella. Se näyttää visuaalisesti samanlaiselta, mutta ruudunlukija ei tunnista sitä otsikoksi. Käytä aina otsikkotasoja niille tarkoitetuissa kohdissa.

Linkkitekstit: ”lue lisää” ei kerro mitään

Ruudunlukija voi listata kaikki sivun linkit peräkkäin. Jos jokainen linkki sanoo ”lue lisää” tai ”täällä”, käyttäjä ei tiedä, minne kukin linkki vie.

Hyvä linkkiteksti kertoo kohteen ilman ympäröivää tekstiä:

• ”Lue lisää kyläyhdistyksen hankkeesta” ✓
• ”Katso vuoden 2025 toimintasuunnitelma” ✓
• ”Lataa hankkeen loppuraportti (PDF)” ✓
• ”Täällä” ✗
• ”Klikkaa tästä” ✗
• ”Lue lisää” ✗

Hyvä testi: lue linkkiteksti irrallaan kontekstistaan. Jos se kertoo, minne linkki vie, se on saavutettava.

Kun linkki johtaa toiselle sivustolle, se kannattaa avata uuteen välilehteen ja ilmoittaa siitä käyttäjälle. Monessa sisällönhallintajärjestelmässä tämä hoituu automaattisesti, kun avaa linkin asetuksista ”avaa uudessa välilehdessä” -valinnan. WordPress-sivustolla kannattaa lisätä saavutettavuutta parantamaan ikoni linkkiin, joka avautuu uudessa välilehdessä. Ota meihin yhteyttä, jos tarvitset apua WordPress-sivuston saavutettavuuden parantamisessa.

Alt-tekstit: kuvat näkymättömille

Alt-teksti eli kuvavaihtoehto on teksti, jonka ruudunlukija lukee ääneen kuvan tilalla. Se on myös se teksti, joka näkyy, jos kuva ei jostain syystä lataudu.

Hyvä alt-teksti kertoo, mitä kuvassa on ja mikä sen merkitys on sivulla. Se ei aloita sanoilla ”kuva” tai ”valokuva”, koska ruudunlukija kertoo sen joka tapauksessa. Muutama esimerkki:

• ”Kolme henkilöä istuu pyöreän pöydän äärellä” ✓
• ”Hankkeen projektipäällikkö Matti Virtanen esittelee tuloksia” ✓
• ”Kuva kolmesta henkilöstä” ✗
• ”img_2047.jpg” ✗

Jos kuva on puhtaasti koristelullinen eikä lisää informaatiota, alt-teksti jätetään tyhjäksi. Tällöin ruudunlukija ohittaa kuvan kokonaan. Tyhjä alt-teksti on eri asia kuin alt-tekstin puuttuminen: puuttuva alt-teksti aiheuttaa ongelmia, tyhjä on oikea valinta koristekuville.

Vältä myös kuvia, jotka sisältävät tärkeää tekstiä. Infograafit, bannerit ja kuvakaappaukset, joissa on oleellista tietoa, ovat ongelma: niiden tekstiä ei voi suurentaa, kääntää tai lukea ruudunlukijalla. Jos tällaisen kuvan käyttö on välttämätöntä, lisää sama tieto myös tekstimuodossa sivulle.

Videot ja äänisisältö

Kaikilla videoilla tulee olla tekstitys vähintään sivuston pääkielellä. Automaattitekstitys ei riitä sellaisenaan: se sisältää virheitä, jotka voivat muuttaa viestiä merkittävästi. Tarkistettu tekstitys on saavutettavuuden vähimmäisvaatimus.

Jos videon sisältö on keskeinen eikä sitä esitetä muualla sivulla tekstinä, lisää myös lyhyt kirjallinen tiivistelmä videon yhteyteen.

Äänitiedostoille pätee sama periaate: tarjoa tekstiversio, joka sisältää saman informaation kuin audio.

Automaattisesti käynnistyvät äänet tai videot ovat este saavutettavuudelle. Älä lisää sisältöä, joka käynnistyy ilman käyttäjän toimintaa.

Taulukot: vain taulukko­muotoiselle tiedolle

Taulukkoa käytetään vain silloin, kun tieto on aidosti taulukkomuotoista eli siinä on rivejä ja sarakkeita, joiden välisillä suhteilla on merkitystä. Taulukkoa ei pidä käyttää taittoelementtinä tekstin tai kuvien asetteluun.

Jokaisella taulukolla tulee olla otsikkorivi, joka merkitään asianmukaisesti otsikkosoluksi. Tämä kertoo ruudunlukijalle, minkä sarakkeen tai rivin tiedot ovat kyseessä, kun käyttäjä navigoi taulukon läpi solu kerrallaan.

Tekstin rakenne ja selkeys

Pitkät tekstimassat ilman jäsentelyä ovat vaikeita kaikille lukijoille, mutta erityisesti henkilöille, joilla on lukivaikeus tai kognitiivinen erityispiirre.

Muutama periaate auttaa pitämään tekstin selkeänä:

Lyhyet kappaleet ovat helpompia lukea. Yksi ajatus per kappale on hyvä nyrkkisääntö. Väliotsikoita kannattaa käyttää aina kun sisällön aihe vaihtuu. Luettelot sopivat hyvin rinnakkaisten tai peräkkäisten asioiden esittämiseen. Vältä turhaa ammattisanastoa tai selitä termit, jos niiden käyttö on välttämätöntä.

Värit ja kontrasti

Älä välitä tietoa pelkästään värin avulla. Jos esimerkiksi pakolliset lomakekentät merkitään vain punaisella ilman muuta vihjettä, värisokealle käyttäjälle merkintä on näkymätön.

Tekstin ja taustan välillä tulee olla riittävä kontrasti. WCAG 2.1 AA -taso edellyttää vähintään 4,5:1 kontrastisuhdetta normaalille tekstille ja 3:1 suurelle tekstille. Kontrastia voit testata ilmaisilla verkkotyökaluilla ennen julkaisua. Olemme kirjoittaneet aiheesta tarkemmin artikkelissa saavutettavat värikontrastit verkkosivuilla, josta myös löytyy työkalu kontrastien testaamiseen.

Älä muuta tekstin tai linkkien värejä ilman hyvää syytä. Sivustolle valitut värit on yleensä valittu saavutettavuutta silmällä pitäen, ja niistä poikkeaminen voi rikkoa kontrastivaatimukset.

PDF- ja muut liitetiedostot

Liitetiedostot ovat usein saavutettavuuden sokea piste. PDF, jonka sisältö on skannattu kuvana, on ruudunlukijalle täysin näkymätön.

Saavutettava PDF-tiedosto sisältää valittavaa tekstiä, loogisen otsikkorakenteen, alt-tekstit kuville ja riittävän kontrastin. Jos tiedoston saavutettavaksi tekeminen on työlästä, harkitse vaihtoehtoista esitystapaa: voisiko saman tiedon esittää suoraan verkkosivulla?

Liitetiedoston linkkitekstissä kannattaa mainita tiedostomuoto ja tarvittaessa tiedostokoko: ”Lataa hankkeen loppuraportti (PDF 1,2 Mt)”.

Painikkeet ja toiminta­kehotteet

Toimintakehotteen eli CTA-painikkeen tekstin tulee kuvata toimintaa, ei vain houkutella klikkaamaan. ”Ota yhteyttä”, ”Varaa aika” ja ”Lataa opas” ovat hyviä. ”Klikkaa tästä” tai ”Lue lisää” ovat huonoja samasta syystä kuin huonot linkkitekstitkin.

Käytä aina sivuston valmiita painikeblokkeja. Kuvasta tai muotoillusta tekstikappaleesta tehty ”painike” ei toimi näppäimistönavigoinnin tai ruudunlukijan kanssa oikein.

Kielivalinnat

Jos sivusto on monikielinen, varmista, että lisäämäsi sisältö vastaa sivun kieltä. Väärä kielimerkintä saa ruudunlukijan lukemaan suomenkielistä tekstiä englanniksi tai päinvastoin, mikä tekee tekstistä käsittämätöntä.

Yhteenveto

Ennen kuin painat julkaise-nappia uuden sisällön osalta, käy läpi nämä kohdat:

• Onko sivulla vain yksi H1-otsikko?
• Ovatko otsikkotasot loogisessa järjestyksessä ilman hyppyjä?
• Onko jokaisella kuvalla alt-teksti tai onko se tarkoituksella tyhjä?
• Ovatko linkkitekstit kuvaavia myös ilman ympäröivää tekstiä?
• Onko videoilla tekstitys?
• Sisältääkö liitetiedosto valittavaa tekstiä?
• Onko tekstin ja taustan kontrasti riittävä lisätyissä elementeissä?
• Onko tieto välitetty muullakin tavalla kuin pelkällä värillä?

Saavutettavan sisällön luominen tuo harvoin enemmän työtä, kun se on osa normaalia työtapaa. Suurin osa edellä kuvatuista asioista syntyy luonnostaan, kun niitä on totuttu ajattelemaan osana sisällöntuotantoa. Aloittaminen on yksinkertaista: valitse yksi kohta tästä listasta ja ota se käyttöön seuraavan julkaisun yhteydessä. Jos haluat tarkistaa myös verkkosivustosi muut perusasiat, tutustu kotisivujen tarkistuslistaamme.

Ota meihin yhteyttä, jos yrityksesi kaipaa saavutettavan WordPress-verkkosivuston suunnittelua, sisällöntuotantoa tai muuta digitaalisen markkinoinnin apua!