10 yleisintä saavutettavuusvirhettä verkkosivuilla

Verkkosivusto voi näyttää hyvältä ja toimia ongelmitta suurimmalle osalle käyttäjistä, mutta silti sisältää saavutettavuusongelmia, jotka vaikeuttavat tai jopa estävät joidenkin ihmisten asioinnin sivustolla.

Saavutettavuudessa on kyse siitä, että mahdollisimman moni pystyy käyttämään verkkosivustoa erilaisista toimintakyvyn rajoitteista, päätelaitteista ja käyttötavoista riippumatta.

Monet saavutettavuusongelmat ovat yllättävän tavallisia. Tekstin ja taustan kontrasti voi olla liian heikko, kuvilta voivat puuttua tekstivastineet tai sivustoa ei ehkä pysty käyttämään kunnolla ilman hiirtä.

Tässä artikkelissa käymme läpi 10 yleistä saavutettavuusvirhettä verkkosivuilla ja kerromme, miten niitä voidaan välttää.

1. Tekstin ja taustan kontrasti on liian heikko

Yksi helposti havaittavista saavutettavuusongelmista on liian pieni kontrasti tekstin ja taustan välillä.

Esimerkiksi vaaleanharmaa teksti valkoisella taustalla voi näyttää visuaalisesti kevyeltä ja tyylikkäältä, mutta samalla tekstin lukeminen voi muuttua vaikeaksi.

Ongelma korostuu esimerkiksi käyttäjillä, joilla on heikentynyt näkö tai värinäköön liittyviä rajoitteita. Myös kirkas auringonvalo, heikkolaatuinen näyttö tai puhelimen pieni näyttö voivat tehdä heikosta kontrastista ongelman kenelle tahansa.

Kuvitellaan esimerkiksi kauneushoitolan verkkosivusto, jossa palveluiden hinnat on esitetty hyvin vaaleanharmaalla tekstillä valkoista taustaa vasten.

Vaikka hinnasto näyttäisi suunnittelijan näytöllä tyylikkäältä, osa asiakkaista voi joutua pinnistelemään saadakseen hinnoista selvää.

Saavutettavuuden kannalta ulkoasun ja luettavuuden pitää kulkea käsi kädessä.

2. Kuvilta puuttuvat tekstivastineet

Verkkosivuston merkityksellisille kuville kannattaa määritellä vaihtoehtoinen teksti eli alt-teksti.

Sen tarkoituksena on välittää kuvan olennainen sisältö tilanteessa, jossa käyttäjä ei näe kuvaa.

Kauneushoitolan palvelusivulla voisi esimerkiksi olla kuva tietystä kasvohoidosta. Jos kuva välittää olennaista tietoa palvelusta, tekstivastineen pitäisi kuvata sen tarkoitusta ymmärrettävästi.

Huono alt-teksti voisi olla:

kuva123.jpg

Parempi vaihtoehto voisi asiayhteydestä riippuen olla:

Kosmetologi tekemässä kasvohoitoa asiakkaalle.

Jokainen kuva ei kuitenkaan tarvitse kuvailevaa tekstivastinetta. Jos kuva on täysin koristeellinen eikä välitä käyttäjälle mitään olennaista tietoa, se voidaan yleensä jättää avustavilta teknologioilta huomiotta asianmukaisella toteutuksella.

Tärkeintä ei siis ole täyttää alt-kenttää mekaanisesti jokaiselle kuvalle, vaan miettiä mikä kuvan merkitys on kyseisessä asiayhteydessä.

3. Otsikkorakenne on epälooginen

Otsikot eivät ole verkkosivuilla vain visuaalisia elementtejä.

H1-, H2- ja H3-otsikot muodostavat sisällölle rakenteen, jonka avulla käyttäjä voi hahmottaa sivun eri osat. Rakenteesta hyötyvät myös esimerkiksi ruudunlukijaa käyttävät henkilöt ja hakukoneet.

Hyvä rakenne voisi näyttää tältä:

H1: Kasvohoidot Joensuussa
H2: Kasvohoidot eri ihotyypeille
H3: Kosteuttava kasvohoito
H3: Herkän ihon kasvohoito
H2: Kasvohoitojen hinnasto
H2: Usein kysyttyä kasvohoidoista

Otsikkotasoja ei kannata valita sen perusteella, minkä kokoinen teksti näyttää hyvältä. Ulkoasu hoidetaan tyyleillä ja otsikkotasot valitaan sisällön rakenteen mukaan.

Mediakumpu huomioi loogisen sisältö- ja sivurakenteen myös yritysten kotisivujen suunnittelussa ja toteutuksessa.

4. Sivustoa ei voi käyttää näppäimistöllä

Kaikki käyttäjät eivät käytä verkkosivustoa hiirellä tai kosketusnäytöllä.

Siksi sivuston tärkeiden toimintojen pitäisi olla käytettävissä myös näppäimistöllä.

Tab-näppäimellä pitäisi pystyä etenemään esimerkiksi:

• navigaatiossa
• linkeissä
• painikkeissa
• lomakekentissä
• valikoissa
• muissa interaktiivisissa elementeissä.

Käyttäjän pitäisi samalla nähdä selvästi, missä kohdassa sivua näppäimistön kohdistus eli fokus on.

Kauneushoitolan sivulla ongelma voisi tulla vastaan esimerkiksi ajanvarauksessa. Jos “Varaa aika” -painikkeeseen tai ajanvarauskalenterin toimintoihin ei pääse näppäimistöllä, osa asiakkaista ei välttämättä pysty tekemään varausta lainkaan.

Näppäimistökäyttöä kannattaakin testata käytännössä: laita hiiri sivuun ja yritä käyttää sivuston tärkeimmät toiminnot pelkällä näppäimistöllä.

5. Linkit ja painikkeet eivät kerro, mitä niistä tapahtuu

Verkkosivustoilla näkee paljon linkkejä, joiden tekstinä on:

Lue lisää
Klikkaa tästä
Katso tästä

Yksittäisenä linkkinä tällainen teksti ei kerro käyttäjälle juuri mitään linkin kohteesta.

Kuvaavampi vaihtoehto olisi esimerkiksi:

Tutustu kasvohoitoihin
Katso kasvohoitojen hinnasto
Lue lisää herkän ihon hoidosta
Varaa aika kasvohoitoon

Kuvaavat linkkitekstit auttavat kaikkia käyttäjiä ymmärtämään, mitä linkistä tapahtuu. Niistä on erityistä hyötyä käyttäjille, jotka navigoivat sivustolla avustavien teknologioiden avulla.

Selkeä linkitys auttaa samalla myös hakukoneita ymmärtämään sivuston eri sisältöjen välisiä suhteita.

6. Lomakkeiden kenttiä ei ole nimetty selkeästi

Lomakkeet ovat yksi verkkosivustojen tavallisimmista saavutettavuusongelmien lähteistä.

Kentällä pitäisi olla selkeä nimi, josta käyttäjä ymmärtää, mitä siihen pitää kirjoittaa.

Esimerkiksi:

Nimi
Sähköpostiosoite
Puhelinnumero
Viesti

Pelkkää kentän sisällä näkyvää esimerkkitekstiä eli placeholderia ei yleensä kannata käyttää varsinaisen kentän nimen korvikkeena. Teksti voi kadota kirjoittamisen aloittamisen jälkeen, eikä toteutus välttämättä välitä kentän tarkoitusta avustaville teknologioille oikein.

Myös virhetilanteiden pitää olla ymmärrettäviä.

Pelkkä kentän muuttuminen punaiseksi ei riitä kertomaan kaikille käyttäjille, mikä meni väärin.

Parempi virheilmoitus voisi olla:

Kirjoita sähköpostiosoite muodossa nimi@yritys.fi.

Käyttäjän pitäisi pystyä ymmärtämään sekä virheen sijainti että se, miten virhe korjataan.

7. Tietoa välitetään pelkän värin avulla

Väri on hyvä tapa vahvistaa visuaalista viestintää, mutta sen ei pitäisi olla ainoa keino välittää olennaista tietoa.

Kuvitellaan kauneushoitolan ajanvarauskalenteri:

vihreä = vapaa aika
punainen = varattu aika

Jos tilojen välillä ei ole mitään muuta eroa kuin väri, niiden erottaminen voi olla hankalaa käyttäjälle, jolla on värinäön rajoite.

Parempi ratkaisu on käyttää värin lisäksi esimerkiksi tekstiä, symbolia tai muuta visuaalista tunnistetta.

Sama koskee lomakkeita.

Jos virheellinen kenttä merkitään ainoastaan punaisella reunuksella, käyttäjä ei välttämättä ymmärrä, missä ongelma on. Sen rinnalla tarvitaan ymmärrettävä virheilmoitus.

8. Tekstin suurentaminen tai mobiilikäyttö rikkoo sivun

Saavutettava verkkosivusto mukautuu erilaisiin näyttökokoihin ja käyttäjän tekemiin suurennuksiin.

Jos tekstin suurentaminen aiheuttaa sen, että sisältö menee päällekkäin, painikkeet katoavat tai teksti leikkautuu, sivuston käyttö voi muuttua vaikeaksi.

Sama ongelma näkyy usein mobiilissa.

Kauneushoitolan hinnasto saattaa näyttää suurella näytöllä hyvältä neljän sarakkeen taulukkona, mutta puhelimella osa hinnoista voi jäädä näytön ulkopuolelle.

Responsiivinen suunnittelu ei siis tarkoita vain sitä, että verkkosivusto “toimii puhelimella”. Myös sisältöjen, lomakkeiden, taulukoiden, navigaation ja interaktiivisten toimintojen pitää mukautua käytettävään tilaan.

Saavutettavuus onkin tärkeä huomioida jo verkkosivujen suunnitteluvaiheessa, eikä vasta valmiin sivuston tarkistuslistana.

9. Videoista puuttuvat tekstitykset

Videoita käytetään verkkosivuilla yhä enemmän esimerkiksi palveluiden, tuotteiden ja yrityksen toiminnan esittelemiseen.

Jos videon sisältämä olennainen puhe tai muu äänisisältö välittää tietoa, tekstitysten puuttuminen voi estää osaa käyttäjistä saamasta samaa tietoa.

Kauneushoitola voisi esimerkiksi julkaista videon:

“Näin kasvohoito etenee”

Jos kosmetologi kertoo videolla hoidon eri vaiheista mutta videossa ei ole tekstityksiä, äänisisältö ei ole samalla tavalla kaikkien käyttäjien saavutettavissa.

Tekstityksistä on hyötyä myös paljon laajemmalle käyttäjäjoukolle. Videoita katsotaan esimerkiksi puhelimella julkisissa tiloissa ilman ääniä.

Saavutettavuuden parantaminen parantaa siis usein käyttökokemusta myös käyttäjillä, joilla ei ole toimintarajoitteita.

10. Saavutettavuutta testataan vain automaattisella työkalulla

Automaattiset saavutettavuustestit ovat hyödyllisiä, mutta ne eivät yksin kerro, onko verkkosivusto saavutettava.

Työkalu voi löytää esimerkiksi tiettyjä kontrastiongelmia, puuttuvia alt-attribuutteja tai HTML-rakenteen virheitä.

Se ei kuitenkaan välttämättä pysty arvioimaan luotettavasti esimerkiksi:

• onko alt-teksti sisällöltään hyvä
• onko otsikkorakenne käyttäjän kannalta looginen
• ovatko linkkitekstit ymmärrettäviä
• toimiiko sivusto järkevästi näppäimistöllä
• ovatko lomakkeiden virheilmoitukset ymmärrettäviä
• onko käyttöliittymän etenemisjärjestys looginen.

Siksi saavutettavuuden tarkistamiseen tarvitaan automaattisten työkalujen lisäksi manuaalista testaamista.

Mediakummun saavutettavuuspalvelussa verkkosivustoa voidaan tarkastella teknisen toteutuksen lisäksi käytännön käyttökokemuksen näkökulmasta.

Saavutettavuus hyödyttää kaikkia verkkosivuston käyttäjiä

Saavutettavuus mielletään joskus joukoksi teknisiä vaatimuksia, jotka tehdään vain tiettyjä käyttäjäryhmiä varten.

Todellisuudessa monet saavutettavuusparannukset tekevät verkkosivustosta paremman kaikille.

• Hyvä kontrasti helpottaa lukemista kirkkaassa auringonvalossa.
• Selkeät otsikot helpottavat pitkän sivun silmäilyä.
• Kuvaavat linkit tekevät navigoinnista ymmärrettävämpää.
• Hyvät lomakkeiden virheilmoitukset auttavat jokaista täyttämään lomakkeen oikein.
• Tekstitykset mahdollistavat videon seuraamisen ilman ääniä.
• Hyvä näppäimistökäytettävyys kertoo usein muutenkin huolellisesti toteutetusta käyttöliittymästä.

Saavutettavuus kannattaa siksi nähdä osana hyvää verkkosuunnittelua ja käyttäjäkokemusta, ei irrallisena lisäominaisuutena.

Miten verkkosivuston saavutettavuutta kannattaa testata?

Hyvä saavutettavuustarkistus yhdistää useita menetelmiä.

Automaattisilla työkaluilla voidaan löytää osa teknisistä ongelmista. Lisäksi sivustoa kannattaa käyttää itse erilaisilla tavoilla.

Yksinkertainen perustarkistus voidaan aloittaa esimerkiksi näin:

1. Käytä sivustoa pelkällä näppäimistöllä.
2. Suurenna selaimen tekstikokoa ja tarkista, säilyykö sisältö käytettävänä.
3. Tarkista tekstien ja käyttöliittymäelementtien kontrastit.
4. Tarkista merkityksellisten kuvien tekstivastineet.
5. Käy läpi sivujen H1-, H2- ja H3-rakenne.
6. Tarkista lomakkeiden kentät ja virheilmoitukset.
7. Tarkista linkkien ja painikkeiden nimet.
8. Testaa tärkeimmät toiminnot mobiililaitteella.
9. Tarkista videoiden ja muun mediasisällön saavutettavuus.
10. Käytä lisäksi saavutettavuuden automaattisia tarkistustyökaluja.

Tämä ei vielä korvaa kattavaa saavutettavuusarviointia, mutta sillä voidaan löytää suuri määrä tavallisista ongelmista.

Saavutettavuus kannattaa huomioida jo verkkosivustoa rakennettaessa

Saavutettavuusongelmien korjaaminen jälkikäteen on mahdollista, mutta usein tehokkaampaa on huomioida saavutettavuus jo verkkosivuston suunnittelussa ja toteutuksessa.

Tällöin voidaan ottaa alusta lähtien huomioon esimerkiksi:

• riittävät kontrastit
• looginen otsikkorakenne
• näppäimistökäyttö
• lomakkeiden saavutettavuus
• responsiivisuus
• kuvien tekstivastineet
• selkeät linkit ja painikkeet
• semanttisesti oikea HTML-rakenne.

Myös sisältöjen lisäämiseen tarvitaan hyvät käytännöt. Teknisesti saavutettava sivusto voi ajan myötä muuttua vähemmän saavutettavaksi, jos esimerkiksi uusille kuville ei kirjoiteta tekstivastineita tai sisältöeditorissa käytetään otsikkotasoja väärin.

Saavutettavuus ei siis ole vain kertaluonteinen tarkistus, vaan osa verkkosivuston jatkuvaa ylläpitoa.

Tarkista verkkosivustosi saavutettavuus

Epäiletkö, että verkkosivustollasi voi olla saavutettavuusongelmia?

Mediakumpu auttaa tunnistamaan sivuston saavutettavuuteen liittyviä puutteita ja kehittämään verkkosivustoa niin, että sen käyttäminen onnistuu mahdollisimman laajalle käyttäjäjoukolle.

Tutustu Mediakummun saavutettavuuspalveluun tai pyydä tarjous.

Usein kysyttyä verkkosivujen saavutettavuudesta

Mitä verkkosivujen saavutettavuus tarkoittaa?

Verkkosivujen saavutettavuus tarkoittaa sitä, että sivuston sisältöjä ja toimintoja pystyy käyttämään mahdollisimman moni erilaisista toimintakyvyn rajoitteista, päätelaitteista ja käyttötavoista riippumatta.

Mitkä ovat yleisimpiä saavutettavuusvirheitä verkkosivuilla?

Tavallisia ongelmia ovat esimerkiksi liian heikot kontrastit, puuttuvat kuvien tekstivastineet, epälooginen otsikkorakenne, puutteellinen näppäimistökäyttö, epäselvät lomakkeet sekä videoiden puuttuvat tekstitykset.

Voiko verkkosivuston saavutettavuuden tarkistaa automaattisesti?

Automaattisilla työkaluilla voidaan tunnistaa osa saavutettavuusongelmista, mutta ne eivät pysty arvioimaan kaikkea. Siksi kattavaan tarkistukseen tarvitaan myös manuaalista testaamista.

Miksi alt-tekstit ovat tärkeitä?

Tekstivastine auttaa välittämään merkityksellisen kuvan sisällön käyttäjälle, joka ei näe kuvaa. Alt-tekstin tarkoitus riippuu kuvan käyttötarkoituksesta, eikä jokainen koristeellinen kuva tarvitse kuvailevaa tekstivastinetta.

Parantaako saavutettavuus hakukoneoptimointia?

Saavutettavuus ja hakukoneoptimointi ovat eri asioita, mutta niissä on yhteisiä hyviä käytäntöjä. Esimerkiksi looginen sisältörakenne, kuvaavat otsikot, ymmärrettävät linkit ja laadukas HTML-rakenne voivat auttaa sekä käyttäjiä että hakukoneita hahmottamaan sivuston sisältöä.