Verkon saavutettavuusopas: WCAG-perusteet
Selitämme WCAGin perusteet, kuten kontrastin, näppäimistönavigoinnin, vaihtoehtoisen tekstin ja lomakkeiden otsikot, esimerkkikoodein ja näytämme, miten testaat sivustosi itse.
Aurora YazılımToimitustiimi
6 min lukuaika
Verkon saavutettavuus tarkoittaa, että kaikki, myös näkö-, kuulo-, liikunta- tai kognitiivisia eroja omaavat henkilöt, voivat havaita, selata ja käyttää sivustoa. Kansainvälinen mittapuu ovat W3C:n WCAG-ohjeet; riittävä värikontrasti, täysi käytettävyys pelkällä näppäimistöllä, kuvien vaihtoehtoiset tekstit ja otsikoidut lomakkeet ovat perusvaatimukset. Nämä periaatteet vahvistavat sekä käyttökokemusta että hakunäkyvyyttä.
Kenelle saavutettavuus on tarkoitettu?
Saavutettavuus yhdistetään usein vain näkövammaisiin käyttäjiin. Todellisuudessa kohderyhmä on paljon laajempi: värisokeat, ne joilla käsi on murtunut eivätkä voi käyttää hiirtä, ikääntyneet käyttäjät, meluisassa ympäristössä videota äänettömänä katsovat ja kaikki, jotka katsovat puhelimen näyttöä auringossa.
Siksi saavutettava verkkosuunnittelu ei ole pienelle yleisölle tehty lisätyö vaan parempi kokemus kaikille. Selkeät otsikot, luettava teksti ja ennakoitava navigointi helpottavat myös käyttäjiä, joilla ei ole rajoitteita.
Saavutettavuus tukee myös hakukonenäkyvyyttä. Oikea otsikkohierarkia, kuvaavat linkkitekstit ja kuvien kuvaukset ovat suurelta osin samoja asioita, jotka auttavat hakukoneita ymmärtämään sivun.
Mikä WCAG on?
WCAG (Web Content Accessibility Guidelines) on W3C:n laatima verkkosisällön saavutettavuusohjeisto. Ohjeet koostuvat testattavista onnistumiskriteereistä, ja ne jaetaan kolmeen vaatimustasoon: A, AA ja AAA. Useimpien organisaatioiden ja säädösten tavoite on AA-taso.
WCAG perustuu neljään perusperiaatteeseen. Jokainen kriteeri liittyy johonkin näistä periaatteista; periaatteiden ymmärtäminen on hyödyllisempää kuin yksittäisten kriteerien ulkoa opettelu. Virallisen tekstin löydät sivulta W3C WAI.
| Periaate | Merkitys | Esimerkki |
|---|---|---|
| Havaittava | Tiedon pitää olla vastaanotettavissa vähintään yhdellä aistilla | Kuvissa vaihtoehtoinen teksti, videossa tekstitys |
| Käytettävä | Käyttöliittymää pitää voida käyttää eri tavoin | Täysi navigointi näppäimistöllä, riittävä aika |
| Ymmärrettävä | Sisällön ja toiminnan pitää olla ennakoitavaa | Selkeät virheilmoitukset, johdonmukainen valikko |
| Vankka | Yhteensopiva apuvälineteknologioiden kanssa | Oikea HTML, kelvollinen merkintä |
Värikontrasti ja luettavuus
AA-tasolla tavallisen tekstin ja taustan välillä tarvitaan vähintään 4,5:1 kontrasti. Suurissa teksteissä, eli noin 24 pikselin ja sitä suuremmissa tai lihavoiduissa 18,5 pikselin ja sitä suuremmissa teksteissä, suhde laskee arvoon 3:1. Myös käyttöliittymäkomponenteille kuten lomakkeen reunoille ja kuvakkeille odotetaan suhdetta 3:1.
Kontrastin lisäksi on yksi sääntö lisää: älä anna tietoa pelkällä värillä. Pakollisten kenttien erottaminen vain punaisella tähdellä tai linkkien erottaminen vain värillä jättää värisokeat käyttäjät ulkopuolelle. Käytä linkeissä alleviivausta ja virheissä selittävää tekstiä.
Tekstin koko on myös osa luettavuutta. Kun käyttäjä suurentaa tekstin selaimessa 200 prosenttiin, sisältö ei saa kadota eikä sivu rikkoutua.
Näppäimistönavigointi
Käyttäjät, jotka eivät voi käyttää hiirtä tai jotka navigoivat ruudunlukijalla, etenevät sivustolla Tab-, Shift+Tab-, Enter- ja nuolinäppäimillä. Siksi valikoiden, painikkeiden, lomakkeiden ja ponnahdusikkunoiden pitää olla täysin käytettävissä pelkällä näppäimistöllä.
- Näkyvä kohdistus: kohdistuksen saanut elementti on esitettävä selkeällä kehyksellä; älä poista kohdistusviivaa kokonaan CSS:llä.
- Looginen järjestys: Tab-järjestyksen tulee noudattaa visuaalista järjestystä.
- Siirry sisältöön -linkki: sivun alussa oleva piilotettu linkki, joka ohittaa valikon ja siirtää pääsisältöön.
- Ei ansoja: avautuvasta ikkunasta pitää päästä pois Esc-näppäimellä tai näppäimistöllä.
- Oikeat painikkeet: napsautettaville elementeille button- ja a-tagit div:n sijaan.
<a class="atla" href="#icerik">Siirry sisältöön</a>
<header>...</header>
<main id="icerik">...</main>Vaihtoehtoinen teksti ja kuvat
Ruudunlukijat eivät näe kuvia; ne lukevat sen sijaan alt-attribuutin tekstin. Vaihtoehtoisen tekstin pitää kuvata lyhyesti kuvan tehtävä sivulla. Tuotekuvalle riittää tuotteen nimi ja erottava ominaisuus; jos kuvassa on tekstiä, se teksti tulee kirjoittaa myös vaihtoehtoiseen tekstiin.
Pelkästään koristeellisille kuville käytetään tyhjää alt-arvoa; näin ruudunlukija ohittaa ne. Jos linkki tai painike koostuu vain kuvakkeesta, kuvakkeen tehtävä pitää ilmaista tekstillä.
<img src="zeytinyagi.webp" alt="Kylmäpuristettu oliiviöljy 500 ml:n lasipullossa">
<img src="dalga-deseni.svg" alt="">
<button aria-label="Avaa valikko">
<svg aria-hidden="true">...</svg>
</button>Lomakkeet ja ruudunlukijayhteensopivuus
Lomakkeet ovat paikka, jossa saavutettavuusongelmia esiintyy eniten. Jokaisella kentällä pitää olla näkyvä ja koodiin sidottu lomakkeen otsikko. Pelkkä laatikon sisään kirjoitettu paikkamerkkiteksti ei korvaa otsikkoa, koska se katoaa kirjoittamisen alkaessa. Jos yrityksen kotisivujen tarjouslomaketta tai kaupan maksuvaihetta ei voi suorittaa näppäimistöllä ja ruudunlukijalla, kyseinen käyttäjä ei voi muuttua asiakkaaksi.
Ruudunlukijayhteensopivuutta varten virheilmoitukset pitää yhdistää asianomaiseen kenttään ja niiden tulee kertoa selkeästi, mitä pitää tehdä: ”Virheellinen syöte” sijaan esimerkiksi ”Puhelinnumeron pitää olla 10-numeroinen”. Sivun kieli pitää ilmoittaa html-tagin lang-attribuutilla (suomeksi fi); muuten ruudunlukija lukee tekstin väärän kielen säännöillä.
<html lang="tr">
...
<label for="tel">Telefon</label>
<input id="tel" type="tel" autocomplete="tel"
aria-describedby="tel-hata" aria-invalid="true">
<p id="tel-hata">Puhelinnumeron on oltava 10-numeroinen.</p>Milloin ARIAa kannattaa käyttää?
ARIA-attribuutit on tarkoitettu tilanteisiin, joita HTML ei kata. Ensimmäinen sääntö on tämä: jos sisäänrakennettu HTML-elementti hoitaa homman, käytä sitä. Väärin käytetty ARIA voi aiheuttaa enemmän ongelmia kuin sen käyttämättä jättäminen.
Mobiili- ja kosketussaavutettavuus
Puhelimessa saavutettavuus tuo mukanaan lisäkysymyksiä. WCAG 2.2 edellyttää AA-tasolla kosketuskohteilta vähintään 24×24 CSS-pikseliä; mukavaan käyttöön suositaan suurempia kohteita. Vierekkäin ahdetut pienet linkit aiheuttavat virhenapautuksia.
Näytön suuntaa ei saa lukita, ja sisällön pitää toimia sekä pysty- että vaakanäkymässä. Zoomauksen estäviä asetuksia ei saa käyttää. Muista mobiilissa huomioitavista asioista voit lukea artikkelistamme mobiiliystävälliset verkkosivut ja sivultamme mobiiliystävällinen suunnittelu.
Yleisimmät virheet
Tarkastelemissamme sivustoissa saavutettavuusongelmat kasautuvat useimmiten samoihin muutamaan kohtaan. Hyvä uutinen on, että suurin osa niistä voidaan korjata pienillä koodimuutoksilla ja käyttäjät huomaavat parannuksen heti.
- Vaaleanharmaa teksti vaaleanharmaalla pohjalla eli riittämätön kontrasti.
- Tuotekuvat, joiden vaihtoehtoinen teksti on jätetty tyhjäksi tai täytetty tiedostonimellä.
- Linkkitekstit kuten ”Klikkaa tästä” tai ”lue lisää”, jotka eivät kerro asiayhteyttä.
- Otsikkotasojen valinta ulkonäön mukaan; hyppääminen suoraan H1:stä H4:ään.
- Valikot, jotka eivät aukea näppäimistöllä, ja ponnahdusikkunat, joita ei voi sulkea.
- Itsestään käynnistyvät, pysäyttämättömät diaesitykset ja ääntä sisältävät videot.
- Kohdistusviivan piilottaminen kokonaan ulkoasusyistä.
Miten testaat sivustosi?
Automaattiset työkalut löytävät osan ongelmista, mutta eivät kaikkia. Paras tulos syntyy yhdistämällä työkalut käsin tehtäviin lyhyisiin testeihin. Tämä tarkistus on luonnollinen osa hyvää UI/UX-suunnittelun prosessia; näiden kahden käsitteen eron olemme käsitelleet artikkelissa UI- ja UX-suunnittelun ero.
- Päästä hiiri irti ja käytä sivua vain Tab- ja Enter-näppäimillä.
- Tee saavutettavuusraportti Chromen kehittäjätyökalujen Lighthousella.
- Kuuntele muutama sivu ilmaisella NVDA:lla (Windows) tai sisäänrakennetulla VoiceOverilla (macOS, iOS).
- Suurenna teksti selaimessa 200 prosenttiin ja katso, rikkoutuuko sivu.
- Sulje kuvat ja tarkista, onko sivu edelleen ymmärrettävä.
Usein kysytyt kysymykset
01Auttaako saavutettavuus SEO:ta?
Vaikka sitä ei pidetä suoraan sijoitussignaalina, oikea otsikkorakenne, vaihtoehtoinen teksti ja merkitykselliset linkkitekstit auttavat hakukoneita ymmärtämään sivun. Siksi saavutettavuus ja hakukoneystävälliset verkkosivut perustuvat suurelta osin samaan pohjaan.
02Riittääkö saavutettavuuslisäosa tai työkalupalkki?
Sivun päälle lisättävät työkalupalkit eivät ratkaise koodin perusongelmia. Otsikoimaton lomake tai näppäimistöllä avautumaton valikko on korjattava lähteessään.
03Onko olemassa olevan sivuston mahdollista tehdä saavutettava?
Kyllä. Korjaukset kuten kontrasti, vaihtoehtoinen teksti ja lomakkeiden otsikot voi yleensä tehdä olemassa olevaan rakenteeseen. Perusongelmat kuten näppäimistönavigointi ja valikkorakenne vaativat joskus suunnittelun uudelleenarviointia.
04Onko laillista velvoitetta?
Joissakin maissa ja tietyillä toimialoilla saavutettavuus on lakisääteinen vaatimus; asia on yhä tärkeämpi erityisesti Euroopan markkinoita palveleville yrityksille. Tarkista oma tilanteesi ajantasaisesta lainsäädännöstä ja lakimieheltäsi.
Saavutettavuus ei ole kerran tehtävä ja unohdettava asia vaan laatukriteeri, jota noudatetaan suunnittelun ja sisällön jokaisessa vaiheessa. Arvioidaksesi sivustoasi WCAG-perusteiden mukaan tutustu UI/UX-suunnittelu-palveluumme; yrityssivuston muista osista lue artikkelimme mikä on yrityksen kotisivut. Edremitissä, Turkissa toimiva Aurora Yazılım on kehittänyt vuodesta 2006 lähtien kaikkien käytettävissä olevia verkkosivujen suunnittelun projekteja.
