Saavutettavan WordPress-sivuston tekeminen alkaa rakenteesta. WCAG-standardien ydin ei ole yksittäinen lisäosa tai tarkistuslista, vaan se, että sivusto on looginen, selkeä ja käytettävissä eri tavoilla – näppäimistöllä, ruudunlukijalla ja mobiilissa. Kun perusta on kunnossa, suurin osa saavutettavuusongelmista katoaa automaattisesti.
Teeman valinta on tärkein yksittäinen päätös. Huono teema voi rikkoa saavutettavuuden jo ennen kuin yhtään sisältöä on lisätty....
Otsikkohierarkia on keskeinen osa saavutettavuutta. Ruudunlukijat käyttävät otsikoita sivun “karttana”, joten niiden pitää olla loogisia....
Kaikilla informatiivisilla kuvilla pitää olla alt-teksti. Se kertoo ruudunlukijalle, mitä kuvassa tapahtuu....
Sivuston pitää olla täysin käytettävissä ilman hiirtä. Tämä on yksi WCAG:n perusvaatimuksista....
Tekstin pitää erottua taustasta riittävästi. WCAG määrittelee minimikontrastit, jotta sisältö on luettavaa myös heikkonäköisille....
Lomakkeet ovat usein WordPress-sivuston heikoin kohta....
ARIA-attribuutit auttavat ruudunlukijoita, mutta niitä ei pidä käyttää liikaa....
Monet WordPress-lisäosat tuovat mukanaan ongelmia ilman että sitä huomaa heti....
Jos sivustolla on videoita tai ääntä, niiden pitää olla saavutettavia....
Saavutettavuus ei ole kertatarkistus vaan jatkuva prosessi....
Saavutettava WordPress-sivusto syntyy hyvistä perusvalinnoista ja huolellisesta rakenteesta. Kun teema, sisältöhierarkia, lomakkeet ja navigaatio tehdään oikein, WCAG-vaatimukset täyttyvät pitkälti luonnostaan. Lopullinen tavoite ei ole pelkkä...
Oikea teema ratkaisee puolet ongelmista
Teeman valinta on tärkein yksittäinen päätös. Huono teema voi rikkoa saavutettavuuden jo ennen kuin yhtään sisältöä on lisätty.
Hyvä teema:
- toimii täysin näppäimistöllä
- käyttää semanttista HTML-rakennetta
- ei poista focus-tiloja
- tukee ruudunlukijoita
- ei sisällä turhia ARIA-virityksiä
WordPressin “Accessibility Ready” -merkintä on hyvä lähtökohta, mutta ei tae täydellisyydestä.
Selkeä rakenne otsikoilla
Otsikkohierarkia on keskeinen osa saavutettavuutta. Ruudunlukijat käyttävät otsikoita sivun “karttana”, joten niiden pitää olla loogisia.
Hyvä rakenne:
- yksi H1 per sivu
- H2 pääosioille
- H3 aliosioille
- järjestys ei saa hypätä epäloogisesti
Otsikoita ei käytetä ulkoasun takia, vaan rakenteen takia.
Kuvat ja alt-tekstit
Kaikilla informatiivisilla kuvilla pitää olla alt-teksti. Se kertoo ruudunlukijalle, mitä kuvassa tapahtuu.
Hyvä alt-teksti on:
- kuvaileva
- lyhyt mutta informatiivinen
- ilman turhaa avainsanatäyttöä
Koristekuvat jätetään tyhjiksi:
alt=""
Näppäimistöllä toimiminen
Sivuston pitää olla täysin käytettävissä ilman hiirtä. Tämä on yksi WCAG:n perusvaatimuksista.
Tarkistettavat asiat:
- Tab-järjestys on looginen
- kaikki linkit ja napit ovat saavutettavissa
- fokus näkyy selkeästi
- valikot aukeavat näppäimistöllä
Fokus-tyylejä ei saa poistaa ilman korvaavaa näkyvyyttä.
:focus { outline: 2px solid #000; outline-offset: 2px; }
Värit ja kontrasti
Tekstin pitää erottua taustasta riittävästi. WCAG määrittelee minimikontrastit, jotta sisältö on luettavaa myös heikkonäköisille.
Tärkeimmät periaatteet:
- älä käytä pelkkää väriä tiedon välittämiseen
- vältä liian vaaleaa tekstiä
- varmista riittävä kontrasti kaikissa elementeissä
Esimerkiksi virhetilanteet pitää kertoa myös tekstillä, ei vain punaisella värillä.
Lomakkeiden saavutettavuus
Lomakkeet ovat usein WordPress-sivuston heikoin kohta.
Hyvä lomake:
- jokaisella kentällä on label
- virheviestit ovat selkeitä
- pakollisuus kerrotaan tekstillä
- fokus siirtyy virheeseen
Esimerkki:
<label for="email">Sähköposti</label> <input id="email" type="email" name="email">
ARIA vain tarvittaessa
ARIA-attribuutit auttavat ruudunlukijoita, mutta niitä ei pidä käyttää liikaa.
Perusperiaate:
- ensin semanttinen HTML
- ARIA vasta sitten, jos tarvitaan
Liiallinen ARIA voi jopa heikentää saavutettavuutta.
Lisäosat voivat rikkoa saavutettavuuden
Monet WordPress-lisäosat tuovat mukanaan ongelmia ilman että sitä huomaa heti.
Tyypillisiä riskialueita:
- page builderit
- popupit
- sliderit
- chat-widgetit
- vanhat teemat ja komponentit
Jokainen lisäosa kannattaa testata näppäimistöllä ja ruudunlukijalla.
Media ja videot
Jos sivustolla on videoita tai ääntä, niiden pitää olla saavutettavia.
Hyvät käytännöt:
- tekstitykset videoihin
- transkriptio saataville
- ei automaattista äänen toistoa
- käyttäjä hallitsee toistoa
Testaus käytännössä
Saavutettavuus ei ole kertatarkistus vaan jatkuva prosessi.
Hyödyllisiä työkaluja:
- Lighthouse
- WAVE
- axe DevTools
- ruudunlukijat (NVDA, VoiceOver)
Testaa aina myös:
- pelkällä näppäimistöllä
- mobiilissa
- ilman CSS-tyylejä
Yhteenveto
Saavutettava WordPress-sivusto syntyy hyvistä perusvalinnoista ja huolellisesta rakenteesta. Kun teema, sisältöhierarkia, lomakkeet ja navigaatio tehdään oikein, WCAG-vaatimukset täyttyvät pitkälti luonnostaan. Lopullinen tavoite ei ole pelkkä standardin täyttäminen, vaan sivusto, jota kaikki voivat käyttää ilman esteitä.
