Näin teet saavutettavaa sisältöä WordPress-verkkosivuille: vinkit ja parhaat käytännöt

Verkkosivujen saavutettavuus tarkoittaa sitä, että sivustosi on käytettävissä ja ymmärrettävissä mahdollisimman monille ihmisille, riippumatta heidän fyysisistä tai kognitiivisista rajoitteistaan. Tämän ansiosta kaikki käyttäjät saavat saman tai mahdollisimman samankaltaisen käyttökokemuksen riippumatta heidän toimintakyvystään.

On olemassa monia erilaisia vammoja ja rajoitteita, jotka on otettava huomioon, jotta verkkosivusto toimisi mahdollisimman monelle käyttäjälle. Näitä ovat muun muassa:

• Sokeus
• Heikentynyt näkökyky
• Oppimisvaikeudet
• Kognitiiviset rajoitteet
• Kuurous
• Kuulon heikkeneminen
• Puhevammat
• Fyysiset vammat

Saavutettavuuden parantaminen ei ole pelkästään lainsäädännön noudattamista – se on myös erinomainen tapa parantaa käyttäjäkokemusta verkkosivuilla. Saavutettavat verkkosivustot tarjoavat parempaa käytettävyyttä kaikille käyttäjille, eivätkä vain niille, joilla on erityistarpeita. Kun verkkosivusi on saavutettavissa, tavoitat laajemman yleisön, mikä voi lisätä sivustosi liikennettä ja parantaa brändisi imagoa.

Suomessa on 2019 lähtien ollut voimassa digipalvelulaki, joka koski ensin julkista sektoria ja järjestöjä. Vuonna 2025 lain vaatimusten piiriin lisätään kuluttajille suunnatut verkkokaupat, sähkökirjat, osa henkilöliikenteen ja pankkien palveluista sekä audiovisuaaliseen sisältöön pääsyn tarjoavat palvelut ja viestintäpalvelut. Lain sisällöstä ja saavutettavuudesta on runsaasti tietoa valvovan viranomaisen Etelä-Suomen aluehallintoviraston Saavutettavuusvaatimukset-sivustolla (Vieraile ulkoisella sivustolla. Linkki avautuu uuteen välilehteen.).

Tässä artikkelissa keskitymme asioihin joita verkkosivuston sisällön päivittäjän / kirjoittajan tulisi ottaa huomioon. Tämän lisäksi saavutettavuuteen vaikuttaa verkkosivuston muu tekninen saavutettavuus, tekninen saavutettavuus on kuitenkin verkkosivuston suunnittelijan ja tekijän vastuulla. Tässä artikkelissa keskitytään niihin asioihin, jotka ovat sisällön syöttäjän vastuulla.

1. Käytä oikeaa värikontrastia

Värit eivät ole pelkästään visuaalisia elementtejä, vaan niillä on merkittävä rooli saavutettavuudessa. Varmista, että tekstin ja taustan välinen kontrasti on riittävä, jotta tekstin lukeminen on helppoa kaikille, myös heikkonäköisille käyttäjille.

• Teks­tin (myös teks­tiä esit­tä­vät ku­vat) ja taus­tan vä­li­nen tum­muus­kont­ras­ti on vä­hin­tään 4,5:1.
• Suurikokoisen teks­tin (vä­hin­tään 18 pt / 24 px) tai li­ha­voi­dun (14 pt / 19 px) tekstin ja taus­tan vä­li­nen tum­muus­kont­ras­ti on vä­hin­tään 3:1.

Tekstin pitää siis erottua taustastaan, esimerkiksi valkoinen teksti keltaisella taustalla on monesti haasteellinen, eikä tekstin ja taustan kontrastiero ole riittävä. WordPressin lohkoihin perustuva editori mahdollistaa jokaisen kappaleen ja otsikon taustan ja tekstin värin muuttamisen mieleisekseen. On kuitenkin erittäin tärkeää että käytettävät väriyhdistelmät ovat saavutettavia, eli että tekstin ja tausta välinen kontrastiero on tarpeeksi suuri. Älä siis käytä mitä tahansa värejä, vaan väriyhdistelmiä jotka ovat saavutettavia.

Ammattimainen verkkosivuston suunnittelija ja toteuttaja ottaa nämä asiat huomioon ja ohjeistaa sisällön syöttäjää mahdollisista väriyhdistelmistä, joita verkkosivustolla voi käyttää. Lisäksi sivuston vakiovärit pitäisi olla määritelty niin, ettei esim kappaleiden ja otsikoiden tekstien väriä tarvitse normaalisti vaihtaa.

2. Käytä oikeaa otsikkorakennetta

Hyvin organisoitu sivuston rakenne parantaa sivuston saavutettavuutta sekä edistää hakukoneopimointia.

Otsikoiden oikea käyttö (H1, H2, H3, jne.)

• H1: Käytä H1-otsikkoa vain kerran per sivu. H1 tulisi olla sivun pääotsikko. Tämä on tärkeää erityisesti hakukoneoptimoinnin (SEO) ja saavutettavuuden kannalta. Useimmissa WordPress-teemoissa, tämä on määritelty automaattisesti, mutta varmista että sivun pääotsikko on tyyppiä H1.
• H2: H2-otsikoita käytetään sisällön pääosioiden otsikoina. Ne jakavat sisällön pääkappaleisiin ja toimivat sivun pääasioiden erottajana. Sivustoa ruudunlukuohjelmalla käyttävät usein skannaavat ruudunlukuohjelman pikanäppäimellä kaikki sivun H2-otsikot läpi ja näin etsivät heitä kiinnostavan kohdan sivun sisällöstä. Muista siis käyttää H2 otsikoita sivun pääosioiden otsikoina.
• H3 ja H4: Käytä H3- ja H4-otsikoita alaluvuilla ja alakohtien otsikoina. Näin voit luoda selkeän hierarkian sisällölle, joka auttaa käyttäjää ja näytönlukuohjelmaa navigoimaan sisällön läpi helposti. Jos sivun sisältö ei ole kovin pitkä, riittää usein H2- ja H3-otsikkotasot.

Älä hyppää otsikkotasojen yli

Otsikoiden tasoja tulisi käyttää johdonmukaisesti hierarkisessa järjestyksessä. Vältä siis hyppäämistä esimerkiksi H1:stä suoraan H3:een, sillä tämä aiheuttaa sekavuutta niin visuaalisesti kuin saavutettavuuden kannalta. Otsikkotasojen tulisi olla hierarkisessa järjestyksessä, esimerkiksi H1..H2..H3..H4 tai H1..H2..H3..H2..H3.

WordPressissä voit tarkistaa otsikkotasojen hierarkian editointinäkymässä avaamalla ”Asiakirjan yleiskatsaus” ja valitsemalla ”Yleiskatsaus”-välilehden. Tässä näkymässä virheelliset otsikkotasot korostetaan keltaisella.

Meidän lisäosamme menee kuitenkin askeleen pidemmälle. Se antaa selkeät virheilmoitukset suoraan, kun sivua tallennetaan. Näin virheet eivät jää huomaamatta ja voit korjata ne heti. Tämä helpottaa saavutettavuuden varmistamista ja parantaa sisällön laatua.

Otsikoiden käyttö ei saa olla myöskään liian runsasta. Käytä otsikoita vain silloin, kun ne ovat todella tarpeellisia ja tuovat lisäarvoa sisällön jäsentelyyn. Liian monet otsikot voivat hämmentää lukijaa ja estää heitä saamaan selkeää käsitystä sisällöstä.

3. Hyödynnä alt-tekstejä ja kuvia oikein

Alt-teksti eli vaihtoehtoinen teksti auttaa ruudunlukuohjelmia kertomaan heikkonäköisille käyttäjille kuvan sisällöstä. Alt-teksti on lyhyt ja ytimekäs kuvaus kuvan sisällöstä. Jos kuva on kuvituskuva/koristekuva (esimerkiksi artikkelikuvat usein ovat) eivätkä tuo mitään lisäarvoa sisältöön, kannattaa alt-teksti jättää tyhjäksi. Samoin jos kuvan ympärillä olevassa tekstissä kerrotaan kaikki olennainen asia mitä kuvassa on, voidaan alt-teksti jättää tyhjäksi. Näin ruudunlukuohjelma osaa jättää kuvan huomioimatta eikä ruudunlukuohjelman varassa oleva käyttäjä edes tiedä että sivulla on kuva siinä kohtaa.

WordPressissä voit lisätä alt-tekstit helposti mediakirjaston kautta. On tärkeää, että kaikilla kuvilla on kuvaavat alt-tekstit, erityisesti jos kuvat sisältävät olennaista tietoa.

• Ku­vat jotka eivät tuo lisäarvoa sisältöön (kuvitusku­vat), on tyh­jä alt-teks­ti (alt=””). Kun jätät vaihtoehtoisen tekstin mediakirjastossa tyhjäksi, tekee WordPress lohkoeditori automaattisesti tyhjän alt-attribuutin kuvalle.
• Kai­kil­la muilla ku­vil­la on tar­koi­tus­ta ku­vaa­va alt-teksti.
• Jos linkin sisällä on pelkkä kuva, tu­lee alt-tekstin kertoa mihin linkki ohjaa. Esimerkiksi jos linkin sisällä on Muuks logo ja linkki ohjaa Muuksin verkkosivustolle, alt-teksti olisi: ”Muuks Creative verkkosivut”
• Graa­fien ja kaa­vioiden yh­tey­des­sä ku­van in­for­maa­tio on esi­tet­ty teks­ti­nä sa­mal­la sivulla ennen tai jälkeen kuvaa. Alt-teks­tin voi jättää tässä tapauksessa myös tyhjäksi.
• Teks­ti­vas­ti­neet on syy­tä pi­tää ly­hyi­nä, noin 120 merk­kiä.

Jos sinulla on kuvia joille tarvitsee lisätä alt-teksti: Muista lisätä kuville alt-teksti WordPress-mediakirjaston kautta, sen jälkeen mediakirjastoon kirjoitettu alt-teksti tulee automaattisesti kuvalle kaikilla alasivuilla/artikkeleilla missä kuva on lisätty sisältöön kuva-lohkona. Jos et lisää alt-tekstiä mediakirjastoon vaan vasta sivun/artikkelin editointinäkymässä, pitää sinun lisätä alt-teksti uudestaan jokaisella alasivulla/artikkelilla, jos käytät samaa kuvaa uudelleen.

Joskus alt-tekstejä käytetään myös hakukoneoptimointiin. Hakukoneoptimoitu alt-teksti ei välttämättä ole kuitenkaan saavutettava.

Huono (SEO:lle tehty avainsanojen täyttö):
alt=”Paras käsintehty puinen ruokapöytä osta verkosta ilmainen toimitus”

Hyvä (Saavutettava ja SEO-ystävällinen):
alt=”Käsintehty puinen ruokapöytä rustiikkisella viimeistelyllä”

Optimaalista olisi jos pystyt kirjoittamaan alt-tekstin, jossa sekä hakukoneet että saavutettavuus on otettu huomioon.

4. WordPress-lohkojen avulla saavutettavuus hoituu automaattisesti — ilman tarvetta huolehtia HTML-merkinnöistä

Yksi WordPressin suurimmista eduista saavutettavuuden kannalta on sen lohkopohjainen editori, joka hoitaa monimutkaisen HTML-merkkaamisen automaattisesti. Käyttäjän ei tarvitse tuntea HTML-koodia tai huolehtia siitä, ovatko otsikot, listat, taulukot tai muut sisältöelementit oikein merkitty semanttisesti saavutettavuuden näkökulmasta.

Ilman WordPressin lohkoeditoria verkkosivuston kehittäjän pitäisi kirjoittaa kaikki nämä HTML-merkinnät käsin. Tämä vaatisi syvällistä ymmärrystä semanttisen HTML:n käytöstä ja saavutettavuusohjeista. Lohkoeditori tekee tästä automaattista ja varmistaa, että saavutettavuus huomioidaan jo alusta alkaen.

Muista nämä sisältöä kirjoittaessa:

• Yksinkertainen ja selkeä kieli: Käytä mahdollisimman yksinkertaista kieltä. Vältä vaikeita erikoistermejä tai selitä ne heti, kun niitä käytetään.
• Selkeä ja looginen rakenne: Jaa sisältö pienempiin osiin, käytä kappalejakoja, luettelomerkkejä ja taulukoita, kun se on tarpeen.
• Selkeät linkkitekstit: Varmista, että linkit kuvaavat selkeästi, minne ne johtavat (esim. ”Lue lisää saavutettavuudesta” on parempi kuin ”Lue lisää”)
• Vältä animoituja tai välkkyviä elementtejä: Vältä vilkkuvia tai jatkuvasti liikkuvia elementtejä, sillä ne voivat aiheuttaa häiriöitä tai jopa kohtauksia joillekin käyttäjille.

5. Muita huomioon otettavia asioita

Kognitiivinen saavutettavuus

Kognitiivinen saavutettavuus tarkoittaa, että verkkosivu on mahdollisimman helppokäyttöinen ja ymmärrettävä kaikille käyttäjille. Se kattaa verkkosivuston käytön sujuvuuden sekä sisällön selkeyden ja ymmärrettävyyden. Vaikka kognitiivinen saavutettavuus hyödyttää kaikkia käyttäjiä, se on erityisen tärkeä niille, joilla on kognitiivisia haasteita.

Erityisesti siitä hyötyvät käyttäjät, jotka eivät ole tottuneet verkon käyttöön tai joilla on vaikeuksia esimerkiksi oppimisessa, hahmottamisessa, muistamisessa tai tekstin ymmärtämisessä. Näiden käyttäjien kannalta selkeä rakenne, yksinkertainen kieli ja johdonmukaiset käyttöliittymät ovat välttämättömiä sujuvan käyttökokemuksen varmistamiseksi.

Kognitiivisen saavutettavuuden parantamiseksi on tärkeää kiinnittää huomiota seuraaviin asioihin:

1. Ulkoasun selkeys – Sivuston visuaalinen ilme ja asettelu tulisi olla selkeä ja johdonmukainen, jotta käyttäjät hahmottavat sisällön helposti.
2. Informaation määrä – Vältä liiallista tietomäärää yhdellä sivulla. Jaa sisältö osiin ja esitä vain oleellinen tieto kerrallaan.
3. Sivustolla liikkuminen – Navigoinnin tulee olla loogista ja käyttäjälle selkeää, jotta hän löytää etsimänsä ilman turhaa vaivannäköä.
4. Palaute käyttäjälle – Käyttäjän toiminnoista (esim. lomakkeen lähettäminen) tulee antaa selkeä palaute, kuten vahvistusviesti tai virheilmoitus.
5. Kieli ja terminologia – Käytä yksinkertaista, selkeää kieltä ja vältä erikoistermejä. Jos erikoistermejä on pakko käyttää, selitä ne käyttäjälle.

Nämä tekijät auttavat varmistamaan, että verkkosivustoa voi käyttää ja ymmärtää mahdollisimman laaja käyttäjäkunta.

Sivuston ulkopuolelle ohjaavat linkit

Sivuston ulkopuolelle ohjaavat linkit merkataan erillisellä ikonilla sekä ruudunlukuohjelmien käyttäjille annetaan sama tieto tekstimuodossa. Tämän tekniikan tavoitteena on kertoa käyttäjälle että linkki ohjaa ulkoiselle sivustolle. Varsinkin jos ulkopuolisille sivustolle ohjaava linkki avautuu uuteen välilehteen voi olla hämmentävää käyttäjälle, jos heille ei kerrota siitä etukäteen.

Upotukset

Sisäinen kehys (myös nimellä iframe) lataa toisen HTML-sivun osaksi sivua. Iframe-kehyksiä käytetään yleisesti esimerkiksi upotettuihin videoihin tai testeihin/visoihin, ja ne ovat tehokkaita työkaluja ulkoisen sisällön lisäämiseen verkkosivuille. Huomio että myös iframen sisällä oleva sisältö pitäisi olla saavutettavaa.

Ruudunlukuohjelmat ilmoittavat käyttäjälle iframen läsnäolosta, kun käyttäjä navigoi sen kohdalle. Ilman merkityksellisiä otsikoita käyttäjä saattaa hämmentyä. Jos sisällössä on iframe upotuksia, niille on hyvä kirjoittaa otsikko eli title attribuutti.

Videot

Kaikille videoille tulisi tarjota tekstitykset. Tekstitysten tulee sisältää paitsi puhe myös muut merkittävät äänet. Tämä tarkoittaa esimerkiksi taustamusiikin, poliisiauton sireenin, ympäristön äänimaiseman tai oven koputuksen ilmoittamista tekstityksessä, jos ne ovat olennaisia sisällön ymmärtämisen kannalta. Taustamusiikin osalta riittää usein, että sen tyyli mainitaan lyhyesti.

Vältä videoiden tai äänen automaattista toistoa. Jos se on välttämätöntä, anna käyttäjälle mahdollisuus pysäyttää tai keskeyttää toisto.

Pdf ja muut liitetiedostot joihin sisällöstä linkitetään

Saavutettavuusvaatimukset koskevat kaikkia verkossa julkaistuja tiedostoja, jotka on julkaistu ensimmäistä kertaa 23.9.2018 tai sen jälkeen. Lue erillinen ohjeemme saavutettavien pdf-tiedostojen tekemiseen.