Saavutettava sisällön­tuotanto WordPress-verkkosivuilla

Saavutettava sisällöntuotanto tarkoittaa sitä, että jokainen julkaistava otsikko, linkki, kuva ja taulukko merkitään niin, että myös ruudunlukijan, näppäimistön tai suurennetun tekstin avulla selaava kävijä saa sisällöstä saman tiedon kuin muutkin. Verkkosivujen saavutettavuus mielletään usein tekniseksi asiaksi, joka kuuluu kehittäjille ja suunnittelijoille. Todellisuudessa iso osa siitä 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ä.

Alla olevat ohjeet kattavat ne WCAG 2.1 AA -tason kohdat, joihin sisällöntuottaja voi itse vaikuttaa WordPressin editorissa. 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?

Maailman terveysjärjestö WHO arvioi, että noin 16 prosentilla maailman väestöstä on merkittävä toimintarajoite. Tilastokeskuksen mukaan Suomessa 12,7 prosenttia 16 vuotta täyttäneistä koki vakavia toimintarajoitteita vuonna 2025. Kaikki heistä eivät käytä apuvälineitä, mutta joukko on selvästi liian suuri sivuutettavaksi. Lisäksi saavutettavuudesta hyötyvät kaikki, jotka lukevat sivua kirkkaassa auringonvalossa, kuuntelevat videota äänettömänä tai selaavat sivustoa hitaalla yhteydellä.

Ruudunlukija, näppäimistönavigointi, suurennettu teksti ja 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.

Ketä saavutettavuusvaatimukset koskevat?

Julkisen sektorin verkkopalveluita on koskenut laki digitaalisten palvelujen tarjoamisesta (306/2019) jo vuosia. Sen soveltamisalaan kuuluvat myös monet julkista rahoitusta saavat yhdistykset ja säätiöt sekä esimerkiksi hankesivustot.

Yksityiselle sektorille vaatimukset laajenivat EU:n esteettömyysdirektiivin myötä. Suomessa direktiivi pantiin täytäntöön lailla eräiden tuotteiden esteettömyysvaatimuksista (102/2023), ja siirtymäaika päättyi 28.6.2025. Käytännössä vaatimukset koskevat kuluttajille myyviä verkkokauppoja sekä esimerkiksi pankki-, liikenne- ja viestintäpalveluita. Mikroyritykset, joissa on alle 10 työntekijää ja joiden liikevaihto tai taseen loppusumma jää enintään kahteen miljoonaan euroon, on rajattu palveluita koskevien vaatimusten ulkopuolelle.

Vaikka yrityksesi jäisi lain soveltamisalan ulkopuolelle, saavutettava sisältö on silti kannattavaa. Sama työ, joka tekee sivusta ruudunlukijalle ymmärrettävän, tekee siitä myös hakukoneelle ja tekoälyhaulle luettavamman: selkeä otsikkorakenne, kuvaavat linkkitekstit ja tekstimuotoinen sisältö ovat molempien perusta.

Saavutettavan sisällön­tuotannon pikataulukko

Taulukko kokoaa yhteen, mitä kukin sisältöelementti vaatii ja mihin WCAG 2.1 -onnistumiskriteeriin vaatimus perustuu.

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ä otsikosta 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. WordPressissä H1 tulee automaattisesti otsikkokentästä, joten sitä ei lisätä uudelleen sisältöön. Alaotsikot merkitään H2-tasolle, ja niiden alla voidaan käyttää H3- ja H4-tasoja. Tärkeintä on, että hierarkia on looginen: tasoista ei hypätä yli, eli H2:n alle ei laiteta suoraan H4:ää.

Yleinen virhe on korvata otsikko lihavoidulla tekstikappaleella. Se näyttää visuaalisesti samanlaiselta, mutta ruudunlukija ei tunnista sitä otsikoksi. Yhtä yleinen virhe on toiseen suuntaan: otsikkotasoa käytetään johdantolauseeseen, joka päättyy kaksoispisteeseen. Otsikko on sisällön nimilappu, ei virke. Jos haluat pohjustaa listaa, kirjoita pohjustus tavallisena kappaleena.

Otsikkorakenteen voi tarkistaa selaimen laajennuksella, joka listaa sivun otsikot puurakenteena. Jos listaus näyttää loogiselta ilman sivun ulkoasua, rakenne on kunnossa.

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. WCAG 2.1 AA -taso edellyttää, että linkin tarkoitus selviää linkkitekstistä yhdessä ympäröivän tekstin kanssa. Käytännön suositus on tiukempi: kirjoita linkkiteksti niin, että se toimii myös irrallaan.

Toimivia linkkitekstejä

• ”Lue lisää kyläyhdistyksen hankkeesta”
• ”Katso vuoden 2025 toimintasuunnitelma”
• ”Lataa hankkeen loppuraportti (PDF)”

Vältettäviä linkkitekstejä

• ”Täällä”
• ”Klikkaa tästä”
• ”Lue lisää” ilman jatkoa
• Paljas verkko-osoite, jonka ruudunlukija lukee merkki kerrallaan

Hyvä testi: lue linkkiteksti irrallaan kontekstistaan. Jos se kertoo, minne linkki vie, se on saavutettava. Vältä myös käyttämästä samaa linkkitekstiä kahdelle eri kohteelle samalla sivulla.

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ä. Toteutamme tämän vakiona rakentamillamme saavutettavilla WordPress-kotisivuilla, jolloin sisällöntuottajan ei tarvitse muistaa sitä erikseen.

Alt-tekstit eli kuvien tekstivastineet

Alt-teksti eli tekstivastine 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. Pituudeksi riittää yleensä yksi virke. Alt-teksti päättyy aina pisteeseen.

Toimivia alt-tekstejä

• ”Kolme henkilöä istuu pyöreän pöydän äärellä.”
• ”Hankkeen projektipäällikkö esittelee tuloksia yleisölle.”

Vältettäviä alt-tekstejä

• ”Kuva kolmesta henkilöstä”
• ”img_2047.jpg”
• Avainsanalista, esimerkiksi ”kotisivut yritykselle hakukoneoptimointi Jyväskylä”

Jos kuva on puhtaasti koristeellinen 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.

Erikoistapaus on kuva, joka toimii linkkinä. Silloin alt-teksti korvaa linkkitekstin, joten se kertoo linkin kohteen eikä kuvan sisältöä. Esimerkiksi logolinkille etusivulle sopii alt-teksti ”Sitrusmedia, etusivulle”.

Vältä 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. Erisnimet, tuotenimet ja alan termit ovat ne kohdat, joissa automaattitekstitys menee useimmiten pieleen.

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.

Muista myös, että pelkkä puhe ei riitä kertomaan kaikkea. Jos videolla näytetään ruudulta jotain, jota ei sanota ääneen, tieto jää näkövammaiselta katsojalta saamatta. Käsikirjoita video niin, että olennainen sanotaan myös ääneen.

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. WordPressin taulukkolohkossa otsikkorivi otetaan käyttöön lohkon asetuksista.

Pidä taulukot yksinkertaisina. Yhdistetyt solut, sisäkkäiset taulukot ja useampi otsikkotaso tekevät taulukosta vaikean seurattavan ruudunlukijalla. Jos taulukko kasvaa monimutkaiseksi, jaa se useaksi pienemmäksi taulukoksi.

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äliotsikkoa käytetään aina, kun sisällön aihe vaihtuu.
• Luettelot sopivat rinnakkaisten tai peräkkäisten asioiden esittämiseen. Käytä editorin luettelolohkoa, älä käsin kirjoitettuja viivoja tai pisteitä.
• Ammattitermit joko vältetään tai selitetään ensimmäisellä esiintymiskerralla.
• Lyhenteet kirjoitetaan auki ensimmäisellä kerralla, esimerkiksi ”hakukoneoptimointi (SEO)”.
• Tekstiä ei tasata molempiin reunoihin, koska epätasaiset sanavälit vaikeuttavat lukemista.

Kirjoitusvirheiden tarkistus kuuluu myös saavutettavuuteen. Ruudunlukija ääntää kirjoitusvirheen sellaisenaan, jolloin sana voi muuttua tunnistamattomaksi.

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. Sama koskee kaavioita, joissa sarjat erotetaan toisistaan vain värillä: lisää myös nimilappu, kuvio tai erilainen viivatyyli.

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, jolla tarkoitetaan vähintään 18 pisteen tai lihavoitua 14 pisteen tekstiä. Kontrastia voit testata ilmaisilla verkkotyökaluilla ennen julkaisua. Olemme kirjoittaneet aiheesta tarkemmin artikkelissa saavutettavat värikontrastit verkkosivuilla, josta löytyy myös 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. Erityisen riskialtis kohta on teksti kuvan päällä: taustakuva vaihtelee, joten kontrasti pitää varmistaa tummennuksella tai taustalaatikolla.

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. Nopein tapa varmistaa nämä on tehdä lähtödokumentti oikein: käytä Wordissa varsinaisia otsikkotyylejä lihavoinnin sijaan, lisää kuville vaihtoehtoiset tekstit ja vie tiedosto ulos vientitoiminnolla, ei tulostamalla PDF-tulostimelle.

Jos tiedoston saavutettavaksi tekeminen on työlästä, harkitse vaihtoehtoista esitystapaa: voisiko saman tiedon esittää suoraan verkkosivulla? Sivulla oleva sisältö on lähes aina saavutettavampi, helpompi päivittää ja parempi hakukonenäkyvyyden kannalta.

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. Valmiissa painikelohkossa on myös riittävä kosketusalue mobiilissa ja näkyvä kohdistusreunus näppäimistökäyttäjälle.

Liikkuvat ja vilkkuvat elementit

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

Sama koskee muuta liikkuvaa sisältöä. Jos animaatio, karuselli tai vierivä tekstinauha kestää yli viisi sekuntia, käyttäjällä on oltava mahdollisuus pysäyttää se. Vilkkuvaa sisältöä ei lisätä lainkaan: yli kolme kertaa sekunnissa vilkkuva elementti voi laukaista epileptisen kohtauksen.

Liike on myös saavutettavuuden ulkopuolella riski. Automaattisesti vaihtuva karuselli ehtii harvoin tulla luetuksi, joten tärkeintä viestiä ei kannata laittaa sen varaan.

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

Yksittäiset vieraskieliset sanat suomenkielisessä tekstissä eivät vaadi erillistä merkintää, jos ne ovat vakiintuneita. Pidemmät vieraskieliset lainaukset ja tekstiosiot sen sijaan merkitään omalla kielimerkinnällään.

Saavutettavan sisällön­tuotannon tarkistuslista

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 tarkistettu tekstitys?
• Sisältääkö liitetiedosto valittavaa tekstiä ja otsikkorakenteen?
• Onko tekstin ja taustan kontrasti riittävä lisätyissä elementeissä?
• Onko tieto välitetty muullakin tavalla kuin pelkällä värillä?
• Onko taulukossa otsikkorivi merkitty otsikkosoluiksi?
• Käynnistyykö sivulla mikään ääni, video tai animaatio itsestään?

Jos haluat tarkistaa myös verkkosivustosi muut perusasiat, tutustu kotisivujen tarkistuslistaamme.

Usein kysytyt kysymykset saavutettavasta sisällön­tuotannosta

Riittääkö saavutettavuuslisäosa tai saavutettavuustyökalu?

Ei riitä. Sivuston päälle asennettavat saavutettavuustyökalut eli overlay-ratkaisut eivät korjaa puuttuvia alt-tekstejä, virheellistä otsikkorakennetta tai epämääräisiä linkkitekstejä, koska nämä ovat sisällön ominaisuuksia. Työkalu voi tarjota esimerkiksi tekstikoon säätimen, mutta lain vaatimukset täyttyvät vain, jos sisältö ja tekninen toteutus ovat kunnossa.

Koskeeko saavutettavuusvaatimus yksityisen yrityksen verkkosivuja?

Tavallista yritysten esittelysivustoa vaatimukset eivät suoraan koske. Kuluttajille myyvä verkkokauppa sen sijaan kuuluu esteettömyysdirektiivin soveltamisalaan, kun yrityksessä on vähintään 10 työntekijää tai liikevaihto tai taseen loppusumma ylittää kaksi miljoonaa euroa. Julkista rahoitusta saavat yhdistykset ja hankkeet kuuluvat usein digipalvelulain piiriin.

Mitä alt-tekstiin kirjoitetaan, jos kuva on pelkkä kuvituskuva?

Alt-teksti jätetään tyhjäksi. Tyhjä alt-teksti kertoo ruudunlukijalle, että kuva voidaan ohittaa. Alt-kenttää ei kuitenkaan poisteta kokonaan, koska silloin ruudunlukija saattaa lukea tilalle tiedostonimen.

Onko WCAG 2.2 jo pakollinen Suomessa?

Ei ole. Suomen lainsäädäntö nojaa eurooppalaiseen standardiin EN 301 549, joka viittaa toistaiseksi WCAG 2.1 -version A- ja AA-tason kriteereihin. WCAG 2.2 tulee osaksi vaatimuksia vasta, kun standardin päivitetty versio on julkaistu EU:n virallisessa lehdessä. Uudemman version kriteerien noudattaminen on silti suositeltavaa, sillä ne parantavat käytettävyyttä jo nyt.

Kuka vastaa saavutettavuudesta, mainostoimisto vai sisällöntuottaja?

Vastuu jakautuu. Toteuttaja vastaa teemasta, lohkoista, väripaletista, näppäimistönavigoinnista ja saavutettavuusselosteen pohjasta. Sisällöntuottaja vastaa siitä, että julkaistava sisältö noudattaa yllä olevia ohjeita. Teknisesti saavutettavan sivuston saa rikki yhdellä väärin merkityllä otsikolla, joten molempia tarvitaan.