Takaisin

3. Luukku

Tällä kertaa luukusta löytyy tehtävä: Testaa jokin sivu axe-selainlisäosalla.

Mikä on axe-selainlisäosa?

axe-selainlisäosa on Dequen kehittämä työkalu saavutettavuuden testaamiseen. Se pohjautuu axe-core-kirjastoon, ja tarjoaa visuaalisen käyttöliittymän minkä tahansa nettisivun testaamiseen selaimessa.

axen asentaminen

Axella testaaminen vaatii Chrome-selaimen ja tietokoneen.

  1. Asenna lisäosa selaimeen Chromen web storesta
  2. Asentamisen jälkeen avautuu sivu, jolla ohjeistetaan, kuinka lisäosaa voi käyttää. Jos sivu ei kuitenkaan tule näkyviin tai suljit sen, tässä ohjeet:
    • Avaa kehittäjän työkalut
      • command + option + i Macilla tai shift + control + i Windowsilla/Linuxilla)
      • tai avaamalla oikealla näppäimellä valikko, ja valitsemalla "Inspect".
    • Valitse oikeasta reunasta ">>"/"More tabs", ja sen alta "axe DevTools":

axella testaaminen

  1. Avaa haluamasi sivu selaimessa, ja jos et jo avannut kehittäjän työkaluja ja axea, tee se nyt.
  2. Valitse "Scan ALL of my page" axen valinnoista (muut ovat maksullisia).
  3. Odota, kunnes sivulle ilmaantuu lista ongelmista (tai teksti, joka kertoo, ettei ongelmia ollut).

Esimerkkinä alla Yle.fi-etusivulle tehty testi eräänä ajankohtana:

Kuvasta näkyy, että ongelmia sivulta löytyi yhteensä 341 kappaletta, ja näistä 338 tarvitsee tarkempaa tarkastelua. Näistä manuaalista tarkastelua tarvitsevista 334 on värikontrastiin liittyviä tarkastuksia. 2 ongelmista liittyvät parhaisiin käytäntöihin (eli eivät ole suoraan WCAGiin liittyviä). Näistä jäljelle jäävistä yksi on kriittinen ja kaksi on kohtuullisia ongelmia.

Yhteenvedon alla näkyy tarkemmat otsikot ongelmista - tai siis kaksi ensimmäistä eli "Form elements must have labels" sekä "Ensures landmarks are unique".

Lisätietoa tuloksista

Nämä tarkemmat otsikot avaavat yksittäisen näkymän, jossa kerrotaan tarkemmin ongelman sijainti sekä miten korjata ongelma. Share issue-painikkeen vierestä löytyy myös linkki, josta pääsee sivulle, jolla kerrotaan ongelmasta vielä tarkemmin. Esimerkkinä "Form elements must have labels"-kohdan lisätietolinkki vie Deque universityn sivulle Form input elements must have labels

Jaa löydökset ja oivallukset

Jaa löytämiäsi juttuja ja oivalluksia hashtagilla #Saavutettavuusjoulukalenteri, ja tägää @eevis.codes Instassa tai Eeva-Jonna Panula LinkedInissä.