Sivuston yläosassa on iso kuva pimeästä tuijottavasta mustanharmaasta kissasta, jolla on isot virheät silmät. Tykkäämme käyttää kissakuvia silloin kun aiheeseen ei löydy muunlaista sopivaa kuvaa. Tämä teksti voisi helposti olla screen-reader-text classilla määritetty, eli visuaalisesti piilotettu ja ainoastaan lukulaitteille näkyvissä (sillä näkevät näkevät kuvan muutenkin), mutta koska kyseessä on kirjoitus esteettömyydestä, jätän tekstin tähän näkyviin.
Verkkosivujen esteettömyys eli saavutettavuus (engl. Accessibility, #a11y) on vielä nykypäivänäkin vähemmälle huomiolle jäänyt asia. Onneksi asiaan keskitytään koko ajan enemmän ja enemmän. Suomessa esteettömyyden lippua on pitänyt korkealla muunmuassa Ronja Oja ja Foxlandin Sami Keijonen.
Kun tapasin kuulonäkörajoitteisen puolisoni reilut kymmenen vuotta sitten, opin paljon elämästä ja tajusin, että maailma pyörii enemmistön, eli meidän näkevien ja kuulevien ehdoilla. Olen tehnyt verkkosivuja koko pienen elämäni, mutta tuolloin aloin rakentamaan webiä täysin uudesta näkövinkkelistä.
Me näkevät emme tarvitse apuvälineitä netin selaamiseen, mutta jo ikäihmiset saattavat joutua käyttämään zoom-työkalua heikon näkönsä takia. Silloin tekstin zoomauksen pitää sivuilla toimia, jotta käyttäjää ei harmita.
Verkkosivujen pitäisi olla automaattisesti esteettömiä, aivan kuten niiden pitäisi olla responsiivisia ja toimia uusimmalla Firefoxilla. Kyseessä ei ole lisätyö, eikä lisävaiva, sillä kun oikeat työkalut ovat mukana workflowssa, esteettömyyden rakentaa samalla sivua tehdessä. Aivan samaan tapaan kuin responsiivisuudenkin.
Tässä tekstissä muutama yksinkertainen haastava kysymys ja väittämä, joiden avulla voit testata onko sivustosi riittävän esteetön.
Voiko sivujesi tekstiä zoomata?
Tekstin pitää suurentua CTRL + + ja pienentyä CTRL + - -näppäinyhdistelmillä (: ⌘ + +, ⌘ + -). Mikäli näin ei ole, verkkosivuillesi on pakotettu zoomin taso tai käytetty kiinteitä pikseleitä, eikä relatiivisia yksikköjä, kuten rem. Zoomauksen lisäksi ulkoasu ei saisi hajota siten, että elementit menevät tekstin päälle.
Voiko sivua selata näppäimistöllä?
Ainakin Google Chrome -selaimella voi testata mitä tapahtuu kun painaa toistuvasti TAB ja SHIFT + TAB -näppäimiä. Tabilla voi selailla sivustoa ilman hiirtä. Jos sivustosi on selattavissa tabeilla siten että focus eli kohdistettu elementti on aina oikeassa järjestyksessä, tiedät että sivusto on esteettömämpi kuin monet.
Toimiiko valikko näppäimistöllä?
Sivuston tärkeimmän elementin, valikon on toimittava näppäimistöllä, jotta kävijä pääsee haluamilleen sivuille. Pystytkö avaamaan pudotusvalikot enterillä vai aukeavatko ne automaattisesti? monella sivustolla pudotusvalikot eivät aukea näppäimistöllä ollenkaan, koska esteettömyyttä ei ole otettu huomioon.
Joillakin sivuilla alavalikot avautuvat automaattisesti, jolloin näppäintä tai lukulaitetta käyttäävän joutuu plärätä kaikki valikot läpi ennen kuin pääsee valikon viimeiseen kohtaan. Ei hyvä.
Käytäthän otsikoita ja linkkejä oikeassa paikassa?
Lukulaitteet saavat otsikot kiinni kätevästi ja niillä on mahdollista hyppiä otsikosta toiseen. Jos otsikko on esimerkiksi boldattu teksti, siitä ei saa otetta. Linkit kuuluu olla linkkejä, joilla on kohde. Jos kohdetta ei ole, tulee käyttää aria-määritelmiä, joilla pystyy kirjoittamaan selitteitä niille linkeille, joiden pitäisi näkyä lukulaitteelle tietyllä tavalla, tai piilottaa ne lukulaitteelta kokonaan jos eivät ole oleellisia tai linkatun asian saa tehtyä toisella tavalla.
Onhan kuvilla ja kuvakkeilla selitteet?
Sokealle selaajalle ehkä turhauttavinta on toiminnot, joissa pitää valita toiminto kuvien tai kuvakkeiden kautta ja alt-teksteiksi on jätetty pelkkä “Kuva”. Merkityksettömät koristekuvakkeet, vaikka todolistattyyppiset tsek-merkit voi piilottaa ulkoasusta aria-hidden="true"-määreellä, mutta kaikilla muilla asiaan liittyvillä kuvilla pitää olla aina selite.
Riittävä kontrasti?
Näkörajoitteisilla on omat työkalunsa kontrastin säätämiseen, mutta helpottaa huomattavasti jos sivustolla ei ole haaleaa tekstiä valkoisella taustalla liikaa. Graafikot voivat joskus olla toista mieltä, mutta ainakin leipäteksti pitäisi olla luettavaa.
Monet vaikeasti näkövammaiset käyttävät työkaluja, jotka esimerkiksi poistavat taustakuvat kokonaan. Silloin kannattaa huomioida ettei kuvassa ole tekstiä tai mitään muutakaan tärkeää informaatiota.
Älä piilota klikatessa näkyviä reunuksia
Jotkut saattavat ihmetellä, miksi klikatessa linkeissä ja napeissa näkyvät reunukset (outline) ja toivovat niitä piiloon. Älä piilota outlineja! Kyseessä ovat reunukset, jotka mahdollistavat näppäimistöllä ja apuvälineillä selaamisen ja auttavat rajoitteita omaavaa käyttäjää navigoimaan sivustolla.
Älä avaa linkkejä uuteen ikkunaan
Jos linkki aukeaa uuteen ikkunaan, takaisin edelliselle sivulle ei enää pääse suoraan takaisin-napista. Nykyajan olettamus on, että käyttäjä saisi itse päättää miten hänen ikkunansa aukeavat. Itse olen ainakin tottunut painamaan hiiren rullaa, jos haluan että linkki aukeaa omaan ikkunaansa.
Loppusanat
Yllä esitetyt asiat ovat vain jäävuoren huippu. Puoli esteettömyyttä on jo se, että saitti on oikein koodattu. Oman sivustosi voit testata työkaluilla kuten Alix, tota11y tai WAVE by webaim. Itse suosin WAVEa, jonka saa Firefoxille ja Chromelle. Windowsin NV ACcess on aito työkalu, jolla kannattaa myös testata.
Seurasin eilen livestreamista #saavuta2017 seminaaria, joka oli yksi tämän kirjoituksen lukuisista innoittajista. Aiheesta on pitänyt kertoa enemmänkin jo pitkään, sillä netti kuuluu kaikille. Esteettömyyttä voi koskaan peräänkuuluttaa liikaa.
Suosittelen myös katsomaan sokean koodarin Ronja Ojan Fraktiolla pidetty Perjantaipresis-luento aiheesta “Digitaalisten palveluiden esteettömyys”:
Ja tässä vielä toisena nostona, Vincit Oy:n ohjelmistosuunnittelijan Tuukka Ojalan kuvaus arjestaan sokeana koodarina:
Me Dudella otamme esteettömyyden vakavasti vuonna 2017 ja noudatamme parhaamme mukaan WCAG 2.0:aa.
Kukaan ei ole täydellinen ja myönnettäköön että työkalut saavutettavuuden kehittämiseen eivät aina ole olleet yhtä kehittyneitä. Kaikkea ei aina tule huomioitua kiireessä ja se on ihan okei, nimittäin meilläkin meni osa omien nettisivujemme esteettömyyskorjauksista vähän viime tippaan (kiitos Sami testaamisesta!).
Meidän sivuilla tulee erroria vielä Crisp-chatista, mutta palvelu on ulkopuolinen, jonka koodiin emme voi vaikuttaa. Crispille on kuitenkin laitettu parannusehdotukset muutoksista esteettömyyden kehittämiseksi.
Tehdään nettiä ihan jokaiselle, jookos?
