Verkkosivulla kävijä ei yleensä ajattele saavutettavuutta – hän huomaa sen vasta, kun sivu ei toimi. Painike ei aukea näppäimistöllä, lomakkeen virheilmoitus jää epäselväksi tai vaalea teksti katoaa taustaansa. Silloin yhteydenotto, tarjouspyyntö tai ostos voi jäädä tekemättä. Siksi kysymys siitä, miten parantaa verkkosivujen saavutettavuutta, on ennen kaikkea kysymys siitä, kuinka hyvin sivusto palvelee oikeita ihmisiä eri tilanteissa.
Saavutettava sivusto ei ole erillinen lisäominaisuus tai vain julkishallinnon velvollisuus. Se on selkeää viestintää, toimivaa tekniikkaa ja harkittua visuaalista suunnittelua. Samat ratkaisut helpottavat käyttöä esimerkiksi ikääntyvälle kävijälle, mobiililla asioivalle asiakkaalle, ruudunlukijaa käyttävälle henkilölle ja kiireiselle päättäjälle, joka yrittää löytää olennaisen tiedon minuutissa.
Miten parantaa verkkosivujen saavutettavuutta käytännössä?
Paras lähtökohta on tarkastella sivustoa asiakaspolkuna, ei pelkkänä tarkistuslistana. Pääseekö kävijä etusivulta palveluun, yhteystietoihin tai ostoskoriin ilman arvaamista? Ymmärtääkö hän, mitä sivulla tapahtuu ja mitä hänen pitää tehdä seuraavaksi?
Saavutettavuuden tekninen viitekehys on WCAG-ohjeistus. Se auttaa tunnistamaan, ovatko sisällöt havaittavia, hallittavia, ymmärrettäviä ja teknisesti yhteensopivia avustavien teknologioiden kanssa. Kaikkia yrityksiä eivät koske samat lakisääteiset vaatimukset, mutta käytännön hyöty on silti sama: kun sivusto on tehty selkeästi, useampi potentiaalinen asiakas pystyy käyttämään sitä.
Korjauksia kannattaa priorisoida sen mukaan, mikä estää asioinnin kokonaan. Jos yhteydenottolomake ei toimi näppäimistöllä tai verkkokaupan kassalle ei pääse ruudunlukijalla, kyse on kiireellisemmästä asiasta kuin yksittäisestä puuttuvasta kuvatekstistä blogiarkistossa. Molemmat ovat tärkeitä, mutta liiketoiminnan kannalta kaikki puutteet eivät ole samanarvoisia.
Aloita rakenteesta ja sisällön selkeydestä
Hyvä saavutettavuus alkaa usein paljon ennen koodia. Sivun otsikoiden on kerrottava, mistä osiossa puhutaan, ja niiden järjestyksen on oltava looginen. Pääotsikon jälkeen edetään alaotsikoihin, eikä otsikkotasoa valita tekstin koon tai ulkonäön perusteella. Visuaalinen tyyli tehdään CSS:llä, rakenne HTML:llä.
Selkeä otsikointi auttaa ruudunlukijan käyttäjää siirtymään sisällössä, mutta se helpottaa myös kaikkia muita. Pitkä palvelusivu muuttuu nopeasti silmäiltäväksi, kun kävijä näkee heti, mitä palvelu sisältää, kenelle se sopii ja miten projekti etenee.
Kirjoita linkit ja painikkeet niin, että niiden tarkoitus selviää ilman ympäröivää lausetta. ”Lue lisää” voi toimia kortissa, jos kortin muu rakenne välittyy apuvälineille oikein. Usein parempi vaihtoehto on kuitenkin ”Tutustu WordPress-ylläpitoon” tai ”Pyydä tarjous verkkosivuista”. Täsmällinen teksti vähentää epävarmuutta ja parantaa samalla konversiota.
Myös kieli vaikuttaa. Virkkeiden ei tarvitse olla lyhyitä hinnalla millä hyvänsä, mutta tarpeeton ammattisanasto ja monimutkaiset lauserakenteet kannattaa purkaa. Jos palvelun sisältöä ei pysty selittämään asiakkaalle ymmärrettävästi, ongelma ei välttämättä ole vain tekstissä. Usein palvelulupauskin kaipaa terävöittämistä.
Kontrasti, koko ja liike ovat käytettävyyttä
Yrityksen visuaalinen ilme saa ja pitää näyttää omalta. Saavutettavuus ei tarkoita harmaata ja persoonatonta verkkosivua. Se tarkoittaa, että brändivärit, typografia ja käyttöliittymä toimivat myös silloin, kun näyttö on kirkkaassa auringonvalossa, näkö on heikentynyt tai käyttäjä suurentaa tekstiä.
Tekstin ja taustan välisen kontrastin pitää olla riittävä. Vaaleanharmaa teksti valkoisella taustalla näyttää ensivilkaisulla kevyeltä, mutta voi olla monelle käytännössä lukukelvoton. Erityistä huomiota tarvitsevat pienet tekstit, navigaatio, lomakekenttien ohjeet sekä painikkeet, joissa väri kantaa usein koko toiminnallisen viestin.
Älä viesti pelkällä värillä. Jos lomakkeessa virheellinen kenttä merkitään vain punaisella reunuksella, osa käyttäjistä ei huomaa virhettä. Lisää selkeä tekstimuotoinen ilmoitus ja kerro, mikä kentässä pitää korjata. Sama periaate toimii tarjouslaskureissa, verkkokaupoissa ja ajanvarauksissa.
Liikkuvat elementit, automaattisesti vaihtuvat karusellit ja videot voivat elävöittää sivua, mutta niillä on hintansa. Jos liike häiritsee keskittymistä tai sisältö vaihtuu ennen kuin kävijä ehtii lukea sen, näyttävä toteutus heikentää käyttökokemusta. Liikkuva sisältö pitää voida pysäyttää, ja videon olennaisen viestin tulee olla ymmärrettävissä myös ilman ääntä.
Testaa näppäimistöllä ennen kuin julkistat
Yksi nopeimmista tavoista löytää vakavia saavutettavuusongelmia on laittaa hiiri sivuun. Siirry sivustolla tabulaattorilla: näetkö, missä kohtaa kohdistus on? Pääsetkö navigaatioon, valikoihin, lomakkeisiin ja painikkeisiin järkevässä järjestyksessä? Voitko avata ja sulkea valikon sekä lähettää lomakkeen?
Näppäimistökäytön ongelmat syntyvät usein räätälöidyistä käyttöliittymäelementeistä. Tavallinen HTML-painike on jo lähtökohtaisesti paremmin saavutettava kuin klikattavaksi tehty `div`. Kun käyttöliittymässä tarvitaan erikoistoimintoja, niiden roolit, tilat ja näppäimistötoiminnot on toteutettava huolellisesti.
Automaattiset saavutettavuustestit ovat hyödyllisiä, mutta ne eivät korvaa ihmisen tekemää testausta. Työkalu voi löytää puuttuvan vaihtoehtoisen tekstin tai heikon kontrastin. Se ei kuitenkaan aina tiedä, kuvaako tekstivastine kuvaa järkevästi, onko lomakkeen ohje ymmärrettävä tai tuntuuko ostopolku asiakkaasta loogiselta.
Toimiva malli on yhdistää tekninen tarkistus, manuaalinen näppäimistötesti ja sisällöllinen arviointi. Laajassa palvelussa tai verkkokaupassa kannattaa testata erityisesti ne polut, joilla syntyy yhteydenottoja, tilauksia tai kirjautumisia. Näin työ kohdistuu ensin siihen, mikä vaikuttaa eniten asiakkaan arkeen ja yrityksen tuloksiin.
Kuvat, lomakkeet ja dokumentit vaativat tarkkuutta
Kuvan vaihtoehtoinen teksti ei ole kuvan automaattinen kuvailu eikä paikka avainsanojen toistamiselle. Sen tehtävä on välittää kuvan olennainen merkitys siinä asiayhteydessä, jossa kuva esiintyy. Jos kuva on pelkkä koriste, sen voi jättää apuvälineiltä piiloon. Jos taas kuvassa on esimerkiksi tuotteen käyttöohje, kaavio tai kampanjan keskeinen viesti, tieto täytyy tarjota tekstimuodossa.
Lomakkeissa jokaisella kentällä pitää olla näkyvä nimike. Pelkkä kentän sisällä oleva paikkamerkintä ei riitä, koska se häviää kirjoittamisen alkaessa eikä aina välity apuvälineille oikein. Pakolliset kentät, virheet ja onnistunut lähetys on ilmaistava selkeästi. Hyvä lomake ei vain kerää tietoa – se kertoo käyttäjälle koko ajan, mitä tapahtuu.
Monella organisaatiolla saavutettavuuden haastavin kohta on PDF-dokumentti. Vuosikertomus, hinnasto, esite tai ohje voi olla visuaalisesti erinomainen, mutta käyttökelvoton ruudunlukijalla, jos otsikot, lukujärjestys, taulukot ja kuvat eivät ole rakenteellisesti kunnossa. Jos tieto muuttuu usein tai käyttäjän pitää toimia sen perusteella, verkkosivu on usein PDF:ää parempi ensisijainen julkaisukanava. Ladattava dokumentti voi täydentää sitä.
Saavutettavuus säilyy vain, jos sitä ylläpidetään
Sivustouudistuksessa asiat voidaan tehdä kerralla hyvin, mutta tilanne muuttuu heti, kun sivuille lisätään uutisia, kampanjoita, henkilöstökuvia, lomakkeita ja uusia kieliversioita. Siksi saavutettavuus kannattaa ottaa osaksi normaalia sisällöntuotantoa ja WordPress-ylläpitoa.
Käytännössä tämä tarkoittaa yhteisiä pelisääntöjä: otsikot tehdään oikein, kuville kirjoitetaan tarvittaessa vaihtoehtoiset tekstit, videoille mietitään tekstivastineet ja uudet lisäosat testataan ennen käyttöönottoa. Sisällöntuottajalle ei tarvitse tehdä saavutettavuusasiantuntijaa. Riittää, että julkaisun perusasiat ovat helppoja ja ohjeistus selkeä.
Kun sivustoa kehittää ulkopuolinen kumppani, saavutettavuus kannattaa nostaa esiin jo määrittelyvaiheessa. Se vaikuttaa suunnitteluun, komponentteihin, sisältörakenteeseen ja testaukseen. Myöhässä tehty korjaus on usein mahdollinen, mutta maksaa enemmän kuin fiksu päätös silloin, kun sivustoa vasta rakennetaan.
Hyvin toteutettu saavutettavuus ei pyydä kävijältä erityistä kärsivällisyyttä. Sivusto vain tuntuu selkeältä, luotettavalta ja helpolta käyttää. Jos omalla sivustolla epäilyttää yksi asia – navigaatio, kontrastit, lomake tai vanhat dokumentit – siitä kannattaa aloittaa. Pieni korjaus voi olla juuri se kohta, joka auttaa seuraavaa asiakasta ottamaan yhteyttä.