On paljon työkaluja ja tekniikoita saavutettavuuden testaamiseen. Kokosin tälle sivulle joitakin työkaluja, joita olen käyttänyt tehdessäni saavutettavuusauditointeja.
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.
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.
Valitettavasti osaan ohjeistaa nämä vain englanniksi. Näköpuutteiden emulointi tehdään Filter type -asetuksella: System Settings > Accessibility > Display > Colour Filters
CSS-mediaominaisuudet kuuntelevat käyttöjärjestelmässä käyttäjän tekemiä prefers-color-scheme -valintoja.
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.
Värimaailman asetus: System Settings > General > Appearance > Light/Dark/auto.
Vaikka näitä ei vaadita AA-tasolla, suosittelen tarkastamaan kunnioitetaanko käyttäjän valintoja animaatioissa tai automaattisesti toistuvissa sisällöissä.
CSS-mediaominaisuudet kuuntelevat käyttöjärjestelmässä käyttäjän tekemiä prefers-reduced-motion -valintoja.
Settings > Ease of Access > Display > Show animations in Windows.
System Settings > Accessibility > Display > Reduce motion.
Display-osiossa on myös muita hyödyllisiä asetuksia.
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:
Osa työkaluista osaa tarkastaa navigointijärjestystä, mutta ne eivät osaa välttämättä tarttua ongelmiin elementteihin pääsyssä.
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.
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.
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.