Visuaalisen viestinnän opiskelujen jälkeen saavutettavuus alkoi tulla jo hieman korvista, mutta valmistumisen jälkeen tajusin, ettei siitä puhuttu lähellekään tarpeeksi. Sen lisäksi, että useat ihan oikeasti tarvitsevat saavutettavampia palveluita, on saavutettavat verkkopalvelut myös laissa määrätty tietyille tahoille. Vaikka laki ei vaadikaan yksityisiä yrityksiä tekemään saavutettavaa sisältöä, pitäisi alkaa huolestumaan, jos minulla, nuorella diginatiivilla on vaikeuksia nähdä, löytää tai selvittää verkkosivuilta asioita. Hommat on helpompi tehdä alusta asti oikein, kuin lähteä jälkeenpäin korjailemaan.
Aluksi selitän todella tiivistetysti, miksi WCAG-ohjeistus on tärkeä ja mitä se pitää sisällään. Jos tämä asiahumpuukki ei kiinnosta, voit rullata suoraan vinkkeihin.
Digipalveluiden saavutettavuus suomessa pyörähti käyntiin toden teolla vuonna 2018, kun EU:n saavutettavuusdirektiivi digitaalisista verkkopalveluista astui voimaan. Tämän jälkeen julkaistujen uusien verkkopalveluiden tulisi siis olla saavutettavia. EU:n saavutettavuusdirektiivi koskee kaikkia julkisia verkkopalveluita, kuten valtiota, kuntia, yliopistoja, korkeakouluja sekä julkisten tahojen omistamia liikelaitoksia. Vaikka saavutettavuusdirekstiivi ei varsinaisesti koske yksityisiä yrityksiä, moni haluaa kuitenkin ottaa saavutettavuuden huomioon uusien verkkopalveluiden kanssa.
Verkkopalveluille on määritelty WCAG-ohjeistus, jota käytetään monesti saavutettavuusvaatimusten perustana. Ohjeistuksen tavoitteena on varmistaa saavutettavuuden minimitaso:
WCAG-kriteerit ovat jaettu kolmeen vaatimustasoon: A, AA ja AAA. A-taso on ns. perustaso, johon kuuluu esimerkiksi videoiden tekstittäminen. Perustasoon kannattaa mielestäni pyrkiä ihan jokaisen. AA-taso on jo tiukempi kriteereiltään, mutta on se taso, jota laki vaatii saavutettavuusdirektiivin alaisia tahoja pyrkimään. Poikkeuksena vaatimuksessa on kuitenkin suorat verkkolähetykset, joiden ei tarvitse noudattaa kriteereitä. AAA-taso parantaa saavutettavuutta vielä isommalle yleisölle: esimerkiksi sisältöjen tarjoaminen viittomakielisinä videoina.
WCAG-ohjeistuksen lista on pitkä. A4 kokoisille papereille tulostettuna noin tuhannen sivun pituinen. Keräsin listasta muutamia nostoja, joita jokainen suunnittelija ja vaativa asiakas voi ottaa huomioon verkkosivuja tehtäessä. Oikeasti tein poiminnat Papunetin tarkistuslistasta (papunet.net), jossa on todella hyvin tiivistetty tarpeelliset tiedot.
Yksinkertaisesti sivuilla olevan materiaalin on erotuttava toisistaan sekä taustasta. Tekstin ja taustan kontrasti on yksi tärkeimmistä tavoista varmistaa luettavuus. Värien kontrastia kuvataan värien tummuuskontrastilla, jonka testaamiseen löytyy useita sivustoja (itse käytän WebAIM Contrast Checkeriä). Sivuston tekstin ja taustan välinen kontrasti on oltava 4,5:1. Isokokoisten tekstien (vähintään 18 pt / 24 px) kontrastiksi riittää 3:1. Tekstin kokoa on myös pystyttävä suurentamaan 200 prosenttia ilman, että käytettävyys kärsii. Myös visuaalisten elementtien kuten käyttöliittymän komponenttien ja graafisten objektien kontrasti on oltava 3:1.
Skaalautuvuus eri laitteille ei ole nykymaailmassa enää mikään uusi tuttavuus. Vuonna 2022 58,26 prosenttia verkkosivujen liikenteestä tapahtui mobiililaitteilla (minun sivuilla se on noin 70 prosenttia) eli ei ihme, että Mobile first -ajatustapa kasvaa ja voi hyvin. Saavutettavuuden kannalta se tarkoittaa, että sivu voidaan esittää 320 CSS-pikselin levyisenä menettämättä toiminnallisuutta. Sivusto on siis luettavissa ilman, että ruutua joutuu siirtämään sivuttaissuunnassa (poislukien isot taulukot ja kartat).
Kuvallinen sisältö on helpommin saavutettavissa yhdellä yksinkertaisella kikalla: lisää niihin tekstivastine eli alt-teksti. Alt-tekstin tarvitsee kaikki kuvat ja kuvapainikkeet, joiden tarkoitus on välittää sisältöä. Kuville, joiden tarkoitus on olla vain koristeita, on laitettava myös “tyhjä” alt-teksti (alt=””). Monimutkaiset kuvat ja kaaviot on hyvä esittää auki tekstissä joko samalla tai erillisellä sivulla. Alt-teksti onkin vain lyhyt kuvaus ja se on syytä pitää vain lyhyenä, enintään 120 merkin pituisena.
Myös liikkuvassa kuvallisessa sisällössä on huomioitava saavutettavuus. Tämä tarkoittaa tekstitysten lisäämistä tai audion (pelkän äänen) esittämistä myös kirjoitettuna tekstinä.
Sivun informaation on ulkopuolen lisäksi näytettävä hyvältä myös sisäisesti. Yksinkertainen, mutta tehokas toiminto myös hakukoneoptimoinnin näkökulmasta on tagit tai alueet tai maamerkit tai jotain vastaavaa. Puhutaan nyt siis tageista eli esimerkiksi pääotsikot merkitään H1, alaotsikot H2, ala-alaotsikot H3 ja niin edelleen.
Myös muut korostukset kuten <ul>, <strong> ja <code> merkinnät ovat tehty oikein. Sivun eri osiot on myös tunnistettu käyttäen joko HTML5-alueita esimerkiksi <nav>, <main> ja <footer> tai vaihtoehtoisesti ARIA-merkkejä kuten “navigation” tai “main”. Sivusto lukeminen ja navigointi tapahtuu siinä järjestyksessä, kuin se on esitetty HTML:ssä.
Sivuston kieli pitää määrittää ohjelmallisesti käyttäen HTML lang-attribuuttia (esimerkiksi <html lang=“fi-FI”>). Mikäli alasivuja tai käännös sivuja löytyy, ne on ilmoitettava käyttäen lang-attribuuttia (esimerkiksi <blockquote lang=“en-US”>).
Liikkuva sisältö kuten automaattisesti liikkuvat videot, karusellit ja itsestään rullaavat tekstit joiden kesto on yli 5 sekuntia on pystyttävä pysäyttämään, keskeyttämään ja piilottamaan. Tämä on ihan joka ikisen käyttäjän etu. Jokaisen on pystyttävä lukemaan tekstit omalla haluamallaan nopeudella.
Verkkosivua on myös pystyttävä käyttämään näppäimistöllä, ilman että se jää jumiin elementteihin. Tämän voi testata esimerkiksi rullaamalla alanuolella sivuston läpi. Sivuston navigointi ja rakenne on myös oltava looginen. Tätä voit kokeilla rämpyttämällä Tab-näppäintä ja valinnan pitäisi rullata sivuston läpi esitetyssä järjestyksessä.
Papunet tiivistää homman todella hyvin: Älä suunnittele sisältöä tavalla, jonka tiedetään aiheuttavan sairauskohtauksia. Sisältö ei saa välkkyä tiheämmin kuin kolme kertaa sekunnissa. Poikkeuksena kooltaan pienet, pienellä kontrastilla varustetut ja muilla kuin punaisella värillä olevat sisällöt.
Äsken lukemasi tiivistelmä oli vain raapaisu WCAG-ohjeistuksesta. Lisätietoa ja ohjeita vaatimusten täyttämiseen löytyy Papunetin ohjeistuksesta (papunet.net) ja Aluehallintovirastolta (saavutettavuusvaatimukset.fi). Koko suomenkielinen lista WCAG-kriteereistä löytyy W3C: sivuilta (w3.org).