Saavutettavuuden testaaminen: ilmaiset työkalut ja tarkistukset

Tässä tarina, jonka kuulemme usein. Joku ajaa Lighthousen, saa saavutettavuudesta vihreät 100 pistettä ja siirtyy eteenpäin. Viikkoa myöhemmin asiakas kirjoittaa, ettei hän pystynyt maksamaan, koska korttilomakkeeseen ei pääse näppäimistöllä. Molemmat pitävät paikkansa. Automaattinen tarkistus meni läpi, ja sivusto petti silti oikean ihmisen.

Tämä opas näyttää, miten testaat kunnolla pienellä budjetilla: mitkä ilmaiset työkalut kannattaa ajaa, 15 minuutin manuaalinen rutiini, ensimmäinen kokeilu ruudunlukijalla ja milloin auditoinnista kannattaa maksaa.

Voiko automaattinen työkalu kertoa, onko sivustoni saavutettava?

Ei. Automaattiset työkalut löytävät osan ongelmista nopeasti, mutta moneen saavutettavuuskysymykseen tarvitaan ihminen vastaamaan. Kun Ison-Britannian hallinnon Government Digital Service testasi 10 työkalua sivulla, jolla oli 143 tunnettua virhettä, paras löysi 41 %. W3C sanoo sen suoraan: arviointityökalut ”eivät voi määrittää saavutettavuutta, ne voivat vain auttaa siinä.”

GDS:n testi (avautuu uuteen välilehteen) on helmikuulta 2017, ja sen 41 % (Asqatasunilta) sisälsi työkalun kehotukset manuaalisiin tarkistuksiin. Työkalut ovat sittemmin parantuneet, mutta puutteiden syy on sama. Ohjelmisto huomaa, että kuvalta puuttuu vaihtoehtoinen teksti. Se ei huomaa, että ”punainen mekko” on väärä kuvaus sinisen puvun kuvalle, eikä sitä, onko kohdistusjärjestys järkevä.

Pidä siis työkalua palovaroittimena, ei kuntotarkastuksena. Sitä kannattaa silti käyttää: WebAIM Million 2026 (avautuu uuteen välilehteen) löysi havaittavia virheitä 95,9 %:sta miljoonan suosituimman sivuston etusivuista, joten useimmilla sivustoilla on helposti korjattavaa. Kuten W3C:n työkalujen valintaa käsittelevä ohje (avautuu uuteen välilehteen) sanoo: ”Tarvitaan ihmisen harkintaa.”

Mitä ilmaisia saavutettavuuden testaustyökaluja kannattaa käyttää?

Käytä yhtä tai kahta automaattista tarkistustyökalua, kontrastityökalua ja ruudunlukijaa. Työkalut soveltavat eri sääntöjä ja raportoivat tulokset eri tavoin, joten kaksi työkalua löytää yleensä enemmän kuin yksi. Jokaisesta alla olevasta on ilmainen versio. Tarkista kunkin voimassa olevat ehdot ennen kuin luotat siihen, sillä nimet, ominaisuudet ja hinnat muuttuvat.

Mitä voin tarkistaa käsin 15 minuutissa?

Melko paljon. W3C:n Easy Checks (avautuu uuteen välilehteen) kattavat sivun otsikot, vaihtoehtoiset tekstit, väliotsikot, kontrastin, ohituslinkit, näkyvän näppäimistökohdistuksen, sivun kielen, zoomauksen, tekstitykset ja lomakekenttien nimiöt. Valitse yksi tärkeä sivu, kuten tuotesivu tai varauslomake, ja käytä kuhunkin tarkistukseen minuutti tai kaksi. Löydät asioita, joita mikään työkalu ei raportoi.

W3C:n mukaan nämä tarkistukset ”kattavat vain muutamia saavutettavuusongelmia”, joten ne eivät ole kattava arviointi. Ne ovat silti paras vartti, jonka voit käyttää:

1. Sivun otsikko (1 minuutti). Kertooko selaimen välilehti, mikä sivu on, esimerkiksi ”Varaa pöytä | Ravintola Rosa”, eikä joka paikassa ”Etusivu”?
2. Kuvat (2 minuuttia). Tuo vaihtoehtoiset tekstit näkyviin WAVElla tai vastaavalla. Ovatko ne oikein? Ohitetaanko koristeet?
3. Otsikot (2 minuuttia). Listaa otsikot ja lue ne yksinään. Toimivatko ne sisällysluettelona?
4. Kontrasti (2 minuuttia). Tarkista leipäteksti, pieni harmaa teksti, painikkeiden tekstit ja kuvien päällä oleva teksti.
5. Näppäimistö (4 minuuttia). Laita hiiri sivuun ja käy sivu läpi sarkaimella (katso seuraava osio).
6. Zoomaus (2 minuuttia). Pystytkö 200 %:ssa ja sitten 400 %:ssa yhä lukemaan kaiken ja käyttämään valikkoa vierittämättä sivusuunnassa?
7. Lomakkeet ja kieli (2 minuuttia). Napsauta kunkin kentän nimiötä; hyvin rakennetussa lomakkeessa kohdistin siirtyy silloin kenttään. Tarkista työkalun raportista, puuttuuko sivun kieli.

Miten testaan näppäimistöllä?

Laita hiiri pois. Siirry eteenpäin sarkaimella, taaksepäin Vaihto+Sarkain-yhdistelmällä, seuraa linkkejä Enterillä, paina painikkeita välilyönnillä tai Enterillä ja käytä nuolinäppäimiä valikoissa ja valintanapeissa. Jokaiseen vuorovaikutteiseen elementtiin pitää päästä, sinun pitää aina nähdä, missä olet, eikä jumiin saa koskaan jäädä.

Macilla Safari ohittaa linkit sarkainta painettaessa, kunnes otat Safarin lisäasetuksista käyttöön valinnan, jolla sarkain korostaa jokaisen verkkosivun kohteen. Tarkista sitten:

• Näetkö aina, missä olet? Jos kohdistuksen reunus katoaa, näppäimistön käyttäjä on eksyksissä.
• Onko järjestys looginen? Kohdistuksen pitää edetä lukujärjestyksessä.
• Peittyykö jokin? Kiinteä yläpalkki tai evästeilmoitus, joka peittää kohdistetun elementin, ei täytä WCAG 2.2:n kriteeriä Näkyvä kohdistin ei peity.
• Pääsetkö taas ulos? Avaa jokainen valikko, ponnahdusikkuna ja päivämäärävalitsin ja yritä sitten poistua. Esc-näppäimen pitää sulkea valintaikkunat.
• Toimiiko koko polku? Lisää tuote, muuta määrää, käytä alennuskoodia ja pääse maksuun ilman hiirtä.

Kirjaa jokainen virhe tarkasti: ”Tuotesivun koonvalitsinta ei voi avata Enterillä tai välilyönnillä” korjataan paljon nopeammin kuin ”näppäimistö ei toimi”.

Miten testaan ruudunlukijalla ensimmäistä kertaa?

Aloita ruudunlukijalla, joka laitteessasi jo on, tai Windowsissa NVDA:lla, ja kuuntele yksi sivu. Et yritä käyttää sitä kuin asiantuntija. Tarkistat, että otsikot, linkit, painikkeet, kuvat ja lomakekentät luetaan järkevillä nimillä ja ettei mikään tärkeä jää lukematta.

• Mac: Komento+F5 kytkee VoiceOverin päälle ja pois; Control+Optio+U avaa roottorin, joka on luettelo otsikoista, linkeistä ja lomakkeen säätimistä.
• Windows: NVDA:ssa H hyppää otsikosta toiseen ja Insert+F7 luettelee linkit ja otsikot.
• Puhelin: ota käyttöön VoiceOver (iPhone) tai TalkBack (Android) ja pyyhkäise oikealle siirtyäksesi kohteesta toiseen. Opettele ensin, miten se kytketään pois.

Kuuntele ensin tärkeimmät asiat. WebAIMin vuoden 2024 ruudunlukijakyselyssä (avautuu uuteen välilehteen) 71,6 % vastaajista kertoi liikkuvansa pitkällä sivulla ensin otsikoiden avulla, joten aloita niistä. Avaa sitten linkkiluettelo: viisi ”Lue lisää” -linkkiä ei kerro kenellekään mitään. ”Lisää ostoskoriin, tummansininen neule” on hyödyllinen painike; ”painike” ei ole. Täytä lopuksi lomake ja tarkista, että jokainen kenttä ja virhe luetaan ääneen.

Pidä johtopäätöksesi maltillisina. Jos jokin kuulostaa sinusta rikkinäiseltä, se luultavasti on; jos se kuulostaa hyvältä, se ei ole todiste. Miten kokeneet käyttäjät oikeasti toimivat, kerromme artikkelissa miten vammaiset ihmiset käyttävät verkkoa.

Miten tarkistan zoomauksen, mukautuvuuden ja tekstin välistyksen?

Zoomaa selain 200 %:iin ja tarkista, että teksti suurenee leikkautumatta tai menemättä päällekkäin. Testaa sitten mukautuvuus: 400 %:n zoomauksella 1 280 pikselin levyisessä ikkunassa sisällön pitää mahtua ilman vaakavieritystä. Suurenna lopuksi kirjainten, sanojen, rivien ja kappaleiden välejä ja tarkista, ettei mikään hajoa tai katoa.

Nämä vastaavat WCAG:n kriteerejä Tekstin koon muuttaminen (1.4.4), Responsiivisuus (1.4.10) (avautuu uuteen välilehteen) ja Tekstin välistys (1.4.12) (avautuu uuteen välilehteen). Responsiivisuus käyttää 320 CSS-pikselin leveyttä, joka W3C:n mukaan ”vastaa 1280 CSS-pikselin levyistä alkuperäistä näkymää 400 %:n zoomauksella.” Tekstin välistys edellyttää, ettei mitään katoa, kun lukija asettaa rivinkorkeudeksi 1,5 kertaa fonttikoon, kappaleväliksi 2 kertaa, merkkiväliksi 0,12 kertaa ja sanaväliksi 0,16 kertaa fonttikoon.

Tekstin välistyksen kirjanmerkki, eli kirjanmerkiksi tallennettu pieni skripti, ottaa kaikki neljä arvoa käyttöön yhdellä napsautuksella. Etsi painikkeista yli valuvaa tekstiä ja reunasta leikkautuvia nimiöitä. 400 %:n zoomauksella kannettava näyttää suunnilleen saman kuin pieni puhelin, joten hyvin tehty responsiivinen sivusto läpäisee suuren osan tästä jo valmiiksi.

Miten tarkistan lomakkeet, virheilmoitukset ja kassan?

Täytä jokainen tärkeä lomake kolme kertaa: kerran oikein, kerran kaikki kentät tyhjinä ja kerran tahallisilla virheillä. Jokaisella kentällä pitää olla näkyvä nimiö, jokainen virhe pitää selittää sanoin kentän vieressä, ja salasana- ja vahvistuskoodikenttiin pitää voida liittää tekstiä.

• Virheet. ”Virheellinen syöte” punaisella ei riitä. ”Anna voimassaolopäivä muodossa KK/VV” kentän vieressä riittää. Lähettämisen jälkeen kohdistuksen pitää siirtyä virheyhteenvetoon tai ensimmäiseen virheelliseen kenttään.
• Kirjautuminen ja koodit. WCAG 2.2:n saavutettavaa todentamista koskevan kriteerin (avautuu uuteen välilehteen) mukaan liittämisen tai salasanojen hallintaohjelmien estäminen ei täytä vaatimusta, ellei tarjolla ole toista tapaa kirjautua.
• CAPTCHA:t ja aikarajat. Ruudunlukijan käyttäjät arvioivat WebAIMin kyselyssä CAPTCHA:n verkon ongelmallisimmaksi asiaksi. Tarkista, että tarjolla on saavutettava vaihtoehto ja että aikarajoja voi jatkaa.

Verkkosivuston saavutettavuuden tarkistuslistassamme on kattavampi lista verkkokaupoille, myös evästeilmoituksista ja ponnahdusikkunoista.

Mitä ammattimainen saavutettavuusauditointi sisältää, ja milloin tarvitsen sellaisen?

Saavutettavuusauditointi on asiantuntijan jäsennelty arviointi nimettyä standardia vasten, yleensä WCAG 2.1:n tai 2.2:n AA-tasoa. Siinä yhdistyvät automaattiset skannaukset sekä tärkeimpien sivupohjien ja polkujen manuaalinen ja apuvälineillä tehtävä testaus, ja lopputuloksena on priorisoitu raportti. Tarvitset sellaisen, kun laki koskee sinua, ennen suurta julkaisua tai kun asiakkaat pyytävät näyttöä.

Ennen kuin sovitte hinnasta, kysy:

• Minkä standardin, version ja tason mukaan testaatte?
• Mitkä sivupohjat ja polut kuuluvat arviointiin? Verkkokaupassa: etusivu, tuoteryhmä, tuote, ostoskori, kassa, tilisivut ja lomakkeet.
• Testaatteko käsin ruudunlukijoilla, näppäimistöllä ja zoomauksella, ja millä selaimilla ja laitteilla?
• Luokitteleeko raportti ongelmat vakavuuden mukaan, paikantaako se ne ja ehdottaako korjauksia?
• Sisältyykö hintaan uusintatestaus?

Hinnat vaihtelevat paljon toimittajan, maan ja laajuuden mukaan, joten vertaa, mitä hintaan sisältyy. Jos EU:n esteettömyysdirektiivi koskee sinua, auditointi tukee myös julkista selostettasi; EAA-oppaamme kertoo, keitä direktiivi koskee.

Miksi testata vammaisten käyttäjien kanssa?

Koska standardin täyttäminen ja helppokäyttöisyys eivät ole sama asia. Kassa voi täyttää jokaisen WCAG-kriteerin ja silti viedä ruudunlukijan käyttäjältä kaksikymmentä minuuttia. W3C:n mukaan arviointi vammaisten käyttäjien kanssa ”paljastaa käytettävyysongelmia, joita pelkkä vaatimustenmukaisuuden arviointi ei löydä”, ja se näyttää tiimillesi, miten ihmiset oikeasti käyttävät sivustoa.

Laboratoriota et tarvitse. Muutama testikerta tärkeimmän tehtäväsi parissa, kuten tuotteen löytämisessä ja maksamisessa, opettaa enemmän kuin uusi skannauskierros. Rekrytoi vammaisjärjestöjen, tutkimustoimistojen tai omien asiakkaidesi kautta ja maksa ihmisille heidän ajastaan. Anna heidän käyttää omia laitteitaan ja asetuksiaan. W3C:n ohje käyttäjien ottamisesta mukaan arviointiin (avautuu uuteen välilehteen) käsittelee käytännön puolta.

Mitä teen tuloksilla?

Lajittele ongelmat sen mukaan, kuinka pahasti ne estävät ihmisiä ja missä ne esiintyvät, korjaa ne sivuston omassa koodissa ja sisällössä, testaa uudelleen ja kirjaa avoimet asiat. Nimeämätön kenttä kassalla on tärkeämpi kuin kontrastilipsahdus alatunnisteessa, ja yhteisen sivupohjan korjaus korjaa kaikki sitä käyttävät sivut.

1. Priorisoi. Ensin tärkeimpien polkujen (kassa, varaus, rekisteröityminen) esteet, sitten yhteiset sivupohjat ja lopuksi yksittäiset sivut.
2. Korjaa lähteellä. Muuta teemaa, komponenttia tai sisältöä, älä vain oiretta.
3. Testaa uudelleen. Toista samat tarkistukset, sekä käsin että työkaluilla.
4. Dokumentoi. Luettele tunnetut ongelmat päivämäärineen saavutettavuusselosteessasi. WCAG 2.2 -oppaamme selittää uudemmat kriteerit.
5. Toista. Lisää näppäimistötarkistus ja skannaus jokaiseen julkaisuun.

Jos käytät saavutettavuuswidgetiä, myös meidän, testaa sivu widget suljettuna. SiteAccessiblen kaltainen paneeli antaa kävijöille lisää tapoja säätää sivua, mutta WCAG kysyy, toimiiko sivu oletustilassaan. Jotkin auditointijärjestelmät eivät arvioi sivuja, joilla on käytössä overlay-skripti, joten tarkista asia ensin auditoijaltasi.