Ruudunlukijat ja navigointi näppäimistöllä
Web-projektissa saavutettavuus on otettava on huomioon jo alusta lähtien. Konseptointiin ja workshopiin osallistuvat pohtivat sivuston käyttämistä aina myös näkörajoitteisten ja näppäimistökäyttäjien näkokulmasta.
Sivuston käyttö näppäimistöllä perustuu enimmäkseen TAB-näppäimen käyttöön. Käyttäjä valitsee TAB-näppäimellä haluamansa kohteen ja vahvistaa valintansa painamalla ENTER. TAB:ia painamalla käyttäjä liikkuu linkistä ja napista toiseen.
Ruudunlukijan avulla käyttäjä voi myös siirtyä tekstikappaleisiin. Järjestys, jossa ruudunlukija liikkuu sivustolla menee sivun järjestyksen ja HTML-rakenteen mukaan. Sivuston rautalankaa ja leiskaa piirtävän täytyy pitää mielessään, että sisällön merkitys täytyy tulla ilmi pelkästään teksteistäkin. Järjestys täytyy siis olla johdonmukainen ja informaatiota ei saa esittää pelkästään visuaalisesti kuvissa.
Web-kehittäjä testaa sivustoa säännöllisesti ruudunlukijalla ja näppäimistöllä. Huomiota kiinnitetään erityisesti siihen, että näppäimistöllä navigoitaessa käyttäjä ei missään vaiheessa jumiudu siten, että ei pääse liikkumaan tiettyyn osaan sivua.
Kuvien alt-tekstit
Kuvien alt-tekstit on ruudunlukijoita varten oleva kuvaus kuvan sisällöstä. Kuvien alt-tekstin tulisi luonnehtia kuvaa mahdollisimman tarkasti ja lyhyesti. Ehdoton maksimipituus on 125 merkkiä.
Esimerkki hyvästä alt-tekstistä:
<img src="mustikka-pannukakut.png" alt="Pino pannukakkuja, joiden päällä on mustikoita ja tomusokeria.">
Esimerkki huonosta alt-tekstistä (liian lyhyt):
<img src="mustikka-pannukakut.png" alt="pannukakut">
Esimerkki huonosta alt-tekstistä (liian pitkä):
<img src="mustikka-pannukakut.png" alt="Pino kullanruskeita pannukakkuja valkoisella lautasella, joiden päälle leijailee lumisateen tavoin tomusokeria. Pannukakkujen päällä on myös kuusi mustikkaa, jotka koristavat kauniisti.">
Pelkästään koristeena oleviin kuviin ei tarvitse, eikä suositella alt-tekstiä. Tällaisiin kuviin web-kehittäjä asettaa attribuutin aria-hidden="true", mikäli mahdollista. Tämä ’piilottaa’ kuvan ruudunlukijoilta.
Alt-attribuutti tulee kuitenkin aina olla kuvassa, vaikka itse tekstiä sille ei olisi:
<img src="astraali.jpg" alt="" />
Alt-teksit auttavat myös hakukoneita määrittämään kuvan sisällön. Tämä mahdollistaa muun muassa liikenteen sivustolle Googlen kuvahaun kautta.
Kontrasti
WCAG 2.1 määrittelee leipätekstin ja taustan välisen kontrastin minimiksi 4:5:1. Graafikko pitää huolen leiskaa suunnitellessaan, että kontrasti täyttää minimivaatimuksen. Kontrastin voi tarkistaa muun muassa erilaisilla selaimessa toimivilla työkaluilla. Puhtaasti koristetarkoitukseen olevalla tekstillä ei ole minimikontrastivaatimusta.