Saavutettavuus on suunnittelijan supervoima

Laura Aalto & Kati Paavilainen14.5.2019SisältöLukuaika 5 min

Digitaaliset palvelut kuuluvat tasavertaisesti kaikille – tilanteesta ja käyttäjästä riippumatta. Lue asiantuntijoidemme vinkit saavutettavuuden parantamiseen.

Stressi, jäätyneet sormet, sylissä oleva vauva. Useat, myös hetkelliset tilanteet, vaikuttavat toimintakykyymme ratkaisevasti. Saavutettavat verkkopalvelut ja digitaaliset tuotteet ovat tällöin todella tarpeen. Lue kolme vinkkiämme saavutettavuuden parantamiseen!

Toimintakykyä hankaloittava hetki voi olla vain tilapäinen, mutta on lukuisia ihmisiä, joilla on elinikäisiä toimintarajoitteita. Mikään rajoite ei kuitenkaan saisi olla syy sille, että palvelut eivät sovi kaikille. Hämähäkkimiehen sedän sanoin: “Suuri valta tuo mukanaan suuren vastuun”. Suunnittelijoilla on palveluita luodessa valta, ja sen myötä myös vastuu siitä, että digitaaliset palvelut ovat tasavertaisesti kaikkien käytettävissä – tilanteesta ja käyttäjästä riippumatta.

Saavutettavuus on tänä vuonna erityisen ajankohtainen teema, sillä EU:n digitaalisten palveluiden saavutettavuusdirektiivi ja sen edellyttämä uusi lainsäädäntö on astunut voimaan. Voit lukea lisää saavutettavuusdirektiivistä aluehallintoviraston sivuilta. Suomessa on yli miljoona toimintarajoitteista ihmistä, jotka käyttävät verkkopalveluita. Jo tämän takia saavutettavuus tulee ottaa huomioon kaikkia digitaalisia palveluita suunniteltaessa, mutta kuten olemme todenneet blogissa jo aiemmin, saavutettavuus tekee palveluista parempia kaikille.

Miten suunnitella saavutettavia palveluita?

Kun suunnittelijalla on tarpeeksi ymmärrystä saavutettavuudesta, oikeanlaisia ratkaisuja tulee tehtyä automaattisesti palveluita suunnitellessa. Saavutettavuus kulkee käsi kädessä käytettävyyden kanssa, eli kun suunnitellaan saavutettavuuden periaatteiden mukaista palvelua, se parantaa usein myös palvelun käytettävyyttä.

Tärkeimpiä muistettavia asioita on sivuston selkeä ja yhdenmukainen rakenne, hyvä ja monipuolinen navigoitavuus sekä helppolukuinen sisältö. Visuaalisen suunnittelun näkökulmasta typografian, tyylien ja asettelun on oltava selkeitä. Tekstin ja taustan välillä on myös oltava riittävän suuri kontrasti, jotta palvelu on helposti sekä silmäiltävissä että luettavissa. Lisäksi tiedon – kuten kaavioiden ja infografiikan – tuottamisessa tulee antaa värien lisäksi muitakin vihjeitä lukijalle, käyttämällä esimerkiksi tekstiä ja ikoneita. Tekstin seassa olevat linkit kannattaa tuoda visuaalisesti selkeästi esille esimerkiksi alleviivauksella. Seuraavaksi käymme läpi muutaman yleisen ongelmatilanteen ja niihin esimerkkiratkaisut.

Kolme tapaa parantaa palvelun saavutettavuutta

1. Varmista riittävä kontrasti

Huolehdi, että tekstin ja taustan välinen kontrasti on riittävän suuri (WCAG 2.1 AA-tasolla vähintään 4.5:1). Jokin väriyhdistelmä saattaa toimia erinomaisesti henkilölle joka näkee hyvin, mutta olla todella haastava värisokealle tai heikkonäköiselle, jolloin tekstin lukeminen on mahdotonta. Kontrastien tärkeys korostuu mobiililaitteilla, joita käytetään usein ulkona auringonpaisteessa tai illalla hämärällä näytöllä. Kontrastin tarkistamiseen on olemassa useita työkaluja, yksi sellainen on Web AIM:in Color Contrast Checker.

Myös teksti suoraan kuvan päällä on lähtökohtaisesti haasteellinen, sillä kuviollinen ja monisävyinen tausta heikentää merkittävästi luettavuutta.

img-1_contrast.pngimg-2_contrast.png

Jos tekstiä haluaa käyttää kuvan päällä, yksi tapa taata tekstin luettavuus on esimerkiksi lisätä tekstin taustalle taustaväri.

2. Vältä placeholdereita lomakkeissa

Verkkopalveluissa törmää usein lomakkeisiin, joissa on pelkkiä placeholdereita (esimerkiksi täytettävässä kentässä lukee “sähköposti”). Placeholder-tekstit ovat useimmiten vaaleanharmaita ja näin ollen kontrastiltaan huonoja taustaa vasten. Placeholder-tekstit myös usein katoavat käyttäjän kirjoittaessa kenttään. Tämä toiminto vaikeuttaa käytettävyyttä. Suunnittelija ei saisi olettaa, että käyttäjä muistaa ja tietää mitä on tekemässä lomakkeita täyttäessään. Tämän takia kenttäotsikot (labels) ovat suositeltavia lomakkeissa – ne eivät katoa ja käyttökokemus on sujuvaa, kun käyttäjä näkee koko ajan kontekstin.

img-5_form_v2.png

3. Selkeä sisältörakenne

Verkkopalvelun hyvin suunniteltu hierarkkinen sisältörakenne auttaa käyttäjää ymmärtämään ja lukemaan sisältöä paremmin. Käyttäjät, joilla on esimerkiksi visuaalisia haasteita hyötyvät sisällön johdonmukaisuudesta, kun he voivat nopeasti silmäillä sisällön otsikkotasolla. Myös ruudunlukijat hyödyntävät juuri otsikkoja, ja lisäksi selkeä sisältörakenne parantaa hakukoneoptimointia.

Fontin tulisi olla tarpeeksi suurta sekä selkeää ja rivivälin riittävän suuri, jolloin lukeminen helpottuu eivätkä rivit pompi silmissä. Myös rivien pituuteen kannattaa kiinnittää huomiota: sopiva rivi on noin 80 merkkiä pitkä.

Tee palvelustasi saavutettava

Yritykselle on hyötyä siitä, että saavutettavuus on otettu verkkopalvelun suunnittelussa alusta lähtien huomioon. Palvelu on sen myötä helppokäyttöisempi ja hakukoneoptimointi- eli SEO-ystävällinen ja saavuttaa lisäksi laajemman käyttäjäkunnan. Samalla taataan kaikille käyttäjille tasavertaiset mahdollisuudet käyttää palveluita.

Kiinnostaako verkkopalvelusi saavutettavuus ja keinot miten sitä voisi parantaa? Saavutettavuuden ammattilaisemme osaavat neuvoa sinua mistä lähteä liikkeelle. Ota yhteyttä, autamme mielellämme!