Verkkosivujen saavutettavuus: koskeeko vaatimus sinua ja mitä se vaatii

Verkkosivujen saavutettavuus tarkoittaa sitä, että sivustoa voi käyttää myös silloin kun näkö, kuulo, motoriikka tai keskittymiskyky on rajoittunut. Julkiselle sektorille se on lakisääteinen velvoite, ja esteettömyysdirektiivin myötä vaatimukset ulottuvat yhä laajemmin myös yrityksiin.

Tässä oppaassa käyn läpi, mitä saavutettavuus käytännössä vaatii, mitkä ovat yleisimmät puutteet suomalaisilla yrityssivustoilla ja miten korjaukset tehdään ilman koko sivuston uudistusta.

Ketä saavutettavuus koskee ja miksi se kannattaa

Saavutettavuusvaatimukset koskevat julkishallintoa, julkisrahoitteisia toimijoita ja kasvavassa määrin yksityisiä palveluntarjoajia esteettömyysdirektiivin soveltamisalalla, esimerkiksi verkkokauppoja ja pankki- ja liikennepalveluita. Jos toimit julkisen sektorin alihankkijana, vaatimus tulee usein sopimusehtojen kautta.

Velvoitteen ulkopuolellakin saavutettavuus kannattaa kolmesta syystä. Se laajentaa asiakaskuntaa: merkittävällä osalla väestöstä on jokin toimintarajoite, ja väestön ikääntyessä osuus kasvaa. Se parantaa käytettävyyttä kaikille: selkeät kontrastit ja looginen rakenne auttavat myös kirkkaassa auringonpaisteessa puhelinta räpläävää kiireistä ostajaa. Ja se tukee hakukonenäkyvyyttä, koska samat asiat (rakenne, otsikkohierarkia, kuvatekstit) auttavat myös hakukoneita ja tekoälyhakuja lukemaan sivustoa.

WCAG lyhyesti: neljä periaatetta

Saavutettavuuden kansainvälinen standardi on WCAG, ja vaatimustaso on yleensä AA. Sen neljä periaatetta ovat helposti muistettavat:

• Havaittava. Sisältö on aistittavissa: kuvilla on tekstivastine, videoilla tekstitys, kontrastit riittävät.
• Hallittava. Sivustoa voi käyttää näppäimistöllä, mikään ei vaadi hiirtä eikä tarkkaa ajoitusta.
• Ymmärrettävä. Kieli on selkeää, toiminnot johdonmukaisia, virheilmoitukset auttavat korjaamaan.
• Toimintavarma. Koodi on standardien mukaista, jotta apuvälineet osaavat tulkita sen.

Kahdeksan yleisintä puutetta ja niiden korjaus

1. Kuvilta puuttuvat alt-tekstit

Jokaisella sisältökuvalla pitää olla tekstivastine, joka kertoo mitä kuvassa on. Koristekuvalle annetaan tyhjä alt-attribuutti, jotta ruudunlukija ohittaa sen. Hyvä alt-teksti kuvailee sisällön, ei toista tiedostonimeä.

2. Liian heikot kontrastit

Vaalea harmaa teksti valkoisella on yleisin visuaalinen virhe. Leipätekstin kontrastisuhteen tulee olla vähintään 4,5:1 ja suurten otsikoiden 3:1. Tarkistus onnistuu ilmaisilla kontrastilaskureilla sekunneissa.

3. Näppäimistökäyttö ei toimi

Testaa itse: paina Tab-näppäintä ja liiku sivustolla ilman hiirtä. Pääsetkö valikkoihin, lomakkeisiin ja painikkeisiin? Näkyykö kohdistus selvästi? Jos kohdistusreunus on piilotettu CSS:llä, se on suora saavutettavuusvirhe ja yksi yleisimmistä.

4. Otsikkohierarkia rikki

Sivulla kuuluu olla yksi H1 ja sen alla loogisesti etenevät H2- ja H3-tasot. Otsikkotasoja ei valita ulkoasun vaan rakenteen mukaan. Ruudunlukijan käyttäjä selaa sivua otsikoiden avulla samaan tapaan kuin näkevä silmäilee sitä.

5. Lomakkeissa ei ole kunnollisia nimilappuja

Jokaisella kentällä pitää olla label-elementti, ei pelkkä placeholder-teksti, joka katoaa kirjoitettaessa. Virheilmoitusten pitää kertoa mikä meni vikaan ja miten se korjataan, ei pelkkä punainen reunus.

6. Linkkitekstit eivät kerro mitään

“Lue lisää” ja “klikkaa tästä” ovat hyödyttömiä, kun linkkejä selataan listana ilman ympäröivää tekstiä. Kirjoita linkkiin kohteen nimi. Sama korjaus parantaa suoraan myös hakukonenäkyvyyttä.

7. Videot ilman tekstitystä

Tekstitys palvelee kuulovammaisten lisäksi kaikkia, jotka katsovat videon äänettömänä. Automaattitekstitys on lähtökohta, mutta se pitää oikolukea, koska suomen kielessä automaattitulkinnat menevät usein pieleen.

8. Saavutettavuusseloste puuttuu

Velvoitetuilta toimijoilta vaaditaan saavutettavuusseloste, jossa kerrotaan sivuston tila, tunnetut puutteet ja palautekanava. Selosteen puuttuminen on itsessään puute, ja se on helppo korjata.

Näin tarkistat sivustosi tilan tunnissa

Kolme testiä riittää yllättävän pitkälle:

• Automaattityökalu. WAVE tai Lighthousen saavutettavuusosio löytää koneellisesti tarkistettavat puutteet, esimerkiksi puuttuvat alt-tekstit ja kontrastit. Se kattaa arviolta kolmanneksen vaatimuksista.
• Näppäimistötesti. Selaa sivusto läpi pelkällä Tab-näppäimellä ja yritä lähettää yhteydenottolomake.
• Zoom-testi. Suurenna selain 200 prosenttiin. Pysyykö sisältö luettavana ja toimivana, vai menevätkö elementit päällekkäin?

Automaattityökalu ei riitä yksinään, koska iso osa vaatimuksista vaatii ihmisen arviota: onko alt-teksti oikeasti kuvaava, eteneekö sisältö loogisesti, ovatko virheilmoitukset ymmärrettäviä.

Saavutettavuus kannattaa rakentaa sisään, ei päälle

Jälkikäteen korjaaminen on aina kalliimpaa kuin alusta asti oikein tekeminen. Jos olet uudistamassa sivustoa, ota saavutettavuus mukaan vaatimuksiin heti: se on suunnittelu- ja toteutuskysymys, ei erillinen lisäosa. Erillisistä “saavutettavuuswidgeteistä”, jotka lupaavat korjata sivuston yhdellä skriptillä, kannattaa olla varovainen: ne eivät korjaa rakenteellisia ongelmia eivätkä täytä vaatimuksia. Rakennamme saavutettavuuden osaksi jokaista verkkosivuprojektiamme.

Saavutettavuus verkkokaupassa ja lomakkeissa

Verkkokaupassa saavutettavuusvirheet maksavat suoraan rahaa, koska ne osuvat ostopolkuun. Tyypilliset ongelmat: tuotevariaatioiden valinta toimii vain hiirellä, ostoskorin päivitys ei ilmoita muutoksesta ruudunlukijalle, ja maksuvaiheen virheilmoitukset näkyvät vain värillä.

Lomakkeissa kolme asiaa ratkaisee. Jokaisella kentällä on näkyvä nimilappu, virheilmoitus kertoo sanallisesti mikä meni vikaan ja missä kentässä, ja kenttien järjestys on looginen näppäimistöllä liikuttaessa. Nämä korjaukset parantavat konversiota kaikilla käyttäjillä, eivät vain apuvälineiden käyttäjillä.

Värit ja visuaalinen suunnittelu

Väri ei saa olla ainoa tapa välittää tietoa. Punainen kenttä ei riitä kertomaan virheestä, koska värisokea käyttäjä ei erota sitä: tarvitaan myös teksti tai symboli. Sama koskee kaavioita ja tilamerkintöjä.

Kontrastivaatimus koskee myös käyttöliittymäelementtejä: painikkeiden reunoja, kuvakkeita ja lomakekenttien rajoja. Vaalean harmaa reunus valkoisella taustalla on kaunis mutta usein vaatimusten vastainen.

Fonttikoko ja riviväli vaikuttavat luettavuuteen enemmän kuin fonttivalinta. Leipäteksti vähintään 16 pikseliä ja riviväli noin 1,5 on hyvä lähtökohta.

Miten saavutettavuus kannattaa priorisoida

Kaikkea ei tarvitse korjata kerralla. Järkevä järjestys on tämä: ensin asiat, jotka estävät käytön kokonaan (näppäimistöllä toimimattomat toiminnot, lomakkeet joita ei voi täyttää), sitten asiat jotka vaikeuttavat käyttöä (kontrastit, puuttuvat alt-tekstit), ja lopuksi hienosäätö.

Jos korjaat vain kolme asiaa, korjaa nämä: näppäimistökäyttö toimimaan, kontrastit riittäviksi ja lomakkeiden nimilaput kuntoon. Ne kattavat suuren osan käytännön ongelmista ja ovat kohtuullisen nopeita toteuttaa.

Yhteenveto: kolmen tason lähestymistapa

Saavutettavuus kannattaa jakaa kolmeen tasoon, jotta työ ei tunnu ylivoimaiselta. Ensimmäinen taso on esteiden poisto: näppäimistökäyttö, lomakkeiden toimivuus ja se, ettei mikään toiminto ole mahdoton apuvälineillä. Nämä korjataan ensin, koska ne estävät käytön kokonaan.

Toinen taso on käytön helpottaminen: kontrastit, alt-tekstit, otsikkorakenne ja kuvaavat linkkitekstit. Nämä ovat nopeita korjata ja parantavat kokemusta kaikille käyttäjille.

Kolmas taso on ylläpito: uudet sisällöt tehdään alusta asti oikein, ja saavutettavuus on osa jokaisen sivuprojektin vaatimuksia. Kun tämä on rutiinia, korjausvelkaa ei enää synny lisää.

Usein kysytyt

Mitä verkkosivujen saavutettavuus tarkoittaa?

Sitä, että sivustoa voi käyttää myös rajoitteiden kanssa: ruudunlukijalla, pelkällä näppäimistöllä, suurennettuna tai ilman ääntä. Käytännössä se tarkoittaa kuvien tekstivastineita, riittäviä kontrasteja, selkeää rakennetta ja toimivia lomakkeita.

Koskeeko saavutettavuusvaatimus yritystäni?

Julkishallintoa ja julkisrahoitteisia toimijoita se koskee suoraan. Esteettömyysdirektiivin myötä vaatimukset ulottuvat myös moniin yksityisiin palveluihin, kuten verkkokauppoihin. Julkisen sektorin alihankkijalle vaatimus tulee usein sopimusehtojen kautta.

Mikä on WCAG AA -taso?

WCAG on kansainvälinen saavutettavuusstandardi ja AA on sen yleisimmin vaadittu taso. Se sisältää esimerkiksi vähintään 4,5:1 tekstikontrastin, täyden näppäimistökäytön ja kuvien tekstivastineet.

Parantaako saavutettavuus hakukonenäkyvyyttä?

Välillisesti kyllä. Selkeä otsikkohierarkia, kuvaavat linkkitekstit, alt-tekstit ja looginen rakenne auttavat myös hakukoneita ja tekoälyhakuja ymmärtämään sivustoa. Suoraa sijoitusetua saavutettavuudesta ei kuitenkaan kannata odottaa.

Riittääkö saavutettavuustyökalu tai widget sivustolle?

Ei riitä. Automaattityökalut löytävät osan puutteista ja päälle liimattavat widgetit eivät korjaa rakenteellisia ongelmia lainkaan. Vaatimusten täyttäminen edellyttää korjauksia itse sivuston koodiin ja sisältöön.