Verkkosivujen saavutettavuus: kuusi korjausta, jotka pienyritys tekee itse

Suurin osa pienyrityksistä ei ole saavutettavuuslain piirissä — ja korjaukset kannattaa silti tehdä. Tässä ensin tarkasti, ketä laki velvoittaa, sitten kuuden korjauksen lista ja jokaiseen testi, jonka teet itse selaimella.

Verkkosivujen saavutettavuus tarkoittaa sitä, että sivusto toimii myös silloin, kun käyttäjä ei näe kunnolla, ei kuule, ei käytä hiirtä tai lukee puhelimella kirkkaassa auringonpaisteessa. Suurin osa korjauksista on pieniä ja teknisiä: kontrasti, alt-tekstit, otsikkotasot, näppäimistö, lomakelabelit ja sivun kielimerkintä. Kuusi asiaa, ja tavallisella pienyrityssivustolla ne on korjattavissa yhdestä kahteen työpäivään.

Tällä sivulla on kaksi asiaa: tarkka kuvaus siitä, ketä laki oikeasti velvoittaa Suomessa, ja kuuden korjauksen lista, jossa jokaisesta kerrotaan miten sen testaat itse ilman työkaluostoksia. Pelottelua ei tarvita — suurin osa pienyrityksistä ei ole lain piirissä, ja korjaukset kannattaa silti tehdä.

Ketä saavutettavuuslaki Suomessa velvoittaa?

Saavutettavuusvaatimukset tulevat Suomessa kahdesta eri säädöskokonaisuudesta, jotka menevät helposti sekaisin, joten ne kannattaa erottaa heti alussa. Ensimmäinen on saavutettavuusdirektiivi, joka koskee julkisia verkkopalveluja: valtiota, kuntia, kuntayhtymiä, julkisoikeudellisia laitoksia sekä eräitä julkisrahoitteisia toimijoita ja lisäksi tiettyjä yksityisiä aloja. Toinen on uudempi ja laajempi esteettömyysdirektiivi, joka ulottaa vaatimuksia yksityiselle puolelle tiettyihin kuluttajapalveluihin, kuten verkkokauppaan. Ero on olennainen, koska ensimmäinen ei koske tavallista pienyritystä lainkaan ja toinen voi koskea. Alla molemmat käydään läpi erikseen, ja lopussa on käytännön yhteenveto siitä, kuuluuko tavallinen suomalainen pienyrityssivusto kummankaan piiriin. Jos vastaus jää epäselväksi, tarkista oma tilanteesi viranomaisen omasta ohjeistuksesta ennen kuin ostat mitään.

1. Saavutettavuusdirektiivi (julkiset verkkopalvelut). Tämä on se vanhempi ja tunnetumpi. Se koskee julkista sektoria: valtiota, kuntia, kuntayhtymiä, julkisoikeudellisia laitoksia sekä eräitä julkisrahoitteisia toimijoita. Lisäksi se koskee tiettyjä yksityisiä aloja, tyypillisesti pankki-, vakuutus- ja finanssipalveluja sekä osaa liikenne- ja postipalveluista. Näiden pitää täyttää WCAG-vaatimukset ja julkaista saavutettavuusseloste.

2. Esteettömyysdirektiivi (kuluttajille tarjottavat tuotteet ja palvelut). Tämä on uudempi ja laajempi. Se ulottaa vaatimuksia yksityiselle puolelle tiettyihin kuluttajapalveluihin — esimerkiksi verkkokauppaan, pankkipalveluihin, sähkökirjoihin sekä matkustaja- ja lippupalveluihin. Mikroyrityksille, jotka tarjoavat palveluja, on säädetty poikkeus: hyvin pieni yritys ei ole samojen palveluvaatimusten piirissä.

Käytännön yhteenveto tavalliselle pienyritykselle: jos olet kampaamo, korjaamo, ravintola tai rakennusliike ja sivustosi on esite ja yhteydenottolomake, et todennäköisesti ole kummankaan lain velvoitteiden piirissä. Jos myyt verkkokaupassa kuluttajille, tilanne on toinen ja se kannattaa selvittää kunnolla.

Miksi korjaukset kannattaa tehdä, vaikka laki ei velvoita?

Saavutettavuuskorjaukset kannattaa tehdä myös silloin, kun laki ei velvoita, ja siihen on kolme syytä, jotka eivät ole moraalisaarnaa. Ensimmäinen on se, että samat korjaukset parantavat käytettävyyttä kaikille: riittävä kontrasti auttaa näkövammaista mutta myös sinua, kun luet puhelinta ulkona kirkkaassa valossa. Toinen on se, että hakukoneet lukevat sivua samoilla vihjeillä kuin avustavat teknologiat — otsikkorakenne, kuvien alt-tekstit ja kielimerkintä ovat kaikki asioita, joita hakukone käyttää sivun ymmärtämiseen. Kolmas on markkinan koko: näkö-, kuulo- ja liikuntarajoitteet yleistyvät ikääntyessä, ja sivu joka hajoaa suurella tekstikoolla menettää nämä asiakkaat hiljaa. Alla jokainen syy on avattu erikseen. Yhteistä kaikille kolmelle on se, että hyöty ei riipu lainkaan siitä, kuuluuko yrityksesi lain piiriin.

Ensimmäinen: samat korjaukset parantavat käytettävyyttä kaikille. Riittävä kontrasti auttaa näkövammaista, mutta myös sinua, kun luet puhelinta ulkona. Selkeät otsikkotasot auttavat ruudunlukijaa, mutta myös kiireistä lukijaa, joka silmäilee sivun kymmenessä sekunnissa.

Toinen: hakukoneet lukevat sivua samoilla vihjeillä kuin avustavat teknologiat. Otsikkorakenne, kuvien alt-tekstit ja kielimerkintä ovat kaikki asioita, joita hakukone käyttää sivun ymmärtämiseen. Saavutettavuuskorjaukset ja hakukoneoptimointi menevät tässä päällekkäin lähes täysin.

Kolmas: markkinan koko. Näkö-, kuulo- ja liikuntarajoitteet yleistyvät ikääntyessä. Jos asiakkaissasi on eläkeikäisiä, osa heistä käyttää suurta tekstikokoa tai puhelimen zoomia joka päivä. Sivu, joka hajoaa 200 % zoomilla, menettää heidät hiljaa — et näe sitä analytiikasta, koska he eivät koskaan päädy yhteydenottolomakkeeseen.

Kuusi korjausta ja miten testaat ne itse

1. Kontrasti

Yleisin virhe koko listalla. Sivustolla käytetään vaaleanharmaata tekstiä, koska se näyttää tyylikkäältä suunnittelijan näytöllä pimeässä huoneessa. Vaatimustaso on WCAG:n AA-taso: tavallisella leipätekstillä kontrastisuhde vähintään 4,5:1 ja suurella tekstillä 3:1. Korjaus on käytännössä yksi rivi tyylitiedostossa: tummenna tekstiväri. Sama koskee napin tekstiä napin taustaa vasten — se unohtuu lähes aina.

2. Alt-tekstit

Alt-teksti kertoo, mitä kuvassa on, kun kuvaa ei nähdä. Kolme sääntöä: kuvaile sisältö, älä aloita sanoilla "kuva jossa", ja jätä alt tyhjäksi (alt="") jos kuva on pelkkä koriste. Tyhjä alt on oikea ratkaisu, ei laiskuus — se kertoo ruudunlukijalle, että tämän voi ohittaa. Väärin on jättää attribuutti kokonaan pois, jolloin ruudunlukija lukee tiedostonimen ääneen.

3. Otsikkotasot

Sivulla on täsmälleen yksi H1, ja alaotsikot menevät järjestyksessä H2, H3. Tasoa ei valita fonttikoon perusteella. Ruudunlukijan käyttäjä selaa sivua otsikoista otsikkoon aivan kuten sinä selaat silmillä; jos tasot ovat sekaisin, sivu on hänelle sisällysluetteloton kirja.

4. Näppäimistö

Tämä on koko listan paras testi ja vie viisi minuuttia: siirrä hiiri sivuun ja yritä käyttää sivustoa pelkällä Tab-, Enter- ja nuolinäppäimillä. Kaksi asiaa menee tyypillisesti rikki. Mobiilivalikko, joka avautuu vain hiiren klikkauksesta, ja fokusrengas, joka on piilotettu tyylitiedostossa — jolloin et näe, missä kohtaa sivua olet. Fokusrenkaan piilottaminen on yleisimmin kopioitu huono neuvo koko web-suunnittelussa.

5. Lomakelabelit

Jokaisella lomakekentällä on oma <label>, joka on sidottu kenttään. Placeholder-teksti ei riitä, koska se katoaa heti kun käyttäjä alkaa kirjoittaa — ja silloin kukaan ei enää muista, kumpi kenttä oli puhelinnumero. Testi: klikkaa kentän otsikkotekstiä. Jos kursori hyppää kenttään, sidos on kunnossa. Jos ei, se puuttuu.

6. Sivun kieli

Viisi minuuttia, ja silti puuttuu hämmästyttävän usein. Suomenkielisellä sivulla pitää lukea <html lang="fi">. Jos siinä lukee en, ruudunlukija lausuu suomen englannin ääntämyssäännöillä, ja lopputulos on käsittämätöntä. Tämä on koko listan paras hyöty–työmäärä-suhde.

Viidentoista minuutin itsetesti: miten teet sen?

Ennen kuin tilaat mitään, tee viidentoista minuutin itsetesti. Se ei vaadi työkaluja eikä osaamista, ja se kertoo yllättävän tarkasti, kuinka syvällä ongelma on. Ota etusivu, yksi palvelusivu ja yhteydenottolomake, ja käy jokainen niistä läpi neljässä vaiheessa: zoomaa selain 200 prosenttiin, kulje sivu läpi pelkällä Tab-näppäimellä ilman hiirtä, sammuta kuvien lataus ja lähetä lomake väärillä tiedoilla. Jokainen vaihe vie muutaman minuutin, ja jokainen paljastaa eri asian. Kirjaa havainnot ylös sitä mukaa kuin ne tulevat, koska juuri ne muodostavat korjauslistan. Alla jokainen neljästä vaiheesta on kuvattu erikseen minuutteineen ja sen kertoo, mitä siinä pitää nähdä. Testi kannattaa tehdä itse eikä delegoida, koska havainnot ratkaisevat sen, mitä kannattaa tilata.

Minuutit 1–3: zoomaa. Paina selaimessa Ctrl ja plus, kunnes olet 200 prosentissa. Pysyykö teksti luettavana? Meneekö navigaatio päällekkäin? Joudutko vierittämään sivua vaakasuunnassa lukeaksesi kappaleen? Vaakavieritys on selkeä virhe: teksti kuuluu rivittää kapeampaan tilaan, ei työntää ulos ruudulta.

Minuutit 4–8: unohda hiiri. Paina Tab-näppäintä toistuvasti etusivun alusta loppuun. Näetkö koko ajan, missä olet? Pääsetkö valikkoon, hakuun ja jokaiseen linkkiin? Kulkeeko fokus sivulla ylhäältä alas siinä järjestyksessä, jossa asiat näkyvät? Jos fokus katoaa näkymättömiin tai hyppää sivun alaosaan ja takaisin, kirjaa se ylös. Tämä on korjattavista asioista se, joka vaikuttaa eniten.

Minuutit 9–12: sammuta kuvat. Selaimen asetuksista saa estettyä kuvien lataamisen. Lataa sivu uudelleen. Ymmärtääkö sivusta vielä, mitä yritys tekee ja mitä siltä voi ostaa? Jos keskeinen viesti oli kuvassa — hinnasto, aukioloajat, kampanjateksti — se on nyt kadonnut. Sama kadonnut se on ruudunlukijalle ja hakukoneelle.

Minuutit 13–15: täytä lomake väärin. Lähetä yhteydenottolomake tyhjänä tai virheellisellä sähköpostilla. Kertooko virheilmoitus tekstinä, mikä meni pieleen ja missä kentässä? Pelkkä punainen reunus ei kerro mitään sille, joka ei erota värejä. Virheen pitää lukea sanoina kentän vieressä.

Jos näistä neljästä läpäiset kolme, sivustosi on paremmassa kunnossa kuin valtaosa suomalaisista pienyrityssivustoista. Jos läpäiset yhden tai et yhtään, alla oleva järjestys kannattaa käydä läpi kokonaan.

Mitä nämä kuusi eivät kata?

Rehellisyyden nimissä: kuusi korjausta ei tee sivustosta WCAG-yhteensopivaa siinä merkityksessä, että voisit kirjoittaa saavutettavuusselosteeseen "täyttää vaatimukset". Ulkopuolelle jäävät ainakin videoiden tekstitykset ja kuvailutulkkaus, monimutkaiset interaktiiviset komponentit kuten karusellit, modaalit ja dynaamiset taulukot, aikarajoitteet sekä PDF-liitteiden saavutettavuus. Jos olet lain piirissä, tarvitset kokonaisen auditoinnin etkä tarkistuslistaa — tämän sivun lista on tarkoitettu siihen tilanteeseen, jossa velvoitetta ei ole mutta korjaukset kannattaa silti tehdä. Erityisesti PDF-liitteet ovat julkisella puolella se kohta, joka kaataa muuten hyvän sivuston, koska skannattu PDF on kuva eikä ruudunlukija saa siitä mitään irti. Tiedä siis rajasi ennen kuin kirjoitat mitään selosteeseen, koska väärä väite on pahempi kuin puuttuva korjaus.

Erityisesti PDF-liitteet ovat julkisella puolella se kohta, joka kaataa muuten hyvän sivuston. Skannattu PDF on kuva, eikä ruudunlukija saa siitä mitään irti.

Milloin saavutettavuuteen EI kannata laittaa rahaa?

Saavutettavuuteen ei kannata laittaa rahaa kolmessa tilanteessa, ja niissä sama euro tuottaa muualla enemmän. Ensimmäinen on se, että sivusto on menossa uusiksi puolen vuoden sisällä: vanhan teeman korjaaminen kohta kohdalta on työtä, joka heitetään pois, joten tee vain kielimerkintä ja alt-tekstit ja vaadi loput uuden sivuston toimitukseen. Toinen on erillisen saavutettavuustyökalun ostaminen, koska päälle kytkettävä työkalupalkki ei korjaa alla olevaa merkkausta. Kolmas on tilanne, jossa sivustolla ei vielä ole kävijöitä — silloin ensimmäinen euro kuuluu näkyvyyteen eikä kontrastisuhteisiin. Alla jokainen tilanne on käyty läpi erikseen ja kerrottu, mitä kannattaa tehdä sen sijaan. Kaikissa kolmessa kielimerkintä ja alt-tekstit kannattaa silti tehdä, koska ne ovat minuuttien työ ja siirtyvät sisällön mukana.

Kun sivusto on menossa uusiksi puolen vuoden sisällä. Vanhan teeman korjaaminen kohta kohdalta on työtä, joka heitetään pois. Tee kuudesta kohdasta vain kielimerkintä ja alt-tekstit — ne siirtyvät sisällön mukana — ja vaadi loput uuden sivuston toimitukseen. Kirjoita se sopimukseen hyväksymiskriteeriksi, älä toivomukseksi.

Kun ostat "saavutettavuustyökalua". Markkinoilla on lisäosia, jotka lupaavat tehdä sivustosta saavutettavan päällekytkettävällä työkalupalkilla. Ne eivät korjaa alla olevaa merkkausta: rikkinäinen otsikkorakenne on rikki myös työkalupalkin kanssa. Kuukausimaksu juoksee, ongelma pysyy. Korjaa lähdekoodi.

Kun sinulla ei ole vielä kävijöitä. Jos sivustolla käy kymmenen ihmistä kuukaudessa, ensimmäinen euro kuuluu näkyvyyteen, ei kontrastisuhteisiin. Tee viiden minuutin kielimerkintä, jätä muu seuraavaan kierrokseen ja hanki liikennettä ensin.

Missä järjestyksessä korjaukset kannattaa tehdä?

1. KielimerkintäViisi minuuttia, vaikuttaa koko sivustoon. Aloita tästä aina.
2. NäppäimistötestiSelaa koko sivusto Tabilla ja kirjaa jokainen kohta, johon et pääse. Tämä lista ohjaa loput työstä.
3. KontrastiYksi muutos tyylitiedostoon korjaa yleensä kymmeniä sivuja kerralla.
4. LomakkeetYhteydenotto ja tilaus ensin, muut sitten. Nämä ovat ne kohdat, joissa raha liikkuu.
5. OtsikkotasotKäy läpi sivupohjat, ei jokaista sivua erikseen. Vika on melkein aina pohjassa.
6. Alt-tekstitViimeisenä, koska tämä on ainoa kohta, jossa työmäärä kasvaa sivujen määrän mukana.

Jos sivustoa on tarkoitus uudistaa muutenkin, kannattaa lukea viiden sivun runko ensin: pienempi sivusto on myös nopeampi korjata. Uuden toteutuksen lähtökohdat käydään läpi sivulla verkkosivut yritykselle, ja hinnat lukevat hinnastossa.

Usein kysyttyä

Lue seuraavaksi

• Verkkosivujen analytiikka ilman evästeitä: mitä menetät datassa ja mitä säästät bannerissa
• Verkkosivujen vaihto toimittajalta toiselle — mitä otat mukaan ja miten pyydät sen
• Yrityssovelluksen kehittämisen hinta
• WordPress-ylläpidon hinta ja mitä siihen oikeasti kuuluu
• WordPressin hakukoneoptimointi: neljä asetusta, jotka ratkaisevat teknisen puolen

Lue myös: Android-sovellus Google Playhin · yrityksen tietoturva · varmuuskopiointi · hakukoneoptimoinnin hinta · Verkkokaupan perustaminen: hinta, vaihtoehdot ja todellinen kululista · Tietosuojaseloste-malli pienyritykselle · Liiketoimintasuunnitelman pohja ja laskelmat · IT-konsultointi pienyritykselle