Testausohje
Ruudunlukuohjelmalla voidaan jo kehitysvaiheen aikana tarkistaa WCAG—rikkomuksia, jotka ovat paitsi yleisiä, myös käyttäjien kannalta vakavia. Tällaisia kriteerejä ovat esimerkiksi:
- WCAG 1.3.1 Informaatio ja suhteet
- WCAG 1.3.2 Merkitykseen vaikuttava järjestys
- WCAG 3.1.1 – 3.1.2 Sivun ja osien kieli
- WCAG 3.3.1 Virheen tunnistaminen
- WCAG 4.1.2 Nimi, rooli, arvo
- WCAG 4.1.3 Tilasta kertovat viestit
Erityisen tehokas ruudunlukija on kriteerin 4.1.2 Nimi, rooli, arvo todentamisessa. Tämä tulisi voida varmistaa kaikesta julkaistavasta koodista jo toteutusvaiheessa; testaaminen on pienen totuttelun jälkeen suoraviivaista. Myös selausjärjestys (kriteerit 1.3.2 ja 2.4.3) on helppoa ja tärkeää varmistaa, kun luodaan monimutkaisempia ns. komposiittielementtejä (kts. moduuli 3 / Asiakirja X) tai kun komponentteja yhdistellään esimerkiksi navigointikokonaisuudeksi. Kolmas helposti testattava mutta silti tärkeä kriteeri on WCAG 1.3.1, jossa edellytetään, että palvelun lomakekontrolleille, kuten syöttökentille, annettava nimi on määritetty tavalla, jota myös apuvälineohjelmat osaavat tulkita, kun käyttäjä kohdistaa kontrollin.
WCAG 4.1.2 Nimi, rooli, arvo: Testaaminen
Kun käyttäjä kohdistaa verkkosivulla olevan elementin ruudunlukijalla, kuvaa apuväline elementistä kolme keskeistä tietoa: Nimi, rooli ja arvo. Kaikilla elementeillä ei ole kaikkia näitä ominaisuuksia, ainakaan tavalla, jota ruudunlukijan olisi tarpeen kuvata. Esimerkiksi verkkosivulla oleva tekstikappale (<p> -tägi) sisältää vain nimen (kappaleen teksti), mutta sillä ei ole erityistä arvoa. Sillä on kappalerooli, mutta tätä ei normaalisti erikseen kerrota, koska sen kuvaaminen jokaisen kappaleen kohdalla olisi käyttäjälle erittäin työlästä. Sen sijaan anchor (a) -tägillä on nimen (linkkiteksti) lisäksi rooli (linkki), ja mahdollisesti arvo tai tila, joka on vierailtu tai vierailematon. Linkin kohdalla apuväline kertoo roolin, koska on tärkeää, että käyttäjä, joka ei oletettavasti voi sivunäkymää arvioida visuaalisesti erottaa linkin ns. leipätekstistä.
Nimi, rooli, arvo -kolmikko on tärkeää testata, kun kehitetään räätälöityjä komponentteja. Ts. kun <button> -tägin sijasta luodaankin painike vaikkapa <img>-tägistä, tulee apuvälineen osata kertoa, että tämä poikkeavasti toimiva elementti on rooliltaan itse asiassa painike. Jos kyseessä on vielä erityisesti valikkopainike (vielä tarkempi rooli), tulee ruudunlukijan kertoa lisäksi, että onko valikko avattu vai suljettu (arvo/tila). Nimi on luonnollisesti valikkopainikkeen teksti tai muu, apuvälineelle tarkoitettu kuvaus, joka voi olla annettu elementin attribuuttina, kun näkyvää tekstiä ei ole tai se ei ole riittävä. Nimellä tarkoitetaankin WCAG:ssa saavutettavaa nimeä, joka on visuaalista sivun tekstisisältöä laajempi käsite. Tarkempia tietoja nimi, rooli ja arvo -attribuuttien asettamisesta on Helsingin saavutettavuusmallin moduulin 4 kehittäjille suunnatussa aineistossa.
WCAG 4.1.2:n testaaminen tapahtuu niin, että jokainen räätälöity komponentti kohdistetaan ruudunlukijalla, ja arvioidaan, välittyykö elementin nimi ruudunlukijan tuottamasta informaatiosta. Esimerkiksi jos dialogin sulkemispainikkeena on ”ruksi”, tulee ruudunlukijan silti kuvata elementille jokin nimi, kuten ”sulje”.
Seuraavaksi arvioidaan, välittyykö elementistä rooli. Edellisen sulkemispainikkeen kohdalla esimerkiksi roolin tulisi olla ”painike”; muuten käyttäjä ei voi tietää, että kyseessä on juuri painikkeen tavoin toimiva kohde. Kolmantena arvioidaan, kuvaako ruudunlukija elementille mahdollisesti kuuluvan arvon tai tilan oikein.
Edellisellä painikkeella ei ole tällaista arvoa: Painikkeen tila ei muutu. Mutta jos painike onkin lomakkeella oleva ohjekuvake, jonka klikkaus ponnauttaa esiin ns. pop-up alueen, on painikkeella nimen ja roolin ohella myös tila: Avattu/laajennettu tai suljettu sen perusteella, onko painikkeeseen liittyvä pop-up avattuna vai ei. Vastaavasti esimerkiksi valintaruudun arvo tai tila on ”valittu”/”ei valittu”. Riippuu siis elementistä, mitkä sen rooli ja arvo/tila tulisivat olla, tai onko arvoa/tilaa ylipäänsä elementillä ollenkaan. Tämä vaatii hiukan ruudunlukuohjelman käytön totuttelua, mutta on varsin selkeää, kun elementtien kuunteluun tottuu, etenkin, jos testaajalla peruskäsitys verkkosivuille tuotettavien elementtien toteutuksesta ainakin HTML—koodin tasolla.
Lopuksi elementti aktivoidaan eli sitä ”klikataan” ruudunlukijalla (valitaan, ei valita, tai avataan, suljetaan, jne.), ja samalla arvioidaan, välittyykö myös tilan tai arvon muutos oikein.
Tätä voi harjoitella mm. saavutettavuusmallin demosivulla ”Buttons” -välilehdellä olevilla kontrolleilla, joiden ohessa esitettävä logi näyttää, miten testielementtien attribuutit muuttuvat.
WCAG 1.3.2 ja 2.4.3
Viittaus koulutusmateriaaliin. Referenssi ensi viikolla.
WCAG 3.3.1 Virheen tunnistaminen
Viittaus koulutusmateriaaliin. Referenssi ensi viikolla.
Testaustyökalut: Näppäimistöselaus
Saavutettavuuden testaamiseen liittyy ruudunlukukäytön ohella tärkeänä osana myös palvelun käyttö näppäimistöllä ilman hiirtä sekä ruudunlukijaa. On tärkeää huomata, että ruudunlukijan käyttö ei vastaa näppäimistökäyttöä, vaikka työpöytäkoneen ruudunlukijaa usein ohjataankin näppäimistöllä.
Näppäimistöselauksella tarkoitetaan käyttötapaa, jossa verkkosivulla liikutaan sarkainnäppäimen (tabulaattori, TAB) avulla. Selain siirtää tällöin kohdistusta sivun interaktiivisten elementtien välillä. Interaktiivisia ovat kaikki linkit, painikkeet ja lomakekontrollit, sekä interaktiivisiksi koodissa erikseen merkityt elementit. Selain ei kohdista, eikä sen kuulu kohdistaa, passiivisia tekstisisältöjä tai kuvia; ruudunlukuohjelma sen sijaan kohdistaa kaiken verkkosivulla olevan sisällön, jota ei apuvälineeltä ole erikseen piilotettu. Tämä ero on tärkeä tiedostaa, kun palvelua testataan näppäimistöllä.
Verkkoselaimen kannalta näppäimistö ei ole apuväline. Se tarkoittaa, että selain ei huomioi apuvälineille tarkoitettuja Wai-Aria -attribuutteja, kun käytössä ei ole ruudunlukija. Tästä seuraa, että testaustilanteessa ei voida automaattisesti olettaa, että vaikka palvelun jokin osa toimii ruudunlukijan kanssa, se toimii myös näppäimistöllä. Näin ei automaattisesti ole. Esimerkiksi räätälöidyt elementit, joilta puuttuvat näppäimistökäsittelijät tai ns. tabindexointi, eivät välttämättä ole aktivoitavissa tai edes kohdistettavissa pelkällä näppäimistöllä ilman ruudunlukijaa. Syynä on, että ruudunlukija lähettää elementille click –eventin, jolloin se voi aktivoida saman elementin kuin hiiri/kosketuskäyttäjäkin. Ruudunlukijan kohdistus ei myöskään riipu tabindex –arvoista. Asiasta voi lukea lisää moduulin 4 kehittäjille tarkoitetussa aineistossa.
Näppäimistöselauksen testaaminen käytännössä
Näppäimistöselaukseen liittyvät ensisijaisesti WCAG—kriteerit 2.1.1-2.1.2. Ne määräävät, että kaikkien verkkosivulla olevien toimintojen tulee olla saavutettavissa myös pelkällä näppäimistöllä ilman hiirtä, ellei kyseessä ole toiminnallisuus, joka luonteensa puolesta voi toimia vain osoittimella (esimerkiksi jotkin pelimäiset toiminnot tai vaikkapa piirtäminen). Testaajan tulee siten tutkia, että jokainen sivun interaktiivinen elementti saa vuorollaan kohdistuksen, kun sivulla edetään sarkaimella. Jos elementin voi aktivoida hiirellä (avata/sulkea, kytkeä päälle/pois, …), tulee sama aktivointi voida tehdä myös näppäimistöllä esimerkiksi Enter- ja välilyöntinäppäimillä.
Näppäimistöselaukseen liittyy myös muita kriteerejä. WCAG 2.4.3 Kohdistusjärjestys tarkoittaa, että verkkosivulla olevat elementit saavat kohdistuksen loogisessa järjestyksessä – eli kun sivulla liikutaan sarkaimella, kohdistus ”pomppii” elementistä toiseen niin, että se noudattaa sivun loogista jäsennystä. Esimerkiksi jos käyttäjä on aktivoinut valikkopainikkeen, joka on avannut ns. dropdown—valikon, tulisi kohdistuksen seuraavaksi siirtyä valikon ensimmäiseen kohteeseen, eikä jatkaa ”sen alla” sivulla eteenpäin. Jos valikko on kiinni, kohdistuksen tulee puolestaan jatkaa valikkopainikkeesta seuraavaan kohteeseen, eikä esimerkiksi siirtyä suljetun valikon sisään.
Usein kohdistusjärjestys noudattaa sivun taittoa: Ylhäältä alas ja vasemmalta oikealle, mutta se saa myös poiketa tästä perustellusti. Lisätietoja on moduulin 3 palvelumuotoiluun liittyvässä aineistossa ja moduulin 4 kehittäjille tarkoitetussa materiaalissa.
Jos selausjärjestystä ei huomioida toteutuksessa, voi edellisen tilanteen pudotusvalikko tulla käyttäjälle vastaan jopa vasta aivan sivun lopussa, sillä selausjärjestys noudattaa aina DOM-järjestystä, ei visuaalista taittoa. Yleisiä ongelmakohtia näppäimistöselauksessa ovatkin lomakkeet ja modaalit (katso moduuli 4 / kehittäjän ohjeet). Näppäimistöselauksen testauksessa näihin sisältötyyppeihin kiinnitetään erityistä huomiota.
Näppäimistöselaukseen liittyy myös visuaalisen testauksen WCAG—kriteeri 2.4.7 Näkyvä kohdistus. Katso lisätietoja ja esimerkkejä:
Moduuli 3 / Yleisiä ohjeita palvelun suunnitteluun:
Alkuperäinen versio: Tero Pesonen / Siteimprove
Luotu: 3.4.2021.