Verkkopalvelujen toistuvista saavutettavuusvirheistä liki 97 % voidaan niputtaa kuuden aiheen alle. Ne olisi helposti taklattavissa, mutta miksi ongelmia ei korjata ja mitä tästä voi seurata?

Täysin saavutettava, kaikkien ihmisten tarpeisiin taipuva ja helposti käytettävissä oleva verkkosivusto on yksisarvinen, sillä sellaista on harva nähnyt. 

Web accessibility in mind -järjestö WebAIM tilastoi vuosittain miljoonan kotisivun saavutettavuustuloksia. Vuonna 2022 kaiken kaikkiaan 96,8 % osallistuneista kotisivuista  sisälsi saavutettavuusvirheitä. Siis 968 000 sivustoa miljoonasta. Parannusta edellisvuoteen on vain noin parin prosenttiyksikön verran.

Verkkopalveluja tekevät kehittäjät edistävät omassa työssään yhdenvertaisuutta mitä suuremmissa määrin. Tietoisuus saavutettavuuden merkityksestä heijastuu arvoista ja sitä kautta se vaikuttaa suoraan työhön. Siksi korjaus tapahtuu ensisijaisesti asenteiden ja toimintakulttuurin muutoksella.

Saavutettavuudella on monia vaikutuksia, jotka heijastuvat yksilötasolta ylemmäs ja laajemmin.

Syitä saavutettavuuden huonolle tolalle on useita. Tässä blogitekstissä katse on sekä teknisessä puolessa että siinä, miten kehittäjät voivat vaikuttaa yhdenvertaisuuden toteutumiseen verkossa.

Yleisimmät saavutettavuusvirheet liittyvät ruudunlukijan käyttöön

Saavutettava verkkosisältö koostuu kolmesta eri osa-alueesta: teknisistä ratkaisuista, verkkosisältöjen ymmärrettävyydestä ja verkkopalvelun käytettävyydestä. 

Saavutettavuuden onnistuminen tekniseltä kannalta liittyy WCAG-ohjeistukseen. Se on jaettu neljään perusperiaatteeseen, jotka verkkopalvelun tulee täyttää. Niiden mukaan verkkopalvelun tulee olla havaittava, hallittava, ymmärrettävä ja toimintavarma.

Tekstivastineet ovat tärkeitä elementtejä ruudunlukijaa käyttävälle ihmiselle. WebAIMin tilastossa yleisimmiksi verkkosivujen saavutettavuusvirheiksi listautuvat virheet, joissa toistuvat perusongelmat tekstivastineiden kanssa. 

  1. Tekstivastineen puuttuminen: Kaikilla sivuilla olevilla kuvilla pitää olla tekstivastine, jossa kuvaillaan sanoin kuvan sisältö parhaalla mahdollisella tavalla. On tärkeää huomioida, että esimerkiksi väreihin liittyvät sanat kuten taivaansininen, ovat näköaistihavaintoja, johon näkövammaisen on vaikea samaistua.

  2. Lomakkeiden puuttuvat nimilaput: Lomakkeet tarvitsevat tekstivastineet. Jos lomake-elementeissä ei ole otettu huomioon ruudunlukijaa, eikä tekstiä ja elementtiä ole sidottu toisiinsa, ei toiminto ruudunlukijalla ole varmaa. Esim. etunimi-kehotetta ei ole yhdistetty tekstikenttään, eikä ruudunlukijalle välity tekstisyötekehote. Ruudunlukija lukee nämä irrallisena, eikä käyttäjä saa selkeää kehotetta kirjoittaa lomakkeelle etunimi.

  3. Tyhjät linkit: Linkissä ei kerrota, mitä siitä tapahtuu tai mihin linkki liittyy, eikä ruudunlukija osaa tulkita kontekstia oikein. Esim. “Lue lisää” vs. “Lue lisää saavutettavuudesta”

  4. Kielitiedon puuttuminen: <html>-elementiltä puuttuu sen lang-attribuutista tieto, joka kertoo käyttäjälle sen, millä kielellä sivusto on. Ilman tätä tietoa ruudunlukija ei tunnista kieltä ja käyttäjä ei saa etukäteen tietää tästä. Esim. espanjaa ymmärtämätön käyttäjä hukkaa espanjalaisella sivustolla vain aikaansa.

  5. Tyhjät näppäimet: Sivustoilla näppäimistä puuttuu usein sisältö ja sitä kautta konteksti. Sisällön puuttumisesta esimerkkinä voisi olla <button>-elementin sisällä oleva <img>-elementti, eli ikoni-näppäin, jolla ei ole kuvaavaa tekstivastinetta tai tekstimuotoista sisältöä lainkaan.

  6. Kontrastivirheet: Värit eivät erotu riittävän selkeästi toisistaan, eikä tekstin ja taustan kontrasti riitä. Esim. harmaalla taustalla oleva valkoinen teksti ei näy.

Edellä luetellut virheet todellakin ovat yleisimpiä, sillä 96,5% kaikista virheistä menee näiden kuuden kategorian alle. Miksi samat virheet toistuvat eikä korjauksia ole tehty?

Kopioidut elementit monistavat saavutettavuusvirheitä 

Verkkokauppa on tuotteiden visuaalista esittelyä, ja siksi sivustoilla on yleensä paljon sisältöä, elementtejä ja komponentteja.

Verkkokauppojen korkeaa saavutettavuusvirheiden määrää selittää osin se, että sivustot vaativat paljon toiminnallisuutta – sivustot perustuvat jatkuvaan interaktioketjuun käyttäjän ja kaupan välillä. 

Kun näppäimenä käytetään jotakin muuta kuin <button>-elementtiä, on tärkeää nimetä ja roolittaa se oikein, jotta interaktio on sujuvaa myös ruudunlukijaa käytettäessä, vaikka visuaaliset tyylittelyt olisi saatukin hiottua tappiinsa

Elementtien määrä nostaa virheiden määrää, mutta ei ole yksin syypää niiden toistuvuuteen.

Saavutettavuusvirheet eivät aina välttämättä ole uniikkeja virheitä. Kun verkkokaupassa samaa, saavutettavuusvirheen sisältämää tuotekomponenttia käytetään jokaisen tuotteen kohdalla läpi koko verkkokaupan, monistuu komponentissa ollut virhe niin moneksi virheeksi kuin tuotteita on kaupassa.

Tämä kehittämisen kannalta  hyvä tapa käyttää samaa komponenttia monessa paikassa tuottaakin siis monistettuja virheitä. Ehkä voisimmekin kysyä, miksei laajalti vaikuttava pieni virhe saa tarpeeksi huomiota korjaamista varten?

Saavutettavuuden tekninen toteuttaminen on monimutkainen asia. Överiksikin voi nimittäin mennä. Ilman huolellista suunnittelua ja johdonmukaista toteutusta voi tuloksena olla myös “liian saavutettava” sivusto, joka kääntyy jo itseään vastaan. 

Parhaimmillaan toteutettuna saavutettavuus palvelee kaikkia sivuston käyttäjiä ja toiminnallisuuden hedelmät satavat liiketoiminnan laariin. Lue lisää siitä, miten investointi saavutettavuuteen maksaa itsensä takaisin.

Valitse verkkopalveluusi kumppani myös arvoperusteisesti

Ihmisten asenteiden ja toimintakulttuurin on muututtava. On ihmeellistä, ettei vähemmistöjen asioita oteta tämän enempää verkossa huomioon 2000-luvulla. 

Muutos on kuitenkin alkanut, se näkyy puheen lisääntymisenä ja parannusten hitaana kasvuna. 

Verkkopalveluita valittaessa on otettava huomioon, kuinka eettisesti palveluntarjoaja asioista ajattelee, ja miten ne näkyvät käytännön tasolla.

 

Haluatko saada oman sivustosi kaikkien käytettäväksi tai haluatko lisätietoja saavutettavuudesta? Me autamme, ota yhteyttä!
Hannes Wuorinen avatar