Esok-verkosto

Testaa verkkosivun saavutettavuutta!

Verkkosivujen saavutettavuus tarkoittaa, että niiden sisältö on yhdenvertaisesti moninaisten lukijoiden ja päätelaitteiden käytettävissä. Sisällöt, sivuilla liikkuminen ja toiminnot sujuvat riippumatta siitä näkeekö tai kuuleeko lukija tai käyttääkö hän navigoimiseen hiirtä vai näppäimistöä.

Lisäksi useat saavutettavuusvaatimuksista edistävät sivulla olevan tiedon löydettävyyttä hakukoneilla ja siten suuremman yleisön tavoittamista. Kun saavutettavuus on julkisilla verkkosivuilla tulossa lakisääteiseksi ja sanktiotkin mahdollistuvat, on korkea aika kerätä porkkanoita ja väistellä keppejä laittamalla sivujen saavutettavuus testiin.

Testaamisen alkuun pääset helposti

Saavutettavuusvaatimukset on kuvattu Verkkosisällön saavutettavuusohjeet (WCAG) 2.0:ssa. Sivun saavutettavuutta voi tarkastella vaikka ei olisikaan tietotekniikan asiantuntija. Hyvään alkuun pääsee esimerkiksi Wave- ja Siteimprove-selainlaajennuksilla, jotka ovat saatavilla Chrome- ja Firefox-selaimiin.

Wave ja Siteimprove esittelevät löydettyjen ongelmien vaikutuksia, syitä ja korjausmahdollisuuksia. Testaaminen onnistuu verkossa julkaistujen sivujen lisäksi koneen kovalevyllä tai salasanan takana sijaitseviin sivuille.

Varjopuoli on testien tarjoaman tiedon rajallisuus ja pinnallisuus. Testeistä ei myöskään ole tarjolla suomenkielistä versiota. Pikainen testaus voi kuitenkin innostaa oppimaan uutta, tuoda pontta keskusteluihin, tietoa korjauksiin ja kiinnostusta saavutettavuuden systemaattiseen kehittämiseen ja arviointiin.

Asetuksilla saat ryhtiä raporttiin

Selaimeen asennettuna laajennus se käynnistyy ja sulkeutuu yläpalkin kuvakkeesta. Kummassakin arviointityökalussa on suodatin, jossa voi valita arviointikriteerit (WCAG-vaatimustaso, Yhdysvaltojen kuntoutuslain asetus 508). Siteimproven raportoinnin voi suodattaa myös havaittujen ongelmien vakavuuden ja verkkosivun kehittämisvastuiden mukaisesti.

Kuvakaappaus Wave-tarkistimen raportista, esillä suodattimet ja ongelmien määrät

Kuvakaappaus Siteimprove-tarkistimen raportista, esillä suodattimet ja ongelmien määrät

Waven raportissa on käytettävissä kolme eri näkymää, joista Styles esittää sivulla näkyvillä värikkäillä kuvakkeilla virheet (punainen), varoitukset (keltainen) ja ominaisuudet (vihreä). Muut kuvakkeet ja osoittimet ilmaisevat rakenne-, HTML5- ja saavutettavuutta parantavia ARIA-ratkaisuja. No Styles -näkymässä sivun tyylitiedostoa ei käytetä, jolloin sivu näyttäytyy vastaavassa järjestyksessä kuin ruudunlukuohjelmalla luettaessa. Contrast-välilehdellä on tieto riittämättömistä tekstin ja taustan välisistä sävyeroista.

Siteimprove raportoi sivulta löytyvät ongelmat WCAG-ohjeen mukaisin otsikoin ja kertoo tarkastuskohdittain havaittujen ongelmien määrät. Kummassakin arviointityökalussa saa raportissa mainitun ongelmakohdan esille myös itse sivulle.Raporttien tieto ongelmien laadusta ja korjaamisesta auttaa poistamaan virheet ja välttämään niitä jatkossa.

Virheitä ja tarkistettavia varoituksia

Koeteltaessa DigiCampus-kotisivun kehitysversiota, kumpikin tarkistin huomauttaa virheenä kahden kuvan puuttuvasta tekstivastineesta eli alt-tekstistä. Siteimprove kehottaa lisäksi tarkistamaan, että muiden kuvien merkintä koristekuvaksi (alt="") on oikein ja suosittaa käyttämään tyylejä kuvien erottamiseksi sisällöstä. Sivun kuvakarusellin kohdalla Wave kiinnittää huomiota tekstin ja taustan välisten kontrastien laimeuteen.

Kuvakaappaus Wave-tarkistimen raportin värikontrastiosuudesta, ongelmien määrän lisäksi on kuvakkeilla osoitettu, missä liian laimeat kontrastit sivulla sijaitsevat

Siteimprove puolestaan huomauttaa, että tekstiä on osana kuvaa, jolloin se ei ole apuvälineillä luettavissa. Vain Siteimprove kertoo, että sivulla lliikkumista osoittava fokukusindikaattori ei näy, mikä osalle sivun lukijoista on ongelma navigoitaessa sivulla näppäimistöä käyttäen.

Kuvakaappaus Siteimprove-tarkistimen raportista, jossa esitetään puuttuvien fokusten ongelmat ja niiden sijainti sivulla.

Molempi parempi, mutta ei ihan tarpeeksi

Testiraporttien esitystavat ja sisällöt ovat erilaiset. Wave on visuaalisuudessaan havainnollinen, Siteimprove selkeän analyyttinen. Ainakin tässä testaulla sivulla Siteimprove ilmoittaa useampia virheitä kuin Wave, joka puolestaan kunnostautuu rakenteen, HTML5 ja ARIA-ratkaisujen raportoinnissa.

Raporttien tieto on osittain yhtenevää, osittain tulokset eriävät ja täydentävät toinen toisiaan. Testit tuottavat sivun WCAG-yhteensopivuudesta kukin oman auttavan tulkintansa. Vastaavista tuloksista kertoo artikkelissaan Paul Stanton (2018). Hän koki puolenkymmenen selainlaajennuksen joukosta parhaaksi aXe:n, kun Siteimprove ja Wave olivat myös mukana.

Saavutettavuus tulee ottaa huomioon digitaalisten toteutusten eri vaiheissa suunnittelun alusta lähtien. On hyvä, että arviointiin on tarjolla on monia välineitä ja tärkeää, että niitä käytetään (ks. myös Annanpura). Riittävän tiedon saamiseksi on  tarpeen käyttää monia menetelmiä, kuten saavutettavuuden:

  • arviointiohjelmistoja
  • tarkistuslistoja
  • käyttäjätestauksia
  • auditointipalveluja.

Lisätietoa