Saavutettavuus www-sivuilla

Miksi saavutettavuus on tärkeää?

Viime aikoina saavutettavuudesta on puhuttu paljon, sillä vuonna 2019 voimaan tullut laki velvoittaa julkisen sektorin digitaalisten palveluiden olevan saavutettavia. Lain tarkoituksena on edistää yhdenvertaisuutta. Arvioiden mukaan jopa 10% käyttäjistä voi jäädä digitaalisten palvelujen ulkopuolelle, jos saavutettavuutta ei huomioida.

Pitääkö siis kaikkien sivustojen olla saavutettavia?

Ei, laki koskee vain julkisen hallinnon verkkopalveluita (esim. koulut, kunnat, virastot). Saavutettavuuden eteen tehty työ on kuitenkin aina parempi, kuin sen tekemättä jättäminen, sillä se palvelee monia käyttäjiä.

Saavutettavuuden huomioinnista voi olla huomattavaa hyötyä, vaikka ei kuuluisikaan lain piiriin. Saavutettavuuden periaatteet ja tekniikat voivat parantaa huomattavasti verkkosivuston käytettävyyttä ja mahdollistavat näin laajemman asiakaskunnan.

Miten saavutettavuutta mitataan?

Nettisivujen saavutettavuutta koskeva standardi WCAG 2.1 eli Web Content Accessibility Guidelines on pitkä opus, jossa kerrotaan saavutettavuuteen vaadittavat kriteerit. Kriteerit on jaettu kolmeen eri tasoon: A, AA ja AAA, joista laki edellyttää julkishallinnon digipalveluille A- ja AA-tasoja. Kolmen A:n taso on kaikista saavutettavin taso, jonka toteuttaminen vaatii jo enemmän resursseja (kuten viittomakielistä tulkkausta videoille).

Millainen on saavutettava verkkosivusto?

Saavutettava verkkosivusto on teknisiltä, sisällöllisiltä sekä visuaalisilta ominaisuuksiltaan ymmärrettävä ja helppokäyttöinen. WCAG:n kriteerit määrittelevät erityisesti teknisiä seikkoja, jotka mahdollistavat digitaalisten palveluiden käytön erilaisilla apuvälineillä, kuten ruudunlukuohjelmalla. Havaittavuuden ja ymmärrettävyyden kannalta tärkeitä ovat myös sisältöjen ja ulkoasun selkeys.

Tekninen saavutettavuus

Tavoitteena on tarjota verkkosivuston sisällöt myös henkilöille, jotka eivät käytä ruutua tai hiirtä internetin selailuun. Saavutettava sivusto on siis luettavissa myös erilaisilla apuvälineillä, kuten ruudunlukuohjelmalla. Tässä muutama esimerkki huomioonotettavista asioista:

• Sivuston HTML-rakenteen tulee olla looginen ja virheetön. Siellä pitää pystyä liikkumaan ja tekemään toimintoja pelkän näppäimistön avulla, ja näppäinkohdistin pitää olla havainnoitavissa.
• Sivuille on määriteltävä käytettävä kieli. Tämä auttaa ruudunlukuohjelmia valitsemaan sopivan puhesyntetisaattorin lukeakseen tekstit ääneen.
• Sivun alkuun on hyvä lisätä "Siirry sisältöön" -tyyppinen linkki, joka tulee esille näppäimistöllä liikuttaessa. Tällä käyttäjä voi ohittaa sivun yläosassa aina toistuvat sisällöt, kuten navigaation.
• HTML-elementtien oikeaoppinen käyttö on tärkeää. Erityisesti otsikoiden, kuvien, linkkien, painikkeiden, ja lomakkeiden käyttöön pitää kiinnittää huomiota.
   
  • Otsikot tulee esittää systemaattisessa järjestyksessä. Sivun pääotsikko on H1, ja sen alla voi olla useampia H2 alaotsikoita. H2 otsikoiden alla voi olla useampia H3 otsikoita, ja niin edelleen.
  • Tärkeitä sisältöjä ei tule esittää pelkästään esimerkiksi kuvina tai videoina. Kuville tulee lisätä aina vaihtoehtoinen teksti (alt-teksti), ja videoille tekstitys. Koristeellisille kuville määritellään tyhjä alt-teksti, jolloin ruudunlukuohjelma ei lue sitä.
  • Linkeillä ja painikkeilla tulee olla kuvaava teksti. Visuaalisessa näkymässä niissä voidaan käyttää helposti ymmärrettäviä ikoneita tai kuvia, mutta ruudunlukulaitteita varten niille tulee aina lisätä myös tekstimuotoinen kuvaus.
  • Lomakkeessa tulee olla riittävä ohjeistus sen täyttämiseen. Jokaisella lomakkeen kentällä on oltava nimilappu (label), joka kertoo kentän tarkoituksen. Lomakkeiden kenttiin pitää myös pystyä kohdistamaan näppäimistöllä, ja mahdollistaa automaattinen täyttö.
• Sivuston tulee olla responsiivinen. Responsiivinen sivu skaalautuu sopivan kokoiseksi erikokoisille näytöille ja laitteille. Se helpottaa selailua myös silloin, kun käyttäjän täytyy suurentaa selaimen näkymää zoomaamalla. Tekstin kokoa tulee voida suurentaa 200%:iin asti, ilman että se rikkoo sivuston toiminnallisuutta.
• Klikattaessa tapahtuvien toimintojen tulee aktivoitua vasta sitten, kun painikkeesta nostetaan hiiri/sormi pois. Tällä vältetään tahattomat klikkaukset.

Visuaalinen saavutettavuus

Tavoitteena on tarjota selkeä ja helppokäyttöinen kokemus sivuston käyttäjälle. Joillain käyttäjillä voi olla vaikeuksia esimerkiksi hahmottaa värejä tai kontrastiltaan heikkoja elementtejä. Elementtien ja tekstien koolla sekä värityksellä on iso merkitys sivuston käytettävyydessä.

• Käytettävyyden kannalta on tärkeää, että sivuston navigaatio on johdonmukainen ja se säilyy samana eri sivuilla liikuttaessa.
• Käyttäjälle tulee näyttää sijainti sivustolla, esimerkiksi navigaatiossa korostettuna linkkinä. Sivustolla voidaan käyttää myös murupolkua, jolla näytetään nykyinen sijainti sekä sen sivun yläsivut.
  
  Esimerkki WTF Designin sivustolla käytetystä murupolusta
• Informaation välittämiseen ei tule käyttää pelkkiä värejä. Mm. sivun linkit tulisi pystyä erottamaan muusta tekstistä muutenkin kuin värin perusteella (esimerkiksi alleviivauksella).
• Tekstin ja taustan välisen kontrastin tulee olla vähintään 4,5:1 (tai isokokoisella tekstillä 3:1). Värien välisen kontrastin voi tarkistaa esimerkiksi netistä löytyvällä Tanaguru Contrast Finder -työkalulla.
• Klikkailtavien tai sormella painettavien elementtien koko tulee olla vähintään 44 x 44 pikseliä (lukuunottamatta tavallisia tekstin seassa olevia linkkejä).
• Tekstin tulee olla helppolukuista. Siihen voidaan vaikuttaa valitsemalla selkeä fontti, tarpeeksi suuri tekstikoko ja riittävät rivivälit. Teksti tulee tasata vasempaan reunaan, ja rivien pituus ei saa olla liian pitkä.

Sisältöjen saavutettavuus

Sisältöjen optimoinnilla pyritään parantamaan mm. kognitiivista saavutettavuutta. Sisällöt tulisi suunnitella helposti ymmärrettäviksi ja silmäiltäviksi. On myös tärkeää, että käyttäjää ei turhaan häiritä liialla liikkuvalla sisällöllä.

• Teksteissä on hyvä suosia selkeää yleis- tai selkokieltä. Ohjeita selkokielisen tekstin kirjoittamiseen löytyy esimerkiksi Selkokeskuksen sivulta.
• Jos sivulla on videota, ääntä tai muuta automaattisesti käynnistyvää tai päivittyvää sisältöä, käyttäjälle tulee tarjota mahdollisuus keskeyttää niiden toisto.
• Sivustolla oleva sisältö ei saa välähdellä enempää kuin kolme kertaa sekunnissa. Välkkyvä sisältö voi aiheuttaa sairauskohtauksia.
• Pitkiä leipätekstejä kannattaa välttää. Tekstin voi pilkkoa pienemmiksi osioiksi vaikka väliotsikoilla, kuvilla, infograafeilla tai listauksilla. Infograafien sisältö tulee esittää myös tekstissä.

Lisäksi saavutettavuusvaatimusten piiriin kuuluvilla verkkosivustoilla tulee esittää saavutettavuusseloste, jossa kerrotaan sivuston saavutettavuuden tilanne. Käyttäjille tulee antaa mahdollisuus lähettää palautetta verkkosivun saavutettavuudesta.

Saavutettavuuden testaus

Verkkosivuston saavutettavuutta voidaan testata ja arvioida itse monin tavoin. Netissä on tarjolla työkaluja tätä varten, ja selaimiin on mahdollista ladata lisäosia testauksen tueksi. Windows-käyttöjärjestelmille on saatavilla ilmaiseksi NVDA-ruudunlukuohjelma, ja Mac-koneista löytyy yleensä VoiceOver-sovellus, joilla saavutettavuutta voi kokeilla ruudunlukuohjelmaa käyttävän näkökulmasta. Jos mahdollista, testausta voidaan suorittaa myös käyttäjätestauksena.

Onko saavutettavuus vaikea toteuttaa?

Web-suunnittelijan näkökulmasta kriteerien opettelu tuntui aluksi melkoiselta urakalta, mutta pienen syventymisen jälkeen vaatimukset vaikuttivatkin selkeiltä ja hyvin järkeenkäyviltä. Onneksi aiheesta on tehty paljon videoita, julkaisuja ja auttavia sivustoja, joiden avulla asiaan pystyi perehtymään hyvin ilman kokemusta apuvälineistä ja esteettömyydestä. Asiasta kiinnostuneiden kannattaakin tutustua esimerkiksi sivustoihin Papunet ja Saavutettavuusvaatimukset.fi.

Täysin saavutettavan sivuston tekeminen vaatii enemmän työaikaa suunnitteluun, toteutukseen ja testaukseen. Kaikki sivuston toiminnot ja näkymät tulee toteuttaa harkiten saavutettavuuden kannalta. Saavutettavuuden periaatteista voi kuitenkin helposti ottaa omaan tekemiseen vaikutteita ja näin pyrkiä tuottamaan paremmin saavutettavia palveluja, vaikkei se olisikaan pakollista.

Saavutettavuudessa on mahtavinta se, että sen tarkoituksena on edistää verkkopalvelujen käyttäjien yhdenvertaisuutta. Mutta mikä parasta, se hyödyttää oikeasti ihan meitä kaikkia. Kenelle tahansa voi tulla joskus elämässä vastaan tilanne, kun toimintakyky on syystä tai toisesta heikentynyt, tai ympäristö aiheuttaa vaikeuksia digilaitteiden käyttöön. Kuvittele tilanne, että olet meluisalla rautatieasemalla, ja sinun täytyisi katsoa tärkeä video. Olet unohtanut kuulokkeet kotiin, eikä videon äänistä saa mitään selvää. Hyvällä tuurilla video on saavutettava, ja siihen on lisätty tekstitykset. Päivä pelastettu! Tai toinen esimerkki, olet juuri loukannut kätesi, ja tietenkin sen vahvemman kätesi. Harjoittelet puhelimen selaamista toisella kädellä, ja yrität osua nettisivulla olevaan painikkeeseen. Hyvällä tuurilla sekin on suunniteltu saavutettavaksi, ja se on niin iso että vääränkätisenäkin osut siihen helposti. Helpotus!