Oh my GAAD!

Miellän itseni jonkinlaiseksi tasa-arvon lipun kantajaksi omassa pienessä piirissäni ja itselleni on erityisen tärkeää, että jokainen yksilö voi kokea samankaltaisen kokemuksen ilman tunnetta eriarvoisuudesta.

Maapallon väestöstä yhdellä (1) miljardilla on jonkin asteinen vamma tai muulla tavalla toimintakyky heikentynyt, johon tarvitsee jonkinlaista apuvälinettä tai muuta apua.

Yleisimmät vammat liittyvät useimmiten näköön, kuuloon, motorisiin ja kognitiivisiin taitoihin. Monesti vammat mielletään pysyviksi, mutta joskus ne ovat myös väliaikaisia. Jollakin saattaa olla esimerkiksi käsi siteessä viikoista kuukausiin, jolloin toimintakyky on heikentynyt. Eli tässäkin on jo suhteellisen iso porukka.

Saavutettavuus, se on ollut monen suulla tässä jo muutaman vuoden ajan. Itselläni se nostatti kylmän hien pintaan pari vuotta sitten, vaikka aihetta oli tullut paljon opiskeltua, kaiveltua monenlaisia materiaaleja, käynyt koulutuksissa ja osallistunut webinaareihin. Kuitenkin tässä painoi takaraivossa tiukasti se, että digitaalisten palveluiden eriarvoisuutta torjumaan laadittiin EU-direktiivi ja direktiivin toteuttaminen kansallisessa lainsäädännössä toteutui Suomessa 1.4.2019 voimaan tulleen lain nojalla. Eli omalla mittapuulla puhutaan jo asiasta, mihin on pakko perehtyä kunnolla työssään onnistuakseen.

Otetaan kuitenkin vielä yksi askel taaksepäin ja tosi nopea läpileikkaus siihen, mitä se verkkopalvelujen saavutettavuus tarkoittaa. Verkkopalvelun saavutettavuudella tarkoitetaan esitettävän informaation ja datan esittämistä siten, että se on kaikkien käyttäjien saatavilla riippumatta kenenkään käyttäjän mahdollisesta toimintaesteestä tai -rajoitteesta. Tätä varten säädettiin tuo ylempänä mainittu laki, joka astui voimaan 1.4.2019. Tämä laki nyt sitten velvoittaa julkista sektoria toteuttamaan verkkosivustonsa ja mobiilisovelluksensa saavutettavina tiettyjen siirtymäaikojen kuluessa. Ja tänään 19.5.2022 on kaikki siirtymäajat menneet jo umpeen (viimeisin melkein jo vuosi sitten), eli nyt ne asiat pitäisi olla kunnossa, eikö niin? 🙂

Vaikka laki velvoittaa ainoastaan julkisen sektorin verkkopalveluita, on saavutettavuus ihan kaikkien toimijoiden moraalinen velvollisuus ja käyttäjien etu. Saavutettavilla ratkaisuilla ja hyvin suunnitelluilla verkkopalveluilla pystymme palvelemaan ja tavoittamaan laajemman joukon käyttäjiä ja oikein tehdyt ratkaisut edistävät myös hakukonenäkyvyyttä.

Nyt kun on saatu ne velvollisuusnystyrät heräämään, niin me kerrotaan 6 hyvää vinkkiä, joihin kannattaa panostaa saavutettavuuden suhteen, vaikkei laki siihen velvoittaisikaan.

Värien kontrasti on monesti se ensimmäinen mainittu asia, kun tulee puhe saavutettavuudesta. Se on myös yleisin ongelma verkkosivuilla, tai siis liian pieni kontrastisuhde. Tekstin värin ja taustakuvan/-värin keskinäisen kontrasti on määritelty saavutettavuusvaatimuksissa. Kontrasti on matemaattisesti laskettava suhde, joka on määritetty erikseen erikokoisille teksteille. Tekstin kontrastisuhteen tulee olla vähintään 4,5:1, kun fontin koko on pienempi kuin 24px normaalissa leikkauksessa tai lihavoituna pienempi kuin 18px. Jos fontin koko on vähintään 24px tai lihavoituna 18px, niin kontrastisuhteen pitää olla vähintään 3:1.

Kontrastin minimivaatimukset määritettiin myös muille verkkosivuston käyttöliittymän osille kuin tekstille versiossa WCAG2.1. Näiden kontrastisuhde tulee olla vähintään 3:1. Eli erilaisten tunnistettavien ja merkityksellisten verkkosivuston elementtien tulee olla selkeästi tunnistettavissa taustastaan.

Jokaiselle ei-tekstimuotoiselle elementille ja sisällölle tulee tarjota vaihtoehtoinen sisältö, joka voidaan muuttaa käyttäjälle sopivaan muotoon apuvälineistä riippumatta. Vaihtoehtoinen sisältö on usein tekstiä, joka saadaan avustavalla tekniikalla luettua ruudunlukijalla tai muutettua pistekirjoitukseksi. Käytännössä tämä tarkoittaa sitä, että kuvien, ikonien, grafiikoiden ja videoiden esittämä sisältö on tarjottava käyttäjälle myös luettavassa muodossa. Yksinkertaisin esimerkki tästä on sivulla esiintyvä kuva ja sen alt-attribuutti. Alt-tekstiksi (vaihtoehtoinen teksti) kirjoitetaan se tieto, että mitä kuva esittää.

On olemassa myös poikkeuksia, milloin vaihtoehtoisen sisällön voi jättää pois. Näistä mainittakoon esimerkiksi verkkosivuston kuvituskuvat. Näissäkin tapauksissa alt-attribuutti pitää tarjota kuvalle, mutta itse tekstin voi jättää tyhjäksi, jos kuvalla ei ole informatiivista tarkoitusta.

Tyhjät linkit tarkoittavat sitä, että linkki on kokonaan tyhjä tai se ei sisällä kirjoitettua tekstiä siitä, mitä toimintoa linkki esittää tai minne se johtaa. Linkkiteksti siis puuttuu.

Joskus linkkiteksti saattaa olla myös vaillinainen, kun linkkitekstissä on puuttuva tieto linkin kohteesta tai siitä, millaista toimintoa se esittää. Tämän sijaan linkkitekstissä saattaa lukea ”Lue lisää”, ”Tutustu aiheeseen” tai ”Katso lisää”. Selkeämpiä linkkitekstejä olisi ”Lue lisää uutisesta x”, ”Tutustu sopimusehtoihimme” jne. Linkkiteksti saa olla myös pidempi kuin yksi tai kaksi sanaa. Tämä hyödyttää avustavia tekniikoita käyttäviä, kun ei tarvitse arvailla, minne linkki johtaa.

Näin onnistut linkkiteksteissä:

1. Käytä linkeissä tiivistä ja merkityksellistä tekstiä.
2. Vältä url-osoitteiden käyttöä linkkitekstinä.
3. Älä käytä epäselviä kannustuksia, joissa ei selviä linkin merkitys.

Tämä liittyy hyvin paljon edelliseen vinkkiini, mutta käsitellään nyt hieman enemmän erilaisia ikoneja, jotka ovat linkkejä tai toimintoa esittäviä painikkeita. Esimerkiksi haku-kentän Etsi-painike esitetään monesti suurennuslasi-ikonina ilman tekstiä. Tämä on yleisesti verkkopalveluiden käyttäjille tuttu ikoni ja useimmat ymmärtävät heti sen merkityksen. Mutta jos ikonille ei ole kirjoitettu vaihtoehtoista sisältöä, niin painikkeen toiminnosta ei saa tietoa käyttäjät, jotka käyttävät ruudunlukijaa tai käyttäjät, joille teksti muutetaan pistekirjoitukseksi.

Esimerkki virheellisestä linkistä:

<a href="/search-site"> <i class="fa fa-search"></i> </a>

Tämä on saavutettuusongelma, koska linkissä ei ole vaihtoehtoista sisältöä ikonille. Ilman vaihtoehtoista sisältöä linkin merkitys hämmentää käyttäjiä, jotka eivät pysty havaitsemaan ikonia.

Aina, kun käyttäjältä odotetaan syötettä, on syötekentille annettava näkyvä syötekentän nimiö tai ohje täytettävästä syötteestä. Tämä tarkoittaa siis sitä, että esimerkiksi lomakkeiden syöte-elementeillä tulee olla niitä vastaava nimike, eli label. Jos lomakkeella on siis input-kenttä, niin tällä kentällä tulisi olla yhteensopiva label-kenttä, joka on yhdistetty input-kenttään for-attribuutilla.

Usein webbitaitossa nähdään, että label-kenttä puuttuu ja se on ”korvattu” placeholder-tekstillä. Vaikka ulkoasultaan placeholder olisi hyvännököinen, niin placeholderia ei tule käyttää labelin korvikkeena. Avustavat tekniikat eivät käsittele placeholder-tekstiä labelin tunnisteena, mikä tarkoittaa, että ne eivät aina lue tai ilmoita tätä syötekentän nimikkeenä. Placeholder-tekstiä ei tueta laajasti kaikissa avustavissa tekniikoissa ja monet vanhemmat selaimet eivät esitä placeholder-tekstiä ollenkaan.

Vaikka oletuksena meillä monesti nykyään on, että verkkopalveluita selailevat käyttäjät käyttävät uusimpia teknologiota, niin pelkkään placeholderin käyttöön ei silti kannata ainoastaan nojautua. Placeholder-attribuutti on yleisesti tarkoitettu siihen, että sillä osoitetaan esimerkki täytettävästä syötteestä, ei syötteen nimikettä. Esimerkiksi sähköpostikenttään olisi placeholderin paikalle hyvä laittaa matti.meikalainen@trimedia.fi, eikä ”Sähköpostiosoite”.

Usein placeholder-teksti myös katoaa, kun käyttäjä alkaa täyttämään syötekenttää. Tästä voi koitua seuraavia ongelmia:

• Käyttäjä ei voi varmistua enää lomakkeen täytön jälkeen, että onko tiedot syötetty oikein, koska lomakkeella ei ole näkyvillä syötekenttien nimikkeitä.
• Mikäli selaimen automaattinen täyttö on ollut päällä, niin tiedot täyttyvät automaattisesti ja näiden tietojen tarkistaminen on hankalaa. Tarkistaakseen tiedot, käyttäjän tulisi poistaa automaattisesti täytetyt tiedot varmistuakseen niiden oikeellisuudesta ja kirjoittaa ne manuaalisesti uudelleen.
• Placeholder-teksti esitetään monesti pienemmällä värikontrastilla, kuin muut näkyvät tekstit, eikä se tällöin välttämättä täytä saavutettavuusvaatimusten värikontrastisuhteen vähimmäisarvoa.

Eli yhteenvetona, olisi aina hyvä, että jos käyttäjältä pyydetään syötettä, esimerkiksi hakukenttään, yhteystietolomakkeelle tai uutiskirjeen tilaamiseen, niin jokaista input-kenttää kohden olisi myös näkyvillä oleva label-kenttä.

Kun saavutettavuus-checkerit ilmoittaa tyhjät painikkeet -virheestä, se tarkoittaa sitä, että yksi tai useampi verkkosivuilla olevista painikkeista on tyhjä tai siinä ei ole painikkeen toimintaa kuvaavaa tekstiä. Tai jos painike on kuvallinen painike, painikkeen sisältämästä kuvasta puuttuu vaihtoehtoinen teksti. Jos luit aiemmat kohdat niin tämähän alkaa kuulostaa jo tutulta, eikö vain?

Tähän löytyy nopea fiksaus. Jos painikkeessa on kuva, sille pitää lisätä vaihtoehtoinen teksti. Se on lyhyt lause, jota käytetään kuvaamaan painikkeen kuvaa. Emme kuitenkaan suosittele kuvallisen painikkeen käyttöä. Ai miksi? Saavutettavuuden ja käytettävyyden vuoksi suosittelemme lisäämään tekstipainikkeita ja muotoilemaan ne CSS:llä kuvan käyttämisen sijaan. Painikkeesta saadaan selkeä kaikille laitteille ja fonttia voi tarvittaessa suurentaa.

No mitä jos painike on vain tyhjä, tai sinne on isketty vain se suurennuslasin ikoni?

Tyhjän painikkeen korjaamiseksi painikkeelle on lisättävä kuvaava teksti. Eli joko lisätään tekstisisältöä <button>-tagin sisään, lisätään value-attribuutti input-kentälle tai se vaihtoehtoinen teksti painikkeen kuvaan. Tekstin tulee kuitenkin kuvata painiketta tai sen toimintoa.

Alunperin minun piti kirjoittaa 5 vinkkiä, mutta koska moni asia menee tosi helposti rinnakkain näissä, niin oli hyvä kirjoittaa vielä yhdestä 🙂

Laki ei meitä tässä tapauksessa velvoita, mutta muuten todellakin koskee. Oman saitin kehityskohteita ja -toiveita on kertynyt jo pitkä lista ja niihin päästään kunnolla käsiksi kun ensin hoidetaan asiakasprojektit ja muut tärkeät kehitysprojektit. Eiköhän kesälomalla ole aikaa rentoutua näidenkin korjausten parissa.