Verkkopalveluiden saavutettavuus
29.1.2020 Kaktu Kuparinen, Avoine Oy
• Saavutettavuus on verkkomaailman esteettömyyttä ja tasa-arvoa.
• Saavutettavuuden huomioiminen takaa mahdollisimman monille ihmisille tasavertaiset mahdollisuudet käyttää digitaalisia palveluita rajoitteistaan huolimatta.
• Saavutettavuus liittyy mm. tekniikkaan, ulkoasuun, toimintoihin, sisältöön sekä video- ja liitetiedostoihin.
• Suunnittelijoiden, toteuttajien, sisällöntuottajien ja ylläpitäjien pitäisi hallita vähintään perustiedot saavutettavuudesta.
• Saavutettavuus riippuu aina ihmisestä ja tilanteesta. Se mikä on yhdelle saavutettavaa, ei riitä toiselle, koska rajoitteita voi olla monenlaisia.
• Rajoitteita voi ilmetä erilaisissa tilanteissa myös käyttäjille, joilla ei ole mitään fyysistä vammaa tai
kehityksellistä rajoitetta. Jos olet esimerkiksi paikassa, jossa et voi katsoa verkkosivuilla olevaa videota äänet päällä, tekstitetty video ratkaisee ongelman.
Mitä verkkopalveluiden saavutettavuus on?
Tekniikka ja sisältö kulkevat käsi kädessä
Tekninen saavutettavuus tarkoittaa, että verkkopalvelua voidaan käyttää erilaisten teknisten apuvälineiden avulla. Teknisesti saavutettavissa oleva verkkopalvelu on koodattu virheettömästi ja huolellisesti saavutettavuusvaatimuksia noudattaen.
Sisällön saavutettavuus tarkoittaa, että verkkopalvelun sisältö on helposti
jokaisen käyttäjän ymmärrettävissä ja käytettävissä. Sisällön saavutettavuutta voidaan parantaa esimerkiksi käyttämällä sivuilla hyvää yleiskieltä ja välttämällä vaikeasti ymmärrettäviä termejä.
• Vaikka verkkopalvelun teknisessä toteutuksessa olisi otettu huomioon saavutettavuus, huolimaton
sisällöntuotanto voi aiheuttaa sen, ettei verkkosivu olekaan julkaisunsa jälkeen enää täysin saavutettava.
• Hyvä verkkopalvelutoimittaja pystyy paitsi toteuttamaan teknisesti saavutettavia verkkopalveluita, myös ohjeistamaan ylläpitäjiä saavutettavan sisällön tuottamisessa. Lopulta vastuu saavutettavuutta ylläpitävästä sisällöntuotannosta on kuitenkin sisällöntuottajalla itsellään.
• Saavutettavan sisällön tuottamiseen kannattaa perehtyä ja tarvittaessa pyytää siihen asiantuntijan neuvoja.
• Noin 15 % koko maailman väestöstä* ei pysty käyttämään palveluita, jotka eivät ole saavutettavia.
Digitalisaation myötä nämä ihmiset jäävät pahimmillaan kokonaan palveluiden ulkopuolelle, mikäli saavutettavuutta ei huomioida.
• Digitaalisten palveluiden käyttöön on olemassa erilaisia apuvälineitä, jotka mahdollistavat esim.
verkkosivujen käytön rajoitteista huolimatta (kuten sokeiden selaimet, puheohjaus, ruudunlukija, puhallusohjaus, jne) Mikäli saavutettavuutta ei ole huomioitu verkkosivuilla, nämä apuvälineet eivät pysty toimimaan oikealla tavalla.
• Suurin osa saavutettavia palveluita tarvitsevista ihmisistä kärsii oppimis- ja keskittymisvaikeuksista. Yksi tärkeimmistä teemoista saavutettavuuden ympärillä onkin helppolukuisen ja ymmärrettävän
verkkosisällön tuottaminen.
*Lähde: https://saavutettavuusdirektiivi.fi/
Yleistietoa saavutettavuudesta
• Saavutettavuus on pohjimmiltaan hyvin lähellä hakukoneoptimointia.
• Hakukoneet tutkivat sisältöä samankaltaisesti kuin näkövammaisten ruudunlukuohjelmat.
• Hakukonerobottia kiinnostavat kuvaavat otsikot, kuvien vaihtoehtoiset tekstit, otsikoiden looginen käyttö sekä selkeä ja aiheen kannalta oleellisia sanoja toistava tekstisisältö.
• Sivuston rakenteella ja hierarkialla on suuri merkitys sekä saavutettavuuden, että hakukoneoptimoinnin kannalta.
• Kun verkkosivulla otetaan huomioon saavutettavuus, siitä tulee samalla myös hakukoneystävällinen.
• Saavutettavuudesta on hyötyä kaikille ja sen huomioiminen kehittää verkko- ja mobiilipalveluiden laatua, lisää taloudellista hyötyä sekä parantaa asiakaskokemusta.
Saavutettavuus ja hakukoneoptimointi
• EU-direktiivi julkisen sektorin verkkosivustojen ja mobiilisovellusten saavutettavuudesta tuli voimaan joulukuussa 2016. Direktiivissä tehtiin linjaus saavutettavuuden minimitasosta ja keinoista valvoa sen toteutumista.
• Vaatimusten piiriin kuuluvat esimerkiksi kunnat, koulut ja virastot, posti ja liikenne sekä vesi- ja energialaitokset. Lisäksi direktiivi koskee tahoja, jotka saavat valtiolta tukea verkkopalveluihin.
• Saavutettavuus kannattaa ehdottomasti huomioida kaikilla verkkosivuilla siitä huolimatta, vaatiiko direktiivi sitä vai ei. Pelkästään Suomessa on yli 1,2 miljoonaa ihmistä, jotka tarvitsevat saavutettavia palveluita.
Ketä saavutettavuusdirektiivi koskee?
Tärkeät päivämäärät
23.9.2018 jälkeen julkaistujen julkisen sektorin verkkosivustojen pitää olla saavutettavuusvaatimusten mukaisia 23.9.2019 mennessä ja ennen sitä julkaistujen verkkosivustojen taas 23.9.2020 mennessä.
Mobiilipalveluille on annettu pidempi siirtymäaika ja niiden tulee täyttää saavutettavuusvaatimukset 23.6.2021 mennessä.
Myös Intranet- ja Extranet –sivustoilta vaaditaan jatkossa saavutettavuutta.
Intranettien tulee noudattaa vaatimuksia, mikäli ne julkaistaan tai uudistetaan täysin 23.9.2019 jälkeen. Vanhempien Intranet -sivustojen ei tarvitse toteuttaa muutoksia.
Yleiset saavutettavuusvaatimukset
Saavutettavuusvaatimukset on määritelty yleisessä ohjeistuksessa nimeltä WCAG eli Web Content
Accessibility Guidelines. Ohjeistus on tekninen ja melko vaikeaselkoinen. WCAG:n viimeisin versio löytyy
osoitteesta https://www.w3.org/WAI/WCAG21/quickref/
• Uusilla palveluilla tasovaatimus on korkeampi kuin vanhoilla, sillä vanhojen palveluiden muokkaaminen on työlästä.
• Jo verkkopalveluiden suunnitteluvaiheessa tulisi päättää, millaiseen saavutettavuusluokitukseen pyritään. Sekä verkkopalvelun tilaajan että toimittajan sitoutua tulee sitoutua valittuun tasoon ja sen ylläpitämiseen esimerkiksi visuaalisen ilmeen, teknisten ominaisuuksien, rakenteen ja sisällön osalta.
• Pelkästään verkkopalvelun toimittaja tai koodari ei pysty olemaan täysin vastuussa sivuston saavutettavuudesta.
Sisällöntuottajalla (eli usein asiakkaallamme) on vähintään yhtä suuri vastuu siitä, että sivusto pysyy saavutettavana myös jatkossa.
• Tasoja tärkeämpää on tuntea oman verkkopalvelun käyttäjäryhmät ja vastata juuri heidän tarpeisiinsa. Jos käyttäjien tarpeet saavutettavuuden osalta ovat keskenään ristiriitaisia, pitää miettiä mikä on kokonaisuuden kannalta toimivin ratkaisu.
Saavutettavuusluokitukset
WCAG 2.1 -standardi kattaa 13 saavutettavuusperiaatetta. Ne jakautuvat kolmelle eri tasolle, jotka ovat A (matalin), AA ja AAA (korkein). Yksittäisiä kriteereitä on 78 kappaletta, joista lain velvoittamia on
käytännössä 49. Laki ei velvoita toteuttamaan AAA-tason kriteereitä.
• A on saavutettavuuden perustaso. Se parantaa yleensä saavutettavuutta vain osalle käyttäjistä, joilla on erityisiä rajoitteita verkkopalvelujen käytössä. Esimerkiksi videoiden tekstitysvaatimus on A-tason
vaatimus.
• AA-tason kriteerit parantavat saavutettavuutta entistä laajemmalle joukolle käyttäjiä. Esimerkiksi vaihtoehtoisen, kuvailevan ääniraidan tarjoaminen videoiden yhteydessä on AA-tason kriteeri.
• AAA-tason kriteerit parantavat saavutettavuutta vielä useammalle, mutta osa niistä voi olla melko helpostikin toteutettavissa. Esimerkiksi sisältöjen tarjoaminen viittomakielisinä videoina tai tekstin ymmärrettävyyden parantaminen ovat AAA-tason kriteerejä.
• Luokitusta AAA on mahdoton saavuttaa kaikella sisällöllä, joten se ei ole saavutettavuusdirektiivissäkään yleisenä vaatimuksena. Tavoitetaso on useimmissa tapauksissa AA.
A, AA ja AAA
Jos AAA-luokitukseen on jollain osa-alueella mahdollista päästä, siihen kannattaa aina pyrkiä!
• Direktiivi ei vaadi, että kaiken sisällön tulisi olla verkkosivuilla ja mobiilisovelluksissa selkokielistä. Selkokielen käyttö on kuitenkin hyvä tapa edistää saavutettavuutta.
• Selkokielestä hyötyy suurin osa saavutettavia palveluita tarvitsevista ihmisistä, kuten mm. oppimis- ja keskittymisvaikeuksista kärsivät, kehitysvammaiset, aivoverenkiertohäiriöistä joko tilapäisesti tai pysyvästi
vammautuneet, iäkkäät tai hyvin nuoret ihmiset, autismin kirjoon kuuluvat, muistisairaat sekä maahanmuuttajat.
• Selkokielen lisäksi luettavuutta ja ymmärrettävyyttä parantavat kappalejaot ja tekstin selkeä asettelu. Käytä
mahdollisimman tavallisia ja yleisiä sanoja. Vältä vaikeita termejä, monimutkaisia ilmaisuja ja lauseenvastikkeiden käyttöä (mieluummin ”kun kaikki kissat olivat nukahtaneet” kuin ”kaikkien kissojen nukahdettua”).
• Sopiva rivipituus on 35–70 merkkiä. Jos kasvatat rivipituutta, kasvata myös rivikorkeutta ja merkkiväliä.
• Pitkät ja leveät tekstimassat ovat kaikille käyttäjille väsyttäviä lukea. Kerro yksi asia yhdessä lauseessa ja yksi kokonaisuus yhdessä kappaleessa. Käytä mahdollisimman helppolukuista ja riittävän suurikokoista fonttia.
Selkokieli, typografia ja kappalejaot
• Elementtien järjestyksen HTML-koodissa tulee noudattaa sisällön loogista lukemisjärjestystä. Jos näin ei ole toimittu, ruudunlukijat eivät pysty lukemaan sivua oikeassa järjestyksessä ja hyppivät epäloogisesti aiheesta toiseen.
• Samasta syystä otsikkotasoja tulee käyttää hierarkisesti. Tyypillisesti otsikkotasoa 1 eli pääotsikkoa saa käyttää sivulla vain kerran. HTML sisältää 6 eri otsikkotasoa, joita on käytettävä systemaattisesti oikein, jotta ruudunlukija lukee tekstin oikeassa järjestyksessä.
• Merkitse otsikot otsikoiksi editorissa – näin varmistat, että ne asettuvat kooditasolla oikein. Älä koskaan tee otsikoita pelkästään lihavoimalla tekstiä!
• Sivun alkuun kannattaa lisätä hyppylinkki, jonka avulla käyttäjä voi siirtyä suoraan sisältöön. Muuten ruudunlukija aloittaa lukemisen esimerkiksi ylävalikosta ja käyttäjä joutuu odottamaan ennen kuin pääsee käsiksi sisältöön.
• Useimmat sokeat käyttäjät haluavat kokonaiskuvan sivustosta ennen sen käyttöä, joten hyppylinkin lisäksi sivun alatunnisteeseen kannattaa lisätä Siirry sivukarttaan -linkki.
• Kaikki ruudunlukijat toimivat eri tavalla, mikä tekee sivuston koodaamisesta haastavaa.
HTML-elementtien käyttö ja sivun hierarkia
• Käytä selkeitä värejä ja vältä liian voimakasta saturaatiota.
• Huomioi värisokeuden mahdollinen vaikutus. Noin 8 % miehistä on punavihersokeita. Jonkin asteisesta värinäkökyvyn puutteesta kärsii miehistä noin 10 % ja naisista noin 0,5 %.*
• Esimerkiksi osoitteessa https://www.color-blindness.com/coblis-color-blindness-simulator/ pystyy testaamaan, miltä esimerkiksi verkkosivulta otettu kuvakaappaus näyttää punavihersokean silmin.
• Värin lisäksi tai sijasta sivuelementtejä voidaan korostaa esimerkiksi pinnan kuvioinnilla, jolloin värisokeatkin erottavat ne toisistaan.
• Väri ei koskaan saisi yksinään toimia sivustolla erottavana tekijänä, kuten esimerkiksi olla ainoana merkkinä
korostamassa valikon aktiivista kohdetta. Kohteen aktiivisuus kannattaa osoittaa mieluumin vaikkapa alleviivauksella.
• Olennaista on erityisesti riittävä kontrasti tekstin ja taustan välillä.
Värien käyttö verkkosivuilla
Esimerkki liian heikosta kontrastista tekstin ja taustan välillä.
Toinen esimerkki liian heikosta kontrastista.
Myös valkoinen teksti tummalla pohjalla voi olla raskasta lukea.
*Lähde: https://www.terveyskirjasto.fi/terveyskirjasto/tk.koti?p_artikkeli=dlk00347
• Lomakekenttien järjestyksen ja sijainnin on oltava loogisia sekä nimien selkeitä ja ymmärrettäviä.
• Lomakkeen painikkeiden tulee olla luettavissa ja helppokäyttöisiä.
• Lomakkeen täyttöohjeet tulee ilmoittaa käyttäjälle selkeästi ja esimerkiksi täyttövirheiden tapauksissa on kerrottava virheen sijainti sekä ohjeistettava, miten kyseinen kohta kuuluu täyttää.
• Jos jokin kenttä jää puutteellisesti täytetyksi, siitä tulee ilmoittaa selkeästi ja mieluiten sanallisilla ohjeilla, eikä esimerkiksi korostamalla kyseistä kenttää pelkästään värikoodilla tai asteriskilla.
• Lomakkeen lähettämisen jälkeen käyttäjän tulee saada selkeä ja riittävä palaute toiminnon onnistumisesta tai epäonnistumisesta.
Lomakkeet verkkosivuilla
• Kuva-, video- ja äänitiedostojen sisältämä tieto tulee esittää verkkosivuilla myös tekstinä.
• Sisällön kannalta merkityksellisiin kuviin lisätään vaihtoehtoinen teksti, joka kertoo esimerkiksi näkövammaisille
mahdollisimman tarkasti kuvaillen, mitä kuvassa tapahtuu. Mikäli kyseessä on koristekuva tai muun sisällön kannalta merkityksetön kuva, alt-tekstin kentän voi jättää tyhjäksi.
• Ruudunlukuohjelmat tunnistavat kuvat ja ilmoittavat käyttäjälle, että kyseessä on kuva, joten älä turhaan aloita vaihtoehtoista tekstiä tyyliin ”Kuva…” tai ”Kuvassa…”. Päätä vaihtoehtoinen teksti aina pisteeseen – muuten ruudunlukija ei tiedä mihin lause loppuu.
• Hyvä vaihtoehtoinen teksti nostaa myös verkkosivun sijoitusta hakutuloksissa ja vaikuttaa kuvahaun tuloksiin.
• Videoiden tulee olla tekstitettyjä tai niistä tulee kirjoittaa vaihtoehtoinen selostus tekstimuodossa. Myös livevideot tulee tekstittää. Mikäli livelähetyksen reaaliaikainen tekstitys ei ole mahdollista, videon on oltava tekstitettynä 14 vuorokauden kuluessa julkaisusta, jos se aiotaan jättää esille.
Kuvat ja videot verkkosivuilla
• Linkit ovat keskeisessä osassa verkkosisällön saavutettavuuden suhteen.
• Kannattaa välttää pelkän verkko-osoitteen laittamista linkkitekstiksi. Myös kuva voi toimia linkkinä tai osana linkkiä.
• Linkkitekstien pitää olla kuvaavia ja kertoa riittävästi linkin kohteesta. Ruudunlukija tietää, että kyseessä on linkki, joten sitä ei tarvitse erikseen kertoa linkkitekstissä.
• ”Lue lisää” tai ”Klikkaa tästä” on esimerkki huonosta linkkitekstistä. Parempi vaihtoehto on esimerkiksi ”Lue lisää tuotteistamme” tai ”Tutustu toimintaamme”.
• Jos linkki ohjaa esimerkiksi PDF- tai Word-dokumenttiin, siitä kannattaa mainita linkkitekstissä.
• Mikäli linkki ohjaa vieraskieliselle tai ulkopuoliselle sivulle, siitä on myös syytä kertoa.
• Lähtökohtaisesti kannattaa suosia linkkien avaamista samaan välilehteen, sillä käyttäjät ovat tottuneet palaamaan edelliselle sivulle selaimen Takaisin-nappia painamalla ja voivat hämmentyä, kun se ei toimikaan.
Linkit verkkosivuilla
• Saavutettavuuden teknistä puolta voidaan testata helposti selaimeen asennettavilla lisäosilla. Niiden avulla voidaan tarkistaa vaikkapa se, onko tekstin ja taustan välinen kontrasti riittävä, onko sivustolla epäselviä linkkejä tai onko kuville lisätty alt-tekstit.
• Useat selaimet mahdollistavat sisältöjen lukemisen ääneen. Ruudunlukuohjelmia tai selainten
ruudunlukuominaisuuksia kokeilemalla voidaan arvioida ainakin päällisin puolin, onko sivusto rakennettu hierarkisesti oikein.
• Wordissa on mahdollista tarkistaa nappia painamalla dokumentin saavutettavuus.
• Youtube mahdollistaa automaattisen videoiden tekstittämisen ja tekstityksiä voi myös korjailla.
• Koneellinen testaaminen ei koskaan voi antaa täydellistä kuvaa sivuston saavutettavuudesta. Tutkimusten mukaan koneellisilla testeillä tavoitetaan vain noin 15-20 % saavutettavuuteen ja käytettävyyteen liittyvistä ongelmista.*
• Täysin luotettavan arvioinnin voi tehdä vain asiantuntija, jolla on vankkaa kokemusta ja ymmärrystä erityisryhmien huomioimisesta verkkopalvelujen suunnittelussa. Lisäksi testauksessa voidaan käyttää apuna kohderyhmään kuuluvia testihenkilöitä. Saavutettavuustestausta tekee Suomessa esimerkiksi Annanpura Oy.
*Lähde: https://www.nkl.fi/fi/etusivu/saavutettavuus-esteettomyys/saavutettavuus-verkossa-ja-mobiililaitteissa/saavutettavuuden-testaaminen-palvelujen-kehitysprosessissa
Saavutettavuuden testaaminen
• Jokaisesta lainsäädännön piiriin kuuluvan toimijan verkkopalvelusta tulee löytyä saavutettavuusseloste, josta tulee myös ilmi, millä aikataululla sivuston tulee täyttää direktiivin määrittämät vaatimukset.
• Saavutettavuusselostessa kerrotaan, mitkä sivuston osat eivät ole vielä saavutettavia. Lisäksi tulee kertoa, mitä aiotaan tehdä, että niistä saadaan sellaisia.
• Selvityksessä tulee mainita vaihtoehtoisista tavoista käyttää niitä palveluita ja sisältöjä, jotka eivät ole vielä saavutettavia.
• Selosteesta tulee löytyä mahdollisuus ottaa sivuston omistajaan yhteyttä ja raportoida, mikäli sivusto ei täytä saavutettavuusvaatimuksia.
• Selosteen tulee tarjota käyttäjälle mahdollisuus tehdä saavutettavuuskantelu Etelä-Suomen aluehallintovirastolle.
• Käytännössä saavutettavuusdirektiivin toteutumista valvotaan käyttäjien tekemien kanteluiden perusteella.
Saavutettavuusseloste
HAVAITTAVUUS
Sisältö ja käyttöliittymän osat on esitettävä siten, että käyttäjät voivat havaita ne. Havaittava
esitystapa vaatii riittävän kontrastin, selkeät värit, näkyvät painikkeet, tarpeeksi suuren fonttikoon sekä selkeän fontin.
HALLITTAVUUS
Verkkopalvelun käyttöliittymän osia ja navigointia on pystyttävä hallitsemaan myös pelkän
näppäimistön avulla ja muilla vaihtoehtoisilla ohjausmenetelmillä.
YMMÄRRETTÄVYYS
Verkkopalvelussa olevan tekstin tulee olla selkeää ja niin helppolukuista, ettei sen ymmärtäminen vaadi peruskoulutason vaatimukset ylittävää lukutaitoa.
Tekstin lisäksi myös käyttöliittymän tulee olla selkeä ja ymmärrettävissä.
TOIMINTAVARMUUS
Sisällön on oltava niin toimintavarmaa, että
erilaiset lukuselaimet ja muut avustavat teknologiat pystyvät tulkitsemaan sitä luotettavasti ja
ymmärrettävästi. Rikkinäistä koodia ei saa olla.
Saavutettavuuden neljä periaatetta
Tämän esityksen lähteinä on käytetty saavutettavuuskoulutuksessa hankitun tiedon tueksi mm. seuraavilta sivustoilta löytyvää informaatiota:
https://www.saavutettavuusvaatimukset.fi/
https://www.saavutettavasti.fi/
https://saavutettavuusdirektiivi.fi/
https://nkl.fi/fi/etusivu/saavutettavuus-esteettomyys/saavutettavuus-verkossa-ja-mobiililaitteissa/tarkistuslista-verkkosivujen-tekijoille https://papunet.net/saavutettavuus/saavutettavien-verkkosivujen-suunnitteluopas
https://papunet.net/saavutettavuus/verkkosisallon-saavutettavuusohjeet-wcag
https://www.nkl.fi/fi/etusivu/saavutettavuus-esteettomyys/saavutettavuus-verkossa-ja-mobiililaitteissa
