Esteettömät kotisivut eivät ole pelkkä tekninen vaatimus – ne ovat samalla liiketoimintamahdollisuus. Kun sivustosi toimii sujuvasti myös näkövammaisille, liikuntarajoitteisille tai muuten avustavia teknologioita käyttäville ihmisille, tavoitat laajemman yleisön ja parannat kaikkien käyttäjien kokemusta. Suomessa noin miljoona ihmistä hyötyy esteettömistä digitaalisista palveluista, joten kyse on merkittävästä asiakaskunnasta.
Esteettömyyden huomioiminen jo suunnitteluvaiheessa säästää aikaa ja rahaa. Jälkikäteen korjaaminen on aina hankalampaa kuin asioiden tekeminen alusta alkaen oikein. Lisäksi lakikin velvoittaa: julkisen sektorin ja monien yritysten on täytettävä esteettömyysvaatimukset.
Miksi esteettömyys on tärkeää?
Esteettömyydessä on kyse siitä, että kaikki voivat käyttää sivustoasi riippumatta heidän kyvyistään tai käyttämistään apuvälineistä. Ruudunlukuohjelma muuttaa verkkosivun tekstin puheeksi näkövammaisille. Näppäimistönavigointia tarvitsevat ne, jotka eivät voi käyttää hiirtä. Videotekstitykset auttavat kuulovammaisia sekä tilanteita, joissa ääntä ei voi käyttää.
Itse törmäsin tähän konkreettisesti, kun eräs asiakas otti yhteyttä ja kertoi, ettei hänen ruudunlukijansa pystynyt navigoimaan sivustollamme. Lomakkeen kentät eivät olleet oikein merkittyjä, ja koko tilaus jäi siksi tekemättä. Se oli hyvä herätys siitä, kuinka pieniltä tuntuvat tekniset yksityiskohdat voivat estää kaupankäynnin kokonaan.
Aloita semanttisesta HTML:stä
Esteettömän sivuston perusta on oikeanlainen HTML-rakenne. Käytä oikeat otsikkotasot (h1, h2, h3) loogisessa järjestyksessä. Älä hyppää tasojen yli, esimerkiksi h1:stä suoraan h3:een. Ruudunlukijat käyttävät otsikoita sivuston rakenteen ymmärtämiseen.
Kaikille lomakekentille tulee lisätä selkeä label-elementti, joka kertoo kentän tarkoituksen. Pelkkä placeholder-teksti ei riitä. Esimerkiksi:
Oikein: Lisää label-tagi, joka yhdistää tekstin kenttään
Väärin: Pelkkä placeholder=”Sähköpostiosoite” ilman label-elementtiä
Lisää myös alt-tekstit kaikille kuville. Jos kuva on puhtaasti koristeellinen, voit jättää alt-attribuutin tyhjäksi (alt=””), mutta älä poista sitä kokonaan. Sisältöä välittävissä kuvissa kuvaile, mitä kuvassa tapahtuu tai mitä se esittää.
Värikontrastit ja tekstin luettavuus
WCAG-ohjeiden mukaan tekstin ja taustan välisen kontrastin tulee olla vähintään 4,5:1 normaalille tekstille ja 3:1 isolle tekstille. Tämä kuulostaa tekniseltä, mutta käytännössä tarkoittaa, että vaalean harmaan tekstin käyttäminen valkoisella taustalla on huono idea.
Testaa kontrastit esimerkiksi WebAIM:in Contrast Checker -työkalulla. Monet muotoilijat ihastuvat hillittyihin värisävyihin, mutta ne saattavat olla vaikeasti luettavia henkilöille, joilla on näköongelmia. Kirkkaat värit ja riittävä kontrasti eivät tarkoita rumaa designia – pikemminkin päinvastoin.
Älä välitä informaatiota pelkästään värien avulla. Jos esimerkiksi virheviestit ovat vain punaisella tekstillä ilman ikonia tai selittävää tekstiä, värisokea käyttäjä ei välttämättä huomaa niitä.
Näppäimistönavigaatio täytyy toimia
Kaiken sivustosi toiminnallisuuden on toimittava myös pelkällä näppäimistöllä. Testaa tämä käymällä läpi sivustosi Tab-näppäimellä. Näetkö selkeästi, missä kohdassa olet? Pääsetkö kaikkiin valikoihin ja painikkeisiin? Voitko täyttää ja lähettää lomakkeita?
Focus-indikaattori on se kehys, joka näyttää, missä elementissä näppäimistön kohdistus on. Älä koskaan piilota sitä CSS:llä (outline: none) ilman, että tarjoat vaihtoehtoisen visuaalisen ilmaisun. Tämä on yksi yleisimmistä esteettömyysvirheistä.
Varmista myös, että modaali-ikkunat, alasvetovalikot ja muut interaktiiviset elementit toimivat näppäimistöllä. Escape-näppäimen pitäisi sulkea modaalit, ja kohdistuksen tulisi palata oikeaan paikkaan sulkemisen jälkeen.
ARIA-attribuutit täydentävät HTML:ää
ARIA (Accessible Rich Internet Applications) -attribuutit auttavat välittämään lisätietoa apuvälineteknologioille. Niitä ei tarvitse kaikkialla, mutta tietyissä tilanteissa ne ovat välttämättömiä.
Esimerkiksi aria-label kertoo elementin tarkoituksen, kun visuaalinen teksti ei riitä. Ikonipainike ilman tekstiä tarvitsee aria-labelin kertomaan, mitä se tekee. aria-live-alueilla voit ilmoittaa dynaamisista sisällön muutoksista, kuten virheviestit tai ilmoitukset, jotka ilmestyvät sivulle ilman sivun uudelleenlatausta.
Älä kuitenkaan käytä ARIA:a, jos semanttinen HTML riittää. Se on tarkoitettu täydentämään, ei korvaamaan oikeaa HTML-rakennetta.
Testaa oikeilla käyttäjillä ja työkaluilla
Automaattiset esteettömyyden tarkistustyökalut, kuten WAVE tai axe DevTools, löytävät monia ongelmia, mutta eivät kaikkea. Ne eivät voi arvioida, onko alt-teksti todella kuvaava tai toimiiko sivuston logiikka järkevästi ruudunlukijalla.
Paras testi on aina oikea käyttäjä, joka tarvitsee apuvälineteknologioita. Jos mahdollista, hanki palautetta henkilöiltä, jotka käyttävät ruudunlukijoita tai navigoivat pelkällä näppäimistöllä. Monissa kaupungeissa toimii myös esteettömyyden asiantuntijoita, jotka voivat tehdä auditoinnin.
Yleisimmät väärinkäsitykset esteettömyydestä
Väärinkäsitys 1: Esteettömyys tekee sivustosta ruman.
Totuus: Hyvä esteettömyys ja hyvä design tukevat toisiaan. Selkeä rakenne, luettava typografia ja intuitiivinen navigaatio hyödyttävät kaikkia.
Väärinkäsitys 2: Esteettömyys on kallista ja aikaa vievää.
Totuus: Jälkikäteen korjaaminen on kallista. Alusta alkaen esteettömästi tehty sivusto vie vain hieman enemmän suunnitteluaikaa, mutta ei merkittävästi enempää rahaa.
Väärinkäsitys 3: Esteettömyys koskee vain näkövammaisia.
Totuus: Esteettömyydestä hyötyvät myös kuulovammaiset, liikuntavammaiset, kognitiivisia haasteita kohtaavat sekä ikääntyneet käyttäjät.
Lopuksi
Esteettömien kotisivujen tekeminen ei ole vain velvollisuus – se on sijoitus parempaan käyttäjäkokemukseen ja laajempaan asiakaskuntaan. Aloita pienistä asioista: korjaa alt-tekstit, tarkista kontrastit ja testaa näppäimistönavigaatio. Jokainen parannus vie sivustoasi oikeaan suuntaan.