WordPress · WCAG 2.2 AA

WordPress-sivuston saavutettavuus

WordPress on maailman käytetyin sisällönhallintajärjestelmä, mutta WordPress-sivuston saavutettavuus ei synny itsestään. Sivuston todellinen saavutettavuus riippuu teemasta, lisäosista ja sisällöntuotannon tavoista — ja juuri näissä syntyvät yleisimmät WCAG 2.2 AA -puutteet. Tällä sivulla käydään läpi, miksi WordPress-sivustot ovat usein ei-saavutettavia, mitkä ongelmat toistuvat ja miten ne tunnistetaan ja korjataan.

Onko WordPress saavutettava oletuksena?

WordPressin ydin tuottaa kohtuullisen siistiä ja semanttista merkkausta, ja yhteisö tekee jatkuvasti työtä editorin saavutettavuuden parantamiseksi. Ydin ei kuitenkaan yksin määrää sitä, mitä kävijä lopulta kohtaa. Sivuston saavutettavuus muodostuu kolmesta kerroksesta, joista jokainen voi rikkoa sen: valittu teema, asennetut lisäosat ja se, miten sisältöä tuotetaan. Käytännössä useimmat valmiit teemat ja sivunrakentajat tuottavat puutteita, jotka eivät näy silmämääräisesti vaan paljastuvat vasta ruudunlukijalla ja näppäimistöllä testattaessa.

Miksi WordPress-sivustot ovat usein ei-saavutettavia

Syyt eivät yleensä ole yksittäisiä bugeja vaan rakenteellisia. Samat juurisyyt toistuvat sivustolta toiselle:

• Teemat painottavat ulkonäköä, eivät rakennetta. Moni myydyin teema on suunniteltu näyttävyys edellä: heikot kontrastit, epälooginen otsikkohierarkia ja näppäimistöltä saavuttamattomat valikot ovat tavallisia.
• Sivunrakentajat lisäävät raskasta merkkausta. Elementorin, Divin ja vastaavien tuottama HTML on usein syvästi sisäkkäistä div-rakennetta, jossa semantiikka ja fokusjärjestys hämärtyvät.
• Lisäosat tuovat omat komponenttinsa. Liukukuvat, popupit, evästebannerit ja lomakelisäosat tuovat mukanaan omaa koodiaan, jonka saavutettavuutta harva tarkistaa.
• Sisällöntuottajat eivät näe rakennetta. Otsikkotasot valitaan ulkonäön mukaan, kuville ei kirjoiteta vaihtoehtoista tekstiä ja linkkien tekstinä on ”lue lisää” — kaikki visuaalisesti huomaamatonta mutta ruudunlukijalle ratkaisevaa.

Yleisimmät saavutettavuusongelmat WordPress-sivustoilla

Kun WordPress-sivustoja testaa järjestelmällisesti, samat puutteet toistuvat. Nämä ovat tyypillisimmät:

• Riittämättömät värikontrastit — teeman oletusvärit eivät täytä WCAG 2.2 AA -kontrastivaatimusta tekstille tai painikkeille.
• Rikkonainen otsikkohierarkia — sivulla on useita H1-otsikoita tai tasoja hypitään (H2 → H4), jolloin ruudunlukijan käyttäjä menettää sivun rakenteen.
• Lomakkeet ilman kunnollisia nimilappuja — Contact Form 7-, WPForms- ja WooCommerce-lomakkeissa kentiltä puuttuu ohjelmallinen label-yhteys, jolloin kenttä jää ruudunlukijalla nimettömäksi.
• Näppäimistöltä saavuttamattomat valikot ja popupit — pudotusvalikko aukeaa vain hiirellä, tai modaalin avautuessa fokus katoaa eikä sitä voi sulkea näppäimistöllä.
• Liukukuvat (sliderit) ilman hallintaa — automaattisesti vaihtuva karuselli ilman pysäytystä ja ilman ruudunlukijatukea.
• Puuttuvat vaihtoehtoiset tekstit — mediakirjaston kuvilta puuttuu alt-teksti, tai koristekuville on turha alt, joka kuormittaa ruudunlukijaa.
• Näkymätön fokus — teema piilottaa fokusreunuksen tyylillä, jolloin näppäimistökäyttäjä ei näe missä on.
• Linkit ja painikkeet sekaisin — div-elementti, joka toimii painikkeena mutta jota ei voi käyttää näppäimistöllä eikä ruudunlukija tunnista.

Sivunrakentajat ja saavutettavuus: Gutenberg, Elementor, Divi

Editorin valinta vaikuttaa siihen, kuinka helppoa saavutettava lopputulos on saavuttaa — mutta mikään editori ei takaa sitä. Karkea kuva:

Olennaista ei ole työkalun nimi vaan se, miten sitä käytetään ja testataanko lopputulos. Kevyt editori helpottaa työtä, mutta jokainen alusta vaatii saman manuaalisen tarkistuksen ruudunlukijalla ja näppäimistöllä.

Näin tunnistat WordPress-sivuston saavutettavuuspuutteet

Aloita automaattisilla työkaluilla — ne ovat ilmaisia ja löytävät mitattavat virheet nopeasti. Käytännön kolmikko on axe (selainlaajennus), WAVE ja Chromen sisäänrakennettu Lighthouse. Ne paljastavat kontrastiongelmat, puuttuvat alt-tekstit ja monet rakenteelliset virheet.

Manuaalinen tarkistus tarkoittaa sivuston läpikäyntiä pelkällä näppäimistöllä (Tab, Enter, Esc) ja ruudunlukijalla (NVDA Windowsilla, VoiceOver Macilla). Vasta se kertoo, toimiiko sivusto oikeasti niille käyttäjille, joita saavutettavuus koskee. Jos harkitset valmiita ”saavutettavuuslisäosia” oikotieksi, kannattaa ensin lukea miksi overlay-työkalut eivät korjaa ongelmaa.

WordPress-saavutettavuuden korjaaminen

Korjaukset jakautuvat kahteen tasoon, ja niiden työmäärä eroaa merkittävästi:

Sisältötason korjaukset

Nämä voi usein tehdä itse editorissa ilman kehittäjää: otsikkohierarkian oikaisu, vaihtoehtoisten tekstien lisääminen, linkkitekstien täsmentäminen ja koristekuvien merkitseminen. Halpaa ja nopeaa, mutta edellyttää että tietää mitä etsii.

Teema- ja komponenttitason korjaukset

Kontrastien korjaus teeman tyyleissä, fokuksen näkyvyyden palauttaminen, valikoiden ja modaalien näppäimistötuki sekä lomakekenttien nimilappujen korjaus vaativat yleensä koodimuutoksia teemaan tai lapsiteemaan. Tässä WordPress-ekosysteemin tuntemus ratkaisee: kun tietää, miten teema, lisäosat ja Gutenberg-rakenteet käyttäytyvät, korjaukset ovat kohdennettuja eivätkä yleisluontoisia.

Mistä kannattaa aloittaa

Jos et tiedä missä sivustosi on saavutettavuuden suhteen, järkevin ensiaskel on selvittää nykytila järjestelmällisesti — ei korjata sokkona. Saavutettavuusarvio käy sivuston läpi sekä automaattisesti että manuaalisesti ja antaa priorisoidun listan siitä, mitkä puutteet kannattaa korjata ensin ja miten.

WP Saavutettavuus on suomalainen, WordPress-saavutettavuuteen erikoistunut toimija. Erikoisosaaminen on teemojen, lisäosien ja Gutenberg-rakenteiden saavutettavuusongelmissa, joten korjausehdotukset ovat toteutuskelpoisia.

Usein kysytyt kysymykset