Verkkopalveluiden top 5 -saavutettavuusongelmat

Eficoden UX Research -tiimissä työskentelee 18 saavutettavuusarvioita takovaa asiantuntijaa, jotka ovat viimeisten vuosien aikana tuottaneet lukuisia saavutettavuusarviointeja niin julkisen sektorin toimijoille kuin yksityisille yrityksillekin. Kokemusta saavutettavuusongelmista on siis viime aikoina kertynyt sen verran, että päätimme järjestää äänestyksen ja listata sen perusteella yleisimmät kohtaamamme saavutettavuusongelmat.

Tuloksena syntyi alta löytyvä top 5 -katsaus saavutettavuusongelmiin:

1) Ilmoitusten ja virheilmoitusten merkitsemisen

Yleisin saavutettavuusasiantuntijoiden kohtaama ongelma on se, ettei virheilmoituksia ja muita palautteita ole merkattu niin, että ruudunlukija lukisi niiden sisällön automaattisesti ilman kohdistuksen siirtämistä. Ruudunlukijakäyttäjän voi olla tässä tilanteessa mahdotonta tietää, että lomakkeella edes oli virheitä tai että liitetiedoston lisääminen onnistui virheettä. Usein virheilmoituksia ei ole liitetty myöskään itse kenttiin, eli tietoa ei saa kenttään kohdistettaessakaan.

Ongelman korjaamiseksi 

• Varmistetaan, että myös ruudunlukijakäyttäjä saa tiedon virheiden olemassaolosta tai toimintojen onnistumisesta ilman, että tietoa joutuu etsimään sivulta rivi kerrallaan.
• Osoitetaan lomakkeen puutteelliset kentät selkeästi ohjelmallisesti ja yhdistetään virheilmoitukset koodissa niitä vastaaviin kenttiin.
• Varmistetaan, että virheilmoitukset on merkitty selkeästi myös visuaalisesti esimerkiksi sekä punaista väriä että jotain muuta visuaalista keinoa hyödyntäen.
• Tarkempia ohjeita löytyy tutoriaalista.

2) Custom-käyttöliittymäkomponenttien käyttö

Kustomoitujen käyttöliittymäkomponenttien käyttö aiheuttaa usein ongelmia. Esimerkiksi kaikki vähänkin monimutkaisemmat interaktiiviset valikot, kuten hakukenttiä sisältävät pudotusvalikot, monivalinnat ja päivämääräkenttien kalenterivalitsimet ovat monesti haastavia saavutettavuuden kannalta. Itse rakennetut komponentit toimivat toisinaan ainoastaan vain hiirellä ja usein heikosti etenkin ruudunlukijoilla. Periaatteessa suurimmassa osasta tällaisia komponentteja saa saavutettavia, mutta tämä vaatii erityistä paneutumista aiheeseen. Usein kannattaakin miettiä, voisiko monimutkaisen itse rakennetun komponentin kuitenkin korvata yksinkertaisemmalla HTML-standardikomponentilla.

Ongelman korjaamiseksi 

• Harkitse, voisitko sittenkin käyttää yksinkertaisempaa standardikomponenttia. Huomioi, että myös standardikomponentteja voi usein visuaalisesti tyylitellä pienillä muutoksilla.
• Jos custom-komponentin käyttöä ei voi välttää, älä luota tuuriin tai lupauksiin, vaan varmista komponentin saavutettavuus näppäinkäytössä sekä eri ruudunlukijoilla ja internetselaimilla.
• Noudata aina tuoreimpia ARIA-suosituksia.

3) Puuttuvat ja puutteelliset nimilaput ja ryhmitykset

Lomakekenttien ja valintaruutujen visuaalisia nimilappuja ei ole usein yhdistetty ohjelmallisesti itse kenttiin. Tällaiseen kenttään kohdistettaessa ruudunlukijakäyttäjä ei saa siten tietoa siitä, mitä kyseiseen kenttään tulisi täyttää tai mikä valintaruutu valita, sillä ruudunlukija ilmoittaa ainoastaan kentän tyypin. Tämän lisäksi samaan kysymykseen liittyvät vastausvaihtoehdot tulisi ryhmitellä yhteen myös koodissa.

Ongelman korjaamiseksi

• Varmistetaan,  että kaikkien kenttien visuaalinen nimilappu on yhdistetty niitä vastaaviin kenttiin ohjelmallisesti, jotta kentän merkitys selviää myös ruudunlukijakäyttäjälle. Lisätietoja löytyy esim. Labeling Controls -tutoriaalista.
• Jos kentällä ei ole visuaalisesta tekstimuotoista nimeä, tulee se nimetä ohjelmallisesti esim. aria-label-attribuutin avulla.
• Yhteen kuuluvat valintaruudut tai -napit saa kätevimmin ryhmitettyä käyttämällä fieldset-rakennetta. Lisätietoa tästä löytyy esim. Grouping Controls -tutoriaalista.

4) PDF-dokumentteihin liittyvät ongelmat

 PDF-dokumentit ovat usein saavutettavuuden kannalta murheenkryynejä, sillä niiden saavutettavuudessa on usein puutteita etenkin ruudunlukijakäytössä. Yleisiä ongelmia PDF:ssä ovat tekstivastineiden puutteet, ohjelmallisesti merkitsemättömät tai väärin merkityt otsikot, sisällön lukemisjärjestys ja puutteet taulukkorakenteiden merkinnöissä. Lomakekenttiä sisältävät PDF-dokumentit vaativat tämän päälle vielä lisää työtä saavutettavuuden suhteen. Toiset ruudunlukijat ovat hieman parempia tulkitsemaan PDF-dokumentteja kuin toiset, joten olennainen informaatio tulisi aina joka tapauksessa tarjota myös muussa muodossa, jotta se on kaikkien saavutettavissa.

Ongelman korjaamiseksi 

• PDF-ongelmat kannattaa aina korjata mahdollisimman pitkälle lähdedokumenttiin eli esim. Word-tiedostoon, joka muunnetaan PDF-muotoon. Tarkista etenkin otsikot, taulukot ja kuvien tekstivastineet.
• Jos lähdedokumentti ei ole saatavilla tai sitä ei voi muokata, tarvitaan PDF-dokumentin korjaamiseen siihen soveltuva ohjelmisto, esim. Acrobat-ohjelmiston maksullinen pro-versio.
• Lisätietoja PDF-dokumentin saavutettavuuskorjauksista löytyy esim. PDF Accessibility -sivulta.
• PDF-dokumenttien ohella kannattaa muistaa myös mm. Word-, PowerPoint- ja Excel-tiedostojen saavutettavuus.

5) HTML-rakenteiden väärinkäyttö, esim. otsikkotasot ja taulukot

HTML:n perusrakenteita käytetään usein väärin. Ongelmia aiheuttaa esimerkiksi  otsikkotasojen epälooginen käyttö esim. informaation visuaaliseen korostamiseen. Joskus otsikot saatetaan myös merkitä pelkästään lihavoimalla tai suuremmalla fonttikoolla, jolloin ne eivät välity ruudunlukijakäyttäjille. Taulukoita käytetään taas etenkin vanhemmissa sivustoissa sisällön asetteluun, jolloin ne tulisi vähintään piilottaa ruudunlukijoilta.

Ongelman korjaamiseksi 

• Tarkistetaan palvelun otsikkotasojen järkevä käyttö: sivulla on yksi h1-otsikko ja muita otsikkotasoja on käytetty loogisesti.
• Varmistetaan, että jokainen otsikko on merkitty myös ohjelmallisesti, mutta toisaalta informaatiota, joka ei ole otsikkotasoista, ei ole merkitty sellaiseksi HTML-koodissa.
• Varmistetaan, että taulukoilla on selvät rivi- ja/tai sarakeotsikot ja ne on merkitty selvästi sekä visuaalisesti että ohjelmallisesti. Käytetään taulukoita vain jos ne ovat todella tarpeen.
• Mitä monimutkaisempi taulukon rakenne on, sitä haastavampaa siitä on tehdä saavutettava. Kannattaa siis suosia taulukoita, jotka ovat rakenteeltaan yksinkertaisia.
• Lisätietoa taulukkojen saavutettavuudesta löytyy esim. Tables Concepts -tutoriaalista.

Jos kaipaat apua yllä listattujen tai muiden saavutettavuusongelmien korjaamiseksi, ota yhteyttä Eficoden UX Research Director Raino Vastamäkeen raino.vastamaki@eficode.com.