Miten suunnitellaan saavutettavat verkkosivut?

TeknologiaArvioitu lukuaika 4 min

Jessica Falck

8.11.2022

Mikä saavutettavuus- direktiivi?

Saavutettavuus on käsite, joka nousee usein esiin digitaalisista palveluista puhuttaessa. Sillä tarkoitetaan sitä, että sivuston sisältöjen tulisi olla jokaiselle käyttäjälle tasa-arvoisesti käytettävissä arjen tilanteista tai rajoitteista huolimatta. Esimerkiksi sovellusta tulisi voida käyttää yhdellä kädellä vaikkapa ostoskärryjä työntäessä. Saavutettavuutta varten on luotu kansainvälinen ohjeistus WCAG ( Web Content Accessibility Guideline). Saavutettavuusdirektiivi pitää sisällään liki 50 eri vaatimusta, jotka on jaettu kolmeen eri tasoon: A-, AA- ja AAA-taso.

Avainsanat:

VerkkopalvelutSaavutettavuusWCAGKäytettävyys

Saavutettavuus on kaikille

Käytännössä saavutettavuudella tarkoitetaan, että esimerkiksi näkörajoitteinen henkilö saa ruudunlukulaitteella kaiken tarvitsemansa tiedon tai liikuntarajoitteinen voi käyttää sivustoa pelkästään näppäimistöllä. Se voi myös tarkoittaa seuraavaa:

  • Sisällön tulee olla helposti havaittavaa, vaikka henkilö katsoisi sitä kävellessään.

  • Iän myötä heikentynyt näkö havainnoi tarvitsemansa sisällön.

  • Auringon paistaessa näyttöön käyttäjä näkee yhä lukea tekstejä.

Laki määrittää, mitä ominaisuuksia sivuston tulee täyttää ollakseen saavutettava. Saavutettavuusvaatimukset ovat jaettu neljään eri kategoriaan. Lisäksi jokaiselle vaatimukselle on määritelty mihin tasoon se kuuluu: A-, AA- tai AAA-taso, joista viimeinen on kaikkein saavutettavin ja vaatii eniten toimenpiteitä tason täyttämiseksi.

Yksi saavutettavuusvaatimuksista on, että elementtien välillä on oltava riittävä kontrasti. Värien kontrastia ei ole aina helppo erottaa paljaalla silmällä, jonka vuoksi käytämme aina apuohjelmia tarkastamaan sisältöjen kontrastia.

Sisällön tulee olla helposti havaittavaa

Ensimmäinen saavutettavuuden kategorioista määrittelee sivuston havaittavuutta. Sillä tarkoitetaan, että tiedon ja käyttöliittymän komponenttien tulee olla käyttäjälle helppoja havaita. Vaatimus ilmenee esimerkiksi seuraavilla tavoilla:

  • Kaikelle ei-tekstilliselle sisällölle tulee olla tekstivastine. Käytännössä esimerkiksi kaikilla tärkeää sisältöä esittävillä kuvilla tulee olla alt-teksti, jotta lukuohjelmat voivat tulkita sisältöä.

  • Väriä ei käytetä koskaan ainoana visuaalisena keinona. Esimerkiksi graafeissa tulee olla värin lisäksi joku muu erottava tekijä, kuten vaikka yksi viiva yhtenäisenä ja toinen katkoviivalla.

  • Tekstin asettelussa käytetään maksimissaan 80 merkkiä per rivi ja vältetään pitkän tekstin tasaamista keskelle. Myös rivivälin (rivin korkeuden) on oltava vähintään puolitoista riviä kappaleiden sisällä.

Tekstin asettelulla voidaan vaikuttaa merkittävästi tekstin luettavuuteen. Keskitettyä tekstiä voidaan käyttää tyylikeinona lyhyissä teksteissä, mutta pidemmissä teksteissä keskittäminen on vain haitaksi sisällön luettavuudelle. Parhaiten tarjoamme esteettömän kokemuksen, kun käytämme vasemmalle tasattua tekstiä.

Hallittavalla sivustolla on helppo navigoida

Toinen saavutettavuuden kategoria on hallittava. Tällä tarkoitetaan sitä, että sivustolla tulee voida liikkua myös useammalla eri tavalla. Käytännössä tämä ilmenee esimerkiksi seuraavilla tavoilla:

  • Kaiken sisällön tulee olla hallittavissa näppäimistöllä. Tarkoittaen, että sivustoa voidaan ohjata hiiren lisäksi myös sekä tabulaattorilla että nuolinäppäimillä. Esimerkiksi lomakkeen kentät tulee voida valita aktiiviseksi myös näppäimistöllä.

  • Sivustolla on otsikot, jotka kuvailevat sisältöä. Esimerkiksi autoista kertova artikkeli tulisi otsikoida siten, että käyttäjä ymmärtää tekstin sisältävän tietoa autoista.

  • Jokaisen linkin tulee kertoa selvästi mihin siitä pääsee. Esimerkiksi kerrotaan jo linkkitekstissä, että käyttäjä on siirtymässä toiselle sivustolle.

  • Käyttäjien tulee voida navigoida sivustolla useammalla eri tavalla, etsiä sisältöjä sekä tunnistaa oma sijaintinsa sivustolla. Navigointia voidaan tukea esimekiksi loogisella ja aiheeseen liittyävällä otsikoinnilla.

Kun sivustoa käytetään näppäimistöllä, käyttöliittymällä tulee olla tila, joka näyttää aktiivisena kohdan, joka käyttäjällä on valittuna. Kohdistuksen tulee olla sen verran erottuva, että on helppo ymmärtää missä kohtaa liikkuu sivustolla.

Ymmärrettävä sisältö ohjaa ja tukee käyttöä

Kolmas kategoria on ymmärrettävyys. Sisältö on silloin ymmärrettävää, kun informaatio ja käyttöliittymä tukevat käyttäjän toimintaa sivustolla. Lisäksi sivuston tulee kertoa käyttäjälle mitä tapahtuu ja antaa mahdollisuuksia perua toimintoja. Käytännössä se tarkoittaisi esimerkiksi seuraavaa:

  • Jos sivuston ymmärtämiseen vaaditaan peruskoulun opetuksen vaatimukset ylittävää lukutaitoa, silloin täytyy antaa vaihtoehtoinen sisältö.

  • Käyttäjän tekemän virheen sattuessa osoitetaan selkeästi missä kohtaa virhe on ja kuinka se korjataan. Esimerkiksi lomakkeissa näytetään kohta, joka käyttäjän tulisi korjata.

  • Jos käyttäjän toiminnan seurauksena tapahtuu taloudellisia transaktioita, hänellä tulee olla aina mahdollisuus peruuttaa esimerkiksi lomakkeen lähetys. Lähetetystä lomakkeesta tulee saada palaute, joka kertoo, että viesti on vastaanotettu.

  • Navigointia voidaan tukea myös esimerkiksi näyttämällä moniosaisessa lomakkeessa sen eri vaiheet. Lisäksi käyttäjälle on hyvä osoittaa samalla missä vaiheessa hän parhaillaan on ja tarjota mahdollisuus liikkua eteen- ja taaksepäin.

Väri ei saa koskaan olla ainoa keino kertoa virheestä. Helpotamme lomakkeen täyttäjän elämää, jos osoitamme esimerkiksi virheviestin avulla mikä syötetyssä kentässä on pielessä. Sen lisäksi, että virheviestit tukevat käytettävyyttä, se on myös ehto saavutettavuuden täyttymiseksi.

Toimintavarma sivusto ei hajoa helpolla

Viimeinen neljästä kategoriasta on toimintavarmuus. Sillä tarkoitetaan sisältöjen toimivuutta erilaisilla apuohjelmilla ja -laitteilla sekä sitä, että sivusto latautuu oikein, eikä se mene rikki helposti. Käytännössä se tarkoittaa esimerkiksi seuraavaa:

  • Verkkopalveluiden sisällöt rakennetaan käyttäen merkkauskieliä, esimerkiksi HTML -kieltä. Merkkauskielen avulla sisällöt jaetaan elementeiksi tyyppinsä mukaan ja niille voidaan antaa rooleja ja ominaisuuksia, kuten linkkielementille osoite tai kuvaelementille itse kuvatiedosto.

  • Merkkauskieli varmistaa, että elementtien rakenne on täydellinen, eli sillä on alku ja loppu, ja että elementit ovat keskenään oikeassa järjestyksessä ja suhteessa toisiinsa. Lomakkeen kentät ovat lomake-elementin sisällä ja alaotsikot yläotsikkojen alapuolella. Merkkauskieli varmistaa myös, ettei esimerkiksi yhdellä linkillä ole montaa osoitetta, yksilöiviksi tarkoitetut ID-tunnisteet pysyvät yksilöllisinä ja jokaisella elementillä on myös tekstimuotoinen esitystapa sopivassa formaatissa.

Loogisella otsikkotasojen käyttämisellä helpotetaan kokonaisuuden hahmottamista merkittävästi. Uutta sisältöä suunniteltaessa tulee aina miettiä mille otsikolle mikäkin sisältö on alisteinen. On myös huomioitava, että otsikkotasojen ensisijainen tarkoitus on rytmittää sisältöä oikeiden aihealueiden alle. Lisäksi mitä ylemmän tason otsikossa tärkein sisältö on, sen varmemmin sisällöt näkyvät hakukoneissa.

Design for all

Saavutettavuus on todellista kaikille suunnittelua. Vaikka laki velvoittaa tietyn tason saavutettavuutta vain osalle digitaalisista palveluista, uskomme siihen, että velvotteista huolimatta meidän tulee suunnitella mahdollisimman saavutettavia tuotteita aina kaikille. Näin varmistamme jokaiselle esteettömän pääsyn palveluiden sisältöihin.


Sen lisäksi, että mahdollistamme käytön jokaiselle, saavutettava sivusto parantaa mm. hakukonenäkyvyyttä, konversioastetta, asiakaspolkuja, käytettävyyttä ja pidentää palvelun käyttöikää. Saavutettavasti suunniteltu on siis kestävää ja kannattavaa suunnittelua ja takaa sijoitukselle pidemmän tuoton.


Lähteet:

https://www.saavutettavuusvaatimukset.fi/
https://saavutettavuusdirektiivi.fi/

Jessica Falck

Jessica on visuaalisen suunnittelun monitaituri, jonka erityisenä mielenkiinnon kohteena on käytettävyyden parantaminen visuaalisilla valinnoilla. Jessicalla on tarka silmä pikseleiden hinkkaamiseen ja herkkä korva asiakkaiden toiveiden kuuntelemiseen. Suunnittelun pohjana toimii aina empatia.

Jessica Falck

Designer, Concepts and Content