On tärkeää tunnistaa yleisimmät saavutettavuusongelmat, jotta sudenkuopat voidaan välttää jo suunnittelu- ja tuotantovaiheessa. Kun EU:n esteettömyysdirektiivi astuu voimaan 28. kesäkuuta 2025, saavutettavuusvaatimukset koskevat myös valtaosaa verkkokaupoista ja joitakin muita uusia toimialoja, kuten tietoliikennepalveluita ja monia fyysisiä laitteita kuten digiboxeja, tietokoneita ja automaatteja. Tälläkin hetkellä saavutettavuusvaatimukset koskettavat jo muun muassa kaikkia julkishallinnon verkkopalveluita, finanssialan digipalveluita ja joitain muitakin yrityssektoreita kuten vesi- ja energia-alan yrityksiä ja liikennepalveluita. Tämä tarkoittaa, että kaikkien näiden tahojen palveluiden on oltava käytettävissä kaikille, myös niille, joilla on erityisiä tarpeita tai rajoitteita, kuten esimerkiksi ihmisille, joilla on näkö- ja kuulovammoja tai kognitiivisia rajoitteita.
Verkkopalveluiden saavutettavuusongelmat voidaan jakaa useisiin ryhmiin: sisältöön liittyviin ongelmiin, käyttöliittymän ja visuaalisen suunnittelun haasteisiin, teknisiin toteutusongelmiin sekä ruudunlukijaohjelmistojen käyttöön liittyviin esteisiin. Lopuksi sivuan myös sähköisten liitteiden, kuten PDF-dokumenttien, saavutettavuusongelmia.
1. Sisällöntuottajan haasteet
Tekstin ja tekstisisällön ongelmat
Riittämättömät kuvaukset: Kuvien ja visuaalisten elementtien tekstivastineet (alt-tekstit) puuttuvat tai ovat epätarkkoja, mikä estää ruudunlukijakäyttäjiä ymmärtämästä sisältöä. Alt-tekstien pitäisi kuvata kuvan olennainen sisältö ja merkitys.
Tyypillinen ongelma: Kuvien alt-tekstit, kuten "kuva", "valokuva" tai "img238938", eivät anna tietoa siitä, mitä kuvassa on. Lisäksi alt-tekstit voivat olla liian yleisiä tai epätarkkoja, kuten "tuotekuva" tai "logo", eivätkä ne kerro, miksi kuva on merkityksellinen sisällön kannalta.
Heikko luettavuus: Tekstiä kirjoitetaan monimutkaisella kielellä tai pitkillä tekstikappaleilla ilman riittävää jäsentelyä, mikä vaikeuttaa sen ymmärtämistä erityisesti käyttäjille, joilla on kognitiivisia haasteita.
Tyypillinen ongelma: Tekstit sisältävät liikaa ammattijargonia tai pitkiä, monimutkaisia virkkeitä, joissa on useita alisteisia lauseita. Myös puutteelliset väliotsikot, pitkät tekstikappaleet ja pitkien listojen käyttö voivat tehdä sisällöstä raskasta lukea.
Puuttuvat otsikkotasot: Sisällön jäsentelyä ei ole tehty selkeillä otsikkotasoilla (H1, H2, H3 jne.), mikä vaikeuttaa ruudunlukijalla navigointia ja sisällön jäsentelyä. On hyvä muistaa, että moni ruudunlukijakäyttäjä selaa sivun sisältöjä otsikkopikakomentoa käyttäen.
Tyypillinen ongelma: Otsikoita käytetään epäjohdonmukaisesti, niitä ei käytetä lainkaan, tai ne on merkitty vain visuaalisesti ilman oikeaa HTML-rakennetta. Esimerkiksi sivulla saattaa olla pelkkiä lihavoituja tekstejä ilman oikeaa otsikkorakennetta, mikä tekee sivun hahmottamisesta vaikeaa ruudunlukijalla.
Otsikointi ja linkit
Puuttuvat tai epäjohdonmukaiset otsikot: Otsikot eivät heijasta sivun sisältöä tai niitä ei ole käytetty johdonmukaisesti, mikä vaikeuttaa käyttäjien orientointia sivustolla.
Tyypillinen ongelma: Sivustolla saattaa olla otsikoita, jotka eivät vastaa sisältöä, kuten otsikko "Tietoa meistä", joka johdattaakin käyttäjän palveluesittelyyn. Toinen yleinen ongelma on, että otsikoiden hierarkia on epälooginen, mikä sekoittaa käyttäjiä ja vaikeuttaa sivustolla navigointia.
Epäselvät linkkitekstit: Linkit eivät anna selkeää tietoa kohteestaan (esim. "lue lisää"), mikä haittaa käyttäjäkokemusta erityisesti ruudunlukijalla tai niille, jotka silmäilevät sivua nopeasti.
Tyypillinen ongelma: Linkkiteksti, kuten "Lue lisää", "Klikkaa tästä" tai "Lisää tietoa", ei kerro käyttäjälle, mihin linkki vie. Tämä on erityisen ongelmallista ruudunlukijakäyttäjille, jotka saattavat kuulla vain linkin tekstin ilman kontekstia.
2. Käyttöliittymän ja visuaalisen suunnittelun ongelmat
Heikot kontrastit
Kontrastiongelmat: Tekstin ja taustan välinen kontrasti on liian heikko, mikä tekee sisällön lukemisesta vaikeaa. Tämä ongelma esiintyy usein, kun brändivärejä käytetään tavalla, joka ei täytä saavutettavuusstandardeja. Vastaavia ongelmia voi esiintyä myös kaavioissa, graafeissa ja infografiikassa, joissa huonosti valitut värit voivat aiheuttaa merkittäviä haasteita niin heikkonäköisille, ikänäköisille kuin värisokeillekin, jollei usein jo keskivertolukijallekin.
Tyypillinen ongelma: Esimerkiksi harmaa teksti vaalealla taustalla, valkoinen teksti harmaalla taustalla, keltainen teksti valkoisella, tai valkoinen teksti keltaisella pohjalla ovat yleisiä esimerkkejä huonosta kontrastista. Monimutkaisissa infograafeissa käytetyt samanväriset tai -sävyiset alueet voivat tehdä niiden tulkinnasta vaikeaa. Erityisesti puna-vihersokeat saattavat kokea haasteita, jos kontrastit eivät ole riittäviä.
Näppäimistökäytön haasteet
Näkyvän kohdistuksen puuttuminen: Näppäimistön kohdistusindikaattori puuttuu, mikä estää näppäimistökäyttäjiä hahmottamasta, missä kohtaa sivua he ovat. Tämä tekee sivuston käytöstä vaikeaa ilman hiirtä.
Tyypillinen ongelma: Kohdistus ei ole näkyvissä, kun käyttäjä navigoi sivulla näppäimistöllä, mikä tekee sivuston käytön mahdottomaksi ilman visuaalista palautetta. Tämä ongelma korostuu erityisesti lomakkeiden ja monivaiheisten prosessien yhteydessä. Kohdistus saattaa myös kadota tietyissä osioissa, kuten ponnahdusikkunoissa tai modaalidialogeissa.
Loogisen kohdistuksen puute: Näppäimistökohdistus ei siirry loogisesti sivun elementtien välillä, mikä aiheuttaa sekaannusta ja hidastaa sivuston käyttöä.
Tyypillinen ongelma: Kohdistus hyppii sivun osioiden välillä epäloogisesti, esimerkiksi jättää osioita välistä tai palaa aiempiin osioihin, mikä tekee sivustolla liikkumisesta hankalaa ja hidasta.
Hyppylinkkien puuttuminen: Monilta verkkosivustoilta puuttuvat linkit, joiden avulla käyttäjät voivat hypätä suoraan sivun sisältöön ohittaen navigointielementit ja muut osiot, mikä vaikeuttaa sivuston käytettävyyttä pelkällä näppäimistöllä.
Tyypillinen ongelma: Sivulla ei ole "Siirry sisältöön" -linkkiä, mikä pakottaa näppäimistökäyttäjät käymään läpi kaikki navigointivalikot ennen pääsisältöön pääsemistä. Tämä voi olla erityisen turhauttavaa, jos navigointivalikoissa on paljon linkkejä.
Kuvakepainikkeet ja linkit
Puuttuvat saavutettavat nimet: Kuvakepainikkeilta ja linkeiltä puuttuvat saavutettavat nimet, mikä tekee niiden käytöstä mahdotonta ruudunlukijalla.
Tyypillinen ongelma: Kuvakepainikkeet, kuten “Lisää”, “Siirrä ostoskoriin”, "Hae" tai "Valikko", eivät sisällä tekstivastineita, joten ruudunlukija ei osaa kertoa käyttäjälle, mitä nämä painikkeet tekevät. Vastaavasti kuvalinkit, jotka eivät sisällä alt-tekstiä, voivat olla mahdottomia ymmärtää ruudunlukijalla. Myös kuvakkeet, jotka on tarkoitettu painikkeiksi, mutta eivät ole merkitty asianmukaisesti, voivat jäädä kokonaan huomaamatta, mikä voi olla erityisen ongelmallista verkkokaupoissa ja asiointipalveluissa, joissa ne voivat estää ostamisen tai asioinnin kokonaan.
Lomakkeiden toteutuksen ongelmat
Lomakekenttien nimilappujen puuttuminen: Lomakekenttiä ei ole ohjelmallisesti yhdistetty niiden nimilappuihin, mikä vaikeuttaa ruudunlukijakäyttäjien lomakkeiden täyttämistä.
Tyypillinen ongelma: Ruudunlukija ei tunnista, mikä kenttä kuuluu mihinkin otsikkoon, joten käyttäjä ei tiedä, mitä tietoja kuhunkin kenttään pitäisi syöttää. Tämä ongelma korostuu erityisesti monimutkaisissa lomakkeissa, joissa on paljon kenttiä ja vaihtoehtoja. Vastaavasti kenttien puutteelliset selitteet tai puuttuvat ohjetekstit voivat estää käyttäjää ymmärtämästä, mitä tietoja lomakkeeseen tarvitaan.
Virheilmoitusten ja palautteiden ongelmat: Lomakkeiden virheilmoituksia ei lueta automaattisesti ruudunlukijalla tai ilmoituksia ei ole liitetty ohjelmallisesti niihin kenttiin, joita ilmoitukset koskevat. Tämä voi estää käyttäjiä huomaamasta virheitä tai ymmärtämästä virheiden syitä.
Tyypillinen ongelma: Virheilmoitukset voivat näkyä sivun ylä- tai alareunassa ilman selkeää yhteyttä virheelliseen kenttään, mikä johtaa siihen, että käyttäjä ei tiedä, mikä kenttä on täytetty väärin. Lisäksi puuttuvat tai epäselvät palautteet onnistuneesta tai epäonnistuneesta lomakkeen lähetyksestä aiheuttavat hämmennystä. Esimerkiksi käyttäjä saattaa saada virheilmoituksen ilman tarkkaa selitystä siitä, mikä meni pieleen.
3. Teknisen toteutuksen ongelmat
Huolimaton HTML-koodi
Väärin käytetyt HTML-elementit: Käytetään vääränlaisia HTML-tageja, kun pitäisi käyttää esimerkiksi painikkeita, otsikoita tai listoja, kun tulisi käyttää esimerkiksi painikkeita, otsikoita tai listoja. Tämä aiheuttaa ongelmia niin ruudunlukijakäytössä kuin näppäimistöohjauksessakin.
Tyypillinen ongelma: Sivun elementit, jotka pitäisi tunnistaa painikkeiksi, otsikoiksi tai listoiksi, on merkitty väärin, mikä estää niiden käytön asianmukaisesti ruudunlukijalla ja näppäimistöllä. Vastaavasti, div-tageja käytetään usein virheellisesti, kun oikea elementti olisi esimerkiksi painike tai linkki, mikä estää elementin asianmukaisen käytön.
Puuttuvat tai väärin käytetyt HTML5-maamerkit: HTML5-maamerkkien (kuten nav, main, footer) puuttuminen tai virheellinen käyttö tekee sivuston navigoinnista ruudunlukijoilla vaikeaa.
Tyypillinen ongelma: Tärkeitä maamerkkejä, kuten pääsisältöä kuvaava main-elementti tai navigaatiota kuvaava nav-elementti, ei ole määritelty, mikä tekee sivuston rakenteen hahmottamisesta hankalaa. Myös virheellisesti käytetyt maamerkit, kuten footer, joka sisältää sivuston pääsisältöä, voivat aiheuttaa sekaannusta ruudunlukijakäyttäjille.
4. Ruudunlukijaohjelmiston käyttöön liittyvät ongelmat
Mediaupotusten esteet
Mediaupotukset ja niiden saavutettavuus: Sivustolle upotetut mediat, kuten videot ja äänitiedostot, eivät usein ole saavutettavia ruudunlukijakäyttäjille, erityisesti jos niissä ei ole kuvailutulkkausta tai saavutettavia ohjaimia.
Tyypillinen ongelma: Videot voivat alkaa toistua automaattisesti ilman tapaa pysäyttää niitä näppäimistön avulla, tai videossa ei ole riittävää kuvailutulkkausta, mikä tekee sen sisällöstä vaikeasti ymmärrettävää. Lisäksi mediatiedostojen ohjaimet eivät välttämättä ole saavutettavia, jolloin ruudunlukijakäyttäjä ei pysty hallitsemaan toistoa.
Toinen yleinen ongelma on, että esimerkiksi someupotukset voivat katkaista tekstin siten, että ruudunlukija ei tunnista upotusta eikä ymmärrä, että teksti jatkuu sen jälkeen, mikä estää käyttäjää siirtymästä eteenpäin.
5. Sähköisten liitteiden ja PDF-dokumenttien saavutettavuusongelmat
Puuttuvat tekstivastineet
Kuvien ja grafiikoiden tekstivastineet: PDF-tiedostoissa olevilta kuvilta ja grafiikoilta puuttuvat usein tekstivastineet, mikä tekee niistä saavutettavuusvaatimusten vastaisia.
Tyypillinen ongelma: Kuvia tai kaavioita sisältävissä PDF-dokumenteissa ei ole tekstivastineita, joten ruudunlukijakäyttäjät eivät saa tietoa kuvien sisällöstä.
Otsikkorakenteen puute
Puuttuvat otsikkorakenteet: PDF-tiedostojen sisältö ei ole rakenteeltaan looginen, jolloin otsikot, listat ja taulukot eivät ole tunnistettavissa ruudunlukijalla.
Tyypillinen ongelma: Ruudunlukija ei tunnista PDF-tiedostojen otsikoita, koska niitä ei ole merkitty oikein. Tämä tekee dokumenttien rakenteen hahmottamisesta ja silmäilystä haastavaa käyttäjille.
Skannatut dokumentit
Skannatut PDF-tiedostot: Skannatut asiakirjat, jotka on tallennettu PDF-muotoon kuvina, ovat täysin lukukelvottomia ruudunlukijoilla.
Tyypillinen ongelma: Skannatut tiedostot eivät sisällä tekstiä, jota ruudunlukija voisi lukea, joten käyttäjät eivät pysty käsittelemään tai ymmärtämään dokumentin sisältöä lainkaan.
6. Teknisesti saavutettava, mutta silti liian vaikea käyttää
Verkkopalvelun voi tehdä sellaiseksi, että se täyttää määritellyt saavutettavuusvaatimukset, mutta on silti liian vaikea käyttää. Saavutettavuus ja käytettävyys eivät ole sama asia, vaikka ne ovatkin osittain päällekkäisiä käsitteitä. On itse asiassa melko yleistä, että palvelu täyttää saavutettavuuskriteerit hyvin, mutta on silti varsin vaikeakäyttöinen. Tällöin palvelu on tasapuolisesti vaikeakäyttöinen kaikille käyttäjille.
Tätä voi verrata kauppakeskukseen, jossa on kyllä pyörätuoleille rampit, pyörätuolit mahtuvat hisseihin ja opasteet ovat olemassa sokeille ja kuulovammaisille. Silti keskus voi olla niin sekava, että siellä eksyvät yhtä lailla niin keskivertoihmiset kuin pyörätuolin käyttäjätkin.
Muista siis panostaa myös käytettävyyteen; pelkkä saavutettavuus ei aina riitä siihen, että palvelua on helppo ja miellyttävä käyttää. Käytettävyys ei synny itsestään, vaan palvelut tulee suunnitella käyttäjäkeskeisesti, UX-alan asiantuntijoita käyttäen ja palveluita testaamalla oikeilla käyttäjillä ja asiantuntijoilla.
Haasteita riittää, mutta ei hätää
Tässä esiteltiin aika isokin joukko tyypillisiä saavutettavuusongelmia, joita verkkopalveluissa voi esiintyä. Potentiaalisia ongelmia on paljon enemmäkin. Saavutettavuusvaatimuksia on jo itsessään paljon, ja on olemassa lukemattomia tapoja luoda ei-saavutettavia palveluita. Hyvä uutinen on kuitenkin, että useimmat näistä asioista ovat varsin yksinkertaisia korjata, kun ne tunnistetaan ja käsitellään oikein. Haasteena on kuitenkin se, että ongelmia on niin paljon, että vie aikaa ennen kuin suunnittelijat ja toteuttajat oppivat välttämään ne kaikki ja hiomaan verkkopalvelun ja sisällöntuotannon yksityiskohdat kuntoon.
Ei silti mitään hätää. Saavutettavuusasiantuntijamme voivat auttaa tunnistamaan kaikki mahdolliset ongelmat verkkopalvelussasi tekemällä kattavan auditoinnin ja tarjoamalla korjausehdotukset. Lisäksi voimme kouluttaa henkilöstöäsi varmistamaan, että saavutettavuus huomioidaan myös jatkossa ja kaikissa kehitysvaiheissa. Ja muista testata palvelusi käytettävyyttä myös!
Eficode Accessibility keeper on myös vaihtoehto yritysten verkkopalveluiden saavutettavuuden seurantaan ja ylläpitoon. Palvelu tarkkailee automaattisesti verkkopalveluiden saavutettavuutta ja raportoi siellä havaituista ongelmista sekä tarjoaa niihin korjausehdotuksia.
Eficoden saavutettavuusasiantuntijat ovat valmiina auttamaan. Ota yhteyttä, niin varmistetaan yhdessä, että verkkopalvelusi on saavutettava kaikille käyttäjille.
Julkaistu: 1. marraskuuta 2024
