WordPress-saavutettavuus: teema, lohkot, lisäosat ja sisältö

WordPress-saavutettavuus syntyy neljästä kerroksesta: teemasta, lohkoista, lisäosista ja sisällöstä. Kun kolme ensimmäistä on tehty oikein, sisällöntuottajan on helppo pitää sivusto saavutettavana.

Kokemäen WordPress-verkkosivut, toteuttaja digitoimisto redandblue

Lyhyesti

  • WordPress voi olla täysin saavutettava, mutta sivusto ei muutu saavutettavaksi automaattisesti. Lopputulos riippuu teemasta, lohkoista, lisäosista ja sisällöstä.
  • Teema ja lohkot ratkaisevat rakenteen: otsikkotasot, näppäimistökäytön, kontrastit ja fokuksen näkyvyyden.
  • Lisäosat ovat yleisin piilevä ongelma. Lomake, evästebanneri tai liukukuva voi rikkoa muuten saavutettavan sivun.
  • Sisällöntuottaja vastaa alt-teksteistä, linkkiteksteistä, otsikoiden järjestyksestä ja liitetiedostoista.
  • Lain vaatima taso julkisille toimijoille ja verkkokaupoille on käytännössä WCAG A ja AA.

WordPress-saavutettavuus on mahdollista toteuttaa hyvin, mutta julkaisujärjestelmä ei takaa saavutettavuutta. WordPressin ydin ja lohkoeditori tuottavat pääosin hyvää HTML:ää, mutta sivun lopullinen saavutettavuus syntyy siitä, mitä sen päälle rakennetaan.

Ajattele sivustoa neljänä kerroksena:

  1. Teema määrää sivun rungon: navigaation, otsikkorakenteen, värit ja fokuksen.
  2. Lohkot määräävät, millaista rakennetta sisällöntuottaja voi tehdä.
  3. Lisäosat tuovat lomakkeet, evästebannerit, haut ja upotukset.
  4. Sisältö on se, mitä viestintätiimi kirjoittaa ja lataa päivittäin.

Jos yksikin kerros pettää, käyttäjä kohtaa esteen. Siksi saavutettavuutta ei voi lisätä yhdellä lisäosalla jälkikäteen.

Onko WordPress saavutettava?

Mitä teema ja lohkot ratkaisevat?

Teema ja lohkot ratkaisevat suurimman osan teknisestä saavutettavuudesta. Kun ne on tehty oikein, sisällöntuottajan on vaikea tehdä rakenteellisia virheitä.

Hyvin rakennetussa teemassa:

  • Sivulla on yksi H1, ja lohkot tuottavat otsikot oikeassa järjestyksessä.
  • Kaikki toiminnot toimivat näppäimistöllä, ja fokus näkyy selvästi.
  • Teksti ja tausta täyttävät kontrastivaatimukset kaikissa sallituissa värivalinnoissa.
  • Sivun alussa on ”siirry sisältöön” -linkki ja navigaatio on merkitty oikein.
  • Sivu toimii tekstin suurennuksella ja kapealla näytöllä.

Lohkoissa saavutettavuus tarkoittaa rajauksia. Jos editori tarjoaa vain kontrastiltaan riittäviä väriyhdistelmiä, huonoa yhdistelmää ei voi valita. Kerromme lohkojen suunnittelusta lisää sivulla Gutenberg-lohkoeditori.

Entä hallintanäkymän saavutettavuus?

Saavutettavuus koskee myös sisällöntuottajia. Viestintätiimissä voi olla ihminen, joka käyttää ruudunlukijaa, näppäimistöä tai suurennusta. WordPressin oma lohkoeditori on tehty näppäimistöllä käytettäväksi, mutta räätälöidyt lohkot ja lisäosien asetussivut pitää testata myös hallinnan puolella.

Käytännössä tämä tarkoittaa, että räätälöidyn lohkon kentillä on selkeät nimet ja ohjetekstit, ja lohkon voi lisätä ja muokata ilman hiirtä.

Kokemäen verkkopalvelun uudistus WordPressille, mobiilinäkymä
Kokemäen WordPress-verkkosivut

Lisäosat ovat WordPress-saavutettavuuden yleisin heikko kohta, koska niiden käyttöliittymä tulee sellaisenaan sivustolle. Teema voi olla moitteeton, mutta lomake ilman kenttien nimilappuja tai evästebanneri, joka ei sulkeudu näppäimistöllä, estää käytön.

Tarkista ennen lisäosan käyttöönottoa:

  • Toimiiko se pelkällä näppäimistöllä?
  • Onko lomakkeen kentillä näkyvät nimilaput ja ymmärrettävät virheilmoitukset?
  • Voiko sen ulkoasua muokata teeman värien ja kontrastien mukaiseksi?
  • Päivitetäänkö lisäosaa säännöllisesti?

Erityistä huolellisuutta vaativat liukukuvat, ponnahdusikkunat, karttaupotukset ja chat-ikkunat. Verkkokaupassa sama koskee kassaa ja maksutapoja, joista kerromme sivulla WooCommerce-verkkokaupan saavutettavuus.

Saavutettavuuslisäosat, jotka lupaavat korjata sivuston yhdellä asennuksella, eivät korjaa rakenteellisia ongelmia. Ne voivat jopa vaikeuttaa apuvälineiden käyttöä.

Miksi lisäosat ovat riski?

Mikä on sisällöntuottajan vastuu?

Sisällöntuottaja vastaa siitä, että jokainen julkaisu säilyttää sivuston saavutettavuuden. Hyvä teema auttaa, mutta alt-tekstiä tai selkeää linkkitekstiä se ei kirjoita puolestasi.

Sisällöntuottajan tarkistuslista WordPressissä:

  • Otsikot: käytä otsikkolohkon tasoja järjestyksessä, älä lihavoi tekstiä otsikon näköiseksi.
  • Kuvat: kirjoita alt-teksti, joka kertoo kuvan tarkoituksen. Koristekuvalle alt jätetään tyhjäksi.
  • Linkit: linkkiteksti kertoo kohteen. ”Lue lisää” ei kerro mitään yksinään.
  • Taulukot: käytä taulukkolohkoa vain taulukkotiedolle ja merkitse otsikkorivi.
  • Liitteet: PDF-tiedostojen pitää olla saavutettavia, tai sama sisältö julkaistaan sivuna.
  • Video: tekstitys ja tarvittaessa tekstivastine.

Selkeä rakenne auttaa myös hakukoneita ja tekoälyhakuja. Aiheesta lisää sivulla WordPressin hakukoneoptimointi.

Miten saavutettavuus pysyy kunnossa julkaisun jälkeen?

Saavutettavuus heikkenee helposti, kun sivustolle tulee uusia sisältöjä, lohkoja ja lisäosia. Siksi sitä kannattaa seurata säännöllisesti eikä vain julkaisuhetkellä.

Toimiva rytmi on automaattinen tarkistus jatkuvasti ja asiantuntijan käsin tekemä pistokoe vähintään kerran vuodessa tai aina isojen muutosten jälkeen. Uudet sisällöntuottajat kannattaa perehdyttää samaan tarkistuslistaan kuin alkuperäinen tiimi.

Omnian WordPress-verkkopalvelu kannettavalla tietokoneella, toteutus redandblue
Omnian verkkopalvelu mobiilinäkymässä, toteutus redandblue

Digipalvelulain piiriin kuuluvan sivuston on käytännössä täytettävä WCAG-ohjeiston A- ja AA-tason kriteerit, ja sivustolla on oltava saavutettavuusseloste. Laki koskee julkista sektoria ja osaa yksityisen ja kolmannen sektorin palveluista, ja 28.6.2025 alkaen myös esimerkiksi verkkokauppoja.

WordPressissä saavutettavuusseloste julkaistaan tavallisena sivuna, johon linkitetään jokaiselta sivulta, yleensä alatunnisteesta. Selosteen sisältö perustuu arviointiin, ei oletukseen. Lain tarkemmat rajaukset olemme käyneet läpi blogissa verkkosivujen saavutettavuus 2026.

Mitä laki vaatii WordPress-sivustolta?

Näin teemme

redandblue ja WordPress

Webmaster-pohjateeman ja lohkokirjaston tavoitetaso on WCAG 2.2 AA. Saavutettavuus on mukana määrittelystä ja suunnittelusta lähtien, ei vasta testausvaiheessa. Vuonna 2025 teimme 20 saavutettavaa verkkopalvelua.

Lisäosia valitessamme tarkistamme niiden saavutettavuuden ennen käyttöönottoa. Käyttöönoton koulutuksessa käymme sisällöntuottajan kanssa läpi alt-tekstit, otsikot ja linkit hänen omalla sivustollaan.

Olemassa olevalle sivustolle teemme saavutettavuusauditoinnin, jossa asiantuntija testaa sivuston käsin ja priorisoi korjaukset. Uuden sivuston kokonaisuus on kuvattu sivulla WordPress-verkkosivut. WordPressin perusteet löydät WordPress-oppaasta.

Tutustu WordPress-verkkosivuihin
Omnian verkkopalvelu kannettavalla tietokoneella, toteutus redandblue
WordPress-saavutettavuus

Asiakkaidemme projekteja

Katso kaikki työt
Katso kaikki työt

Usein kysyttyä WordPress-saavutettavuudesta

Ei riitä. Teema on perusta, mutta lohkot, lisäosat ja sisältö voivat silti luoda esteitä.

Ei korjaa. Työkalupalkit ja automaattiset korjaajat eivät muuta sivun rakennetta, ja ne voivat haitata ruudunlukijan käyttöä.

Lain vaatimus perustuu WCAG 2.1 -tason A- ja AA-kriteereihin. Uudet sivustot kannattaa tehdä WCAG 2.2:n mukaan, koska se sisältää 2.1:n vaatimukset ja muutaman lisäkriteerin.

Sivuston omistaja vastaa selosteesta. Se kannattaa päivittää aina, kun sivustoon tehdään isoja muutoksia tai uusi arviointi.

Tekoäly voi ehdottaa alt-tekstiä, mutta ihmisen pitää tarkistaa se. Vain sisällöntuottaja tietää, miksi kuva on sivulla.

Webmaster Podcast

Miltä näyttää tulevaisuuden verkkosivut ja WordPress?

Monikanavaista keskustelua verkosta ja sen liepeiltä. Kaikesta hyvin hoidettuun, kauniiseen ja toimivaan verkkoon liittyvästä. Kuuntele ja tilaa kanavamme, ja pysyt kärryillä siitä millaisia ovat tulevaisuuden verkkosivut.

Webmaster Podcast

Selvitetään, missä kerroksessa esteet ovat ja mitkä korjaukset kannattaa tehdä ensin. Tutustu WordPress-verkkosivuihin

Onko sivustosi saavutettava?

WordPress-saavutettavuus

Kysy lisää – me vastaamme

redandbluen toinen perustaja, vanhempi suunnittelija ja asiakkuusjohtaja Petteri Laamo

Petteri Laamo

Senior designer, Client director, Co-Founder
Puhelin 040 194 4421
Sähköposti petteri@redandblue.fi

Yhteydenottolomake

Kenttä on validointitarkoituksiin ja tulee jättää koskemattomaksi.
Nimi(Pakollinen)
Rekisteriselosteen hyväksyntä(Pakollinen)