Tee palvelusta digitaalisesti esteetön – ja kaikki voittavat

Digitaalisten palveluiden tarjoajilla on sama vastuu kuin fyysisten palveluiden tarjoajilla: kaikilla käyttäjillä on oltava mahdollisuus käyttää ja hyötyä palveluista tasapuolisesti. Palveluiden ja tilojen on siis oltava esteettömiä kaikille käyttäjille.

Fyysisten tilojen esteettömyys perustuu siihen, että tilassa pääsee asioimaan sujuvasti esimerkiksi pyörätuolilla. Harva tulee kuitenkin ajatelleeksi, että digimaailmassa esteettömyyteen on aivan yhtä tärkeää kiinnittää huomiota kuin vaikka ostoskeskuksissa tai juna-asemilla – muuten erityisryhmät, kuten näkö- tai kuulorajoitteiset, motorisista häiriöistä tai kognitiivisista ongelmista kärsivät henkilöt, eivät pysty käyttämään digipalveluita sujuvasti.

Mainittujen erityisryhmien edustajat eivät välttämättä navigoi palvelussa hiiren ja visuaalisten vihjeiden avulla, vaan he saattavat käyttää sivustolla liikkumiseen näppäimistöä, ruudunlukuohjelmaa ja puhesyntetisaattoria. Digitaalinen palvelu on esteetön, kun sitä pystyy käyttämään sujuvasti näiden apuvälineiden avulla.

Esteettömiä digitaalisia palveluita suunniteltaessa kiinnitetään huomiota muun muassa värien käyttöön, typografiaan ja visuaalisten elementtien selkeyteen. Kun suunnittelemme digitaalisia käyttöliittymiä, otamme huomioon seuraavia seikkoja, jotka sujuvoittavat palvelun käyttämistä.

Tekstityylit

• Linkkien olisi hyvä erottua muusta sisällöstä ja saman logiikan tulisi säilyä läpi sivuston.
• Sisällön hierarkia ja erottuvat otsikkofontit helpottavat lukijaa ymmärtämään sisällön järjestystä paremmin. Otsikkotunnisteiden (H1-H6) käyttö tekstisisällöissä antaa hyvän yleiskuvan sisällön hierarkiasta lukijalle, joka hyödyntää ruudunlukuohjelmaa.
• Tekstisisällön tulisi olla skaalautuvaa ilman, että teksti leikkaantuu tai menee päällekkäin toisen tekstisisällön kanssa fonttikokoa kasvatettaessa.

Värien käyttö

• Kontrasti tekstin ja sen taustavärin välissä täytyy olla riittävän suuri, jotta sisältö on luettavaa myös heikkonäköiselle käyttäjälle.
• Punavihersokeus on hyvä ottaa huomioon ja olla käyttämättä kyseisiä värejä lähekkäin.
• Värisokeiden ja muiden näkörajoitteisten on vaikea tulkita sisältöä, jos informaatio tuodaan esiin pelkän värin avulla. Esimerkiksi saatavuustiedoissa ja notifikaatioissa on hyvä käyttää värin lisäksi ilmoitusta kuvaavaa ikonia ja selittävää sanaa. Toki liiallinen informaatio voi osoittautua yhtä lailla haitaksi kuin liian vähäinen informaatio.

Esimerkki 1. Sisällön luettavuus paranee, kun painikkeen tekstin ja taustan kontrasti on riittävän suuri. Lisäksi otsikoinnissa on syytä olla mahdollisimman kuvaileva.

Esimerkki 2. Esteetön virheilmoitus sisältää informaatiota sanallisesti ja selkein visuaalisin viestein.

Kohdistus & elementtien otsikointi

• Henkilölle, joka liikkuu sivustolla tab-näppäimen avulla on tärkeää, että valittuna olevat elementit, kuten painikkeet tai tekstikentät, erottuvat selkeästi muusta sisällöstä. Näin käyttäjä näkee helposti, missä kohtaa hän tabulaattorin avulla liikkuu sivustolla.
• Painikkeiden ja linkkien selkeät otsikoinnit ja nimeämiset ovat tärkeitä ruudunlukuohjelmaa käyttävälle. Samoin täytettävät tekstikentät jäävät helposti huomaamatta, jos niitä ei ole otsikoitu.
• Erityisesti lomakkeissa ja tekstikentissä on esteettömyys-näkökulmasta paljon huomioitavaa mm. otsikoinnin selkeys, kentän aktiivisuus-tilan selkeä erottuminen ja ilmoitukset kentän täyttämisestä joko virheellisesti tai onnistuneesti.

Multimediasisällöt

• Tekstivastineiden (engl. alt text) käyttö kuvaelementeissä on olennaista, jotta näkörajoitteiset ymmärtävät, mitä kuva esittää. Tekstivastineissa elementin sisältö ja konteksti tulee kuvailla mahdollisimman tarkkaan ajatellen henkilöitä, jotka eivät pysty näkemään niitä.
• Video- ja äänisisältöjen esteettömyyttä parannetaan tekstityksillä tai puhtaaksi kirjoitetuilla tekstitiedostoilla.

Erityisryhmien käyttäjille käyttöliittymän esteettömyys on olennaista, mutta samalla se parantaa sivuston saavutettavuutta kaikille. Esteettömyyden huomioiminen näkyy kaikille käyttäjille sujuvampana käyttökokemuksena selkeämmän ulkoasun ja jäsennellyn sisällön kautta.

Myös hakukoneet kiittävät: moni ruudunlukuohjelmaa varten huomioitu seikka (kuten alt-tekstit) lisäävät myös palvelun hakukonenäkyvyyttä. Paras lopputulos on saavutettu, kun erityisryhmiin kuuluvat käyttäjät saavat palvelustasi hyvän käyttökokemuksen, ilman turhautumista.

Näkövammaisten liiton tarkistuslista verkkosivun tekijöille

Euroopan parlamentin ja neuvoston saavutettavuusdirektiivi

Euroopan komission näkemyksiä verkkopalveluiden saavutettavuudesta

Esteettömyysvinkkejä digipuolen suunnittelijoille

Brittiläisen front-end developerin Alistair Dugginin näkemyksiä esteettömyydestä

Tutustu W3C:n esittämiin esteettömyysstandardeihin (WAI-ARIA)