Työkaluja ja tekniikoita saavutettavuuden testaamiseen
On paljon työkaluja ja tekniikoita saavutettavuuden testaamiseen. Kokosin tälle sivulle joitakin työkaluja, joita olen käyttänyt tehdessäni saavutettavuusauditointeja.
Tällä sivulla
Värien testaaminen voi vaatia manuaalista työtä
Selaimet ja työkalut havaitsevat värikontrasteja melko hyvin. Olen huomannut, että kaikki työkalut eivät tunnista vaaleita ja tummia väriteemoja, jotka on tehty Tailwindillä. Näissä tilanteissa värikontrasti on tarpeen tarkastaa manuaalisesti.
Näköpuutteiden emulointi Chromessa
Chrome-selaimessa on työkalu, jolla voi emuloida erilaisia näköpuutteita. Chromesta löytyy myös emulointi CSS-mediaominaisuuksiin prefers-color-scheme ja prefers-reduced-motion.
On hyvä kuitenkin muistaa, että emulointi ei koskaan vastaa täysin sitä mitä henkilö näkee.
Näköpuutteiden emulointi Mac-koneissa
Valitettavasti osaan ohjeistaa nämä vain englanniksi. Näköpuutteiden emulointi tehdään Filter type -asetuksella: System Settings > Accessibility > Display > Colour Filters
Värimaailman asetukset käyttöjärjestelmissä
CSS-mediaominaisuudet kuuntelevat käyttöjärjestelmässä käyttäjän tekemiä prefers-color-scheme -valintoja.
Säädä värimaailman asetuksia Windows 10:ssä
Valitettavasti osaan ohjeistaa nämä vain englanniksi. Värimaailma: Settings > Personalization > Colors > Choose your color
Mikäli valitset kustomoidun, väriasetus kuuntelee valintaa Choose your default app mode.
Säädä värimaailman asetuksia Mac-koneissa
Värimaailman asetus: System Settings > General > Appearance > Light/Dark/auto.
Liikkeen vähentämisen asetukset pitää testata manuaalisesti
Vaikka näitä ei vaadita AA-tasolla, suosittelen tarkastamaan kunnioitetaanko käyttäjän valintoja animaatioissa tai automaattisesti toistuvissa sisällöissä.
Liikkeen vähentämisen asetukset käyttöjärjestelmissä
CSS-mediaominaisuudet kuuntelevat käyttöjärjestelmässä käyttäjän tekemiä prefers-reduced-motion -valintoja.
Liikkeen vähentämisen asetukset Windows 10:ssä
Settings > Ease of Access > Display > Show animations in Windows.
Liikkeen vähentämisen asetukset Mac-koneissa
System Settings > Accessibility > Display > Reduce motion.
Display-osiossa on myös muita hyödyllisiä asetuksia.
Suosittelen testaamaan ruudunlukijoita manuaalisesti
Vaikka automaattiset työkalut voivatkin huomata, esimerkiksi puutteita ARIA-merkinnöissä, suosittelen tekemään ruudunlukijoilla aina manuaalista testausta.
Windowsille on tarjolla useita ruudunlukijoita:
Macille:
Androidille:
Näppäimistön käyttöä on yleensä tarpeen testata käsin
Osa työkaluista osaa tarkastaa navigointijärjestystä, mutta ne eivät osaa välttämättä tarttua ongelmiin elementteihin pääsyssä.
- Kaikkiin sivuston osiin pitäisi päästä käyttämällä ainoastaan näppäimistöä.
- Kustomoidut pudotusvalikot ovat herkästi ongelmallisia vain näppäimistöä käyttäville.
- Tarkasta, että kaikki popup-elementit on suljettavissa näppäimistöllä. Varmista, että näihin elementteihin pääsee ja että ne toimivat oletetulla tavalla.
- Sivustolla ei pitäisi olla näppäimistöansoja, eli osioita, joihin pääsee näppäimistöllä, mutta niistä ei pääse pois.
- Kohdistusjärjestyksen tulisi olla looginen.
- Onko sivun alussa "hyppää pääsisältöön" -linkki? Voidaanko muutkin toistuvat elementit ohittaa näppäimistöllä?
Zoomauksen testaus
Firefoxilla voit säätää zoomausta joko pelkästään tekstiin tai koko sivuun. Molempia käytetään cmd/ctrl ja +/-.
Safarilla zoomataan cmd ja +/-. Jos haluat zoomata pelkkää tekstiä, käytä lisäksi option-näppäintä. Huomaa, että Safarilla voit käyttää sekä tavallista että tekstin zoomausta, toisin kuin esimerkiksi Firefoxilla.
Sisällön testaamiseen ei ole monia työkaluja
Englanninkielistä sisältöä voi testata työkalulla the Hemingway Editor. Tällä työkalulla saat tekstistäsi arvosanan lukemisen helppoudesta tai vaikeudesta.
Jotkin automaattiset työkalut testaavat myös sisällön laatua, mutta en ole toistaiseksi nähnyt minkään suoriutuvan muusta kuin englannista.
Ilmaisia testityökaluja
Chromessa on sisäänrakennettuna Lighthouse. Tällä työkalulla voi testata myös muita kategorioita kuin saavutettavuutta.
Firefoxissa ja Chromessa molemmissa on sisäänrakennettuna työkalu elementin saavutettavuusominaisuuksien tarkastamiseen. Chromesta löytyy myös saavutettavuuspuu. Chromen työkalulla voit testata kriteeriä 2.5.3, koska työkalu näyttää elementin saavutettavan nimen hierarkian.
HTML_Codesniffer (bookmarklet) on itselleni mieluinen työkalu. Se listaa varoituksia ja virheitä WCAG-kriteereittäin. Työkalu antaa koodipätkän, missä ongelma sijaitsee.
WAVE (Web Accessibility Evaluation Tool) toimii sekä Chromen ja Firefoxin lisäosana että sitä voidaan käyttää verkkosivuna.
The W3C Markup Validation Service on HTML-validaattori. Työkalulle annetaan sivun osoite tai HTML-koodia. Tuloksena on lista virheitä ja varoituksia perusteluiden kera. Tämä työkalu on hyödyllisin kehittäjille, koska kehittäjät osaavat tulkita validaattorin tuloksia. Työkalu ei ole täydellinen, mutta se huomaa suurimman osan virheistä.
Text spacing (bookmarklet) auttaa testaamaan kriteeriä 1.4.12.
Harjoittele saavutettavuuden testaamista
Loin englanninkielisen saavutettavuuden testaamisen sivuston koulutusta varten. Jos haluat, sillä sivustolla voit harjoitella erilaisten saavutettavuushaasteiden testaamista.