WCAG 2.1 AA käytännössä: mitä se tarkoittaa sivustolla

Lyhyt vastaus: 50 vaatimusta, jotka tekevät sivustosta kaikille toimivan

WCAG 2.1 AA tarkoittaa, että sivusto täyttää WCAG 2.1 -ohjeiston kaikki A- ja AA-tason onnistumiskriteerit, joita on yhteensä 50. Se on taso, johon Suomen julkisen sektorin saavutettavuusvaatimukset ja eurooppalainen standardi EN 301 549 viittaavat. Käytännössä se tarkoittaa riittävää kontrastia, näppäimistökäyttöä, kuvien tekstivastineita, toimivia lomakkeita, selkeää rakennetta, videoiden tekstitystä ja sitä, että sivu kestää suurennuksen.

Luku kuulostaa isommalta kuin työ on. Osa kriteereistä ei koske tavallista yrityssivustoa lainkaan, koska sivulla ei ole videota, aikarajoja tai monimutkaisia toimintoja. Loput ovat asioita, jotka hyvin tehty sivusto täyttää lähes itsestään.

Saavutettavuuden yleiset perusteet on käyty läpi artikkelissa verkkosivujen saavutettavuudesta. Tässä mennään itse standardiin: mitä se sanoo, mitkä kohdat osuvat tavalliseen sivustoon ja miten ne tarkistetaan.

Mikä WCAG on?

WCAG on verkkosisällön saavutettavuusohjeisto, jota ylläpitää verkon standardeja kehittävä kansainvälinen W3C-yhteisö. Se määrittelee testattavat vaatimukset, joiden avulla voi todeta, onko verkkosisältö saavutettavaa.

Ohjeistosta on useita versioita. Versio 2.0 julkaistiin vuonna 2008, versio 2.1 vuonna 2018 ja versio 2.2 vuonna 2023. Jokainen uusi versio on lisännyt vaatimuksia edellisen päälle, erityisesti mobiilikäyttöön, heikkonäköisyyteen ja kognitiivisiin vaikeuksiin liittyen.

Rakenne on kerroksellinen. Ylimpänä on neljä periaatetta, niiden alla ohjeet ja ohjeiden alla onnistumiskriteerit. Kriteerit ovat se osa, jota testataan: jokainen niistä joko täyttyy tai ei. Lisäksi W3C julkaisee tekniikoita ja selityksiä, jotka neuvovat, miten kriteerin voi täyttää, mutta ne eivät itse ole vaatimuksia.

Neljä periaatetta lyhyesti

Kaikki kriteerit ryhmittyvät neljän periaatteen alle. Havaittava tarkoittaa, että sisällön voi aistia jollain tavalla. Hallittava tarkoittaa, että käyttöliittymää voi käyttää eri tavoin, esimerkiksi näppäimistöllä. Ymmärrettävä tarkoittaa, että sisältö ja toiminta ovat selkeitä. Toimintavarma tarkoittaa, että sisältö toimii erilaisilla selaimilla ja apuvälineillä.

Periaatteet ovat hyödyllinen muistilista suunnittelussa, mutta tarkastuksessa niitä ei käytetä. Tarkastus tehdään kriteeri kerrallaan, koska vain kriteereistä voi sanoa, täyttyvätkö ne.

Mitä tasot A, AA ja AAA tarkoittavat?

Tasot A, AA ja AAA kertovat, kuinka vaativa kriteeri on. A on vähimmäistaso, jonka puuttuminen estää monia käyttämästä sivua kokonaan. AA sisältää kaikki A-tason kriteerit ja lisäksi omansa. AAA on tiukin taso, ja se sisältää kaikki kolme.

WCAG 2.1:ssä kriteereitä on yhteensä 78. A-tasolla niitä on 30, AA-tasolla 20 ja AAA-tasolla 28. AA-tason vaatimustenmukaisuus tarkoittaa siis kaikkia 50 A- ja AA-kriteeriä.

Tasot eivät ole laatuluokkia. A-tason kriteeri ei ole vähemmän tärkeä kuin AA-tason, pikemminkin päinvastoin: A-tason puute estää käytön usein kokonaan, kun AA-tason puute tekee siitä vaikeaa.

Miksi tavoite on juuri AA

AA on taso, johon lainsäädäntö ja standardit viittaavat, ja se on realistinen tavalliselle sivustolle. AAA-taso sisältää vaatimuksia, joita kaikki sisältö ei voi täyttää, kuten viittomakielinen tulkkaus videoihin, erittäin korkea kontrasti ja tekstin luettavuus tietyllä koulutustasolla.

W3C ei itsekään suosittele AAA-tasoa koko sivuston yleiseksi vaatimukseksi, koska osa sisällöstä ei voi sitä täyttää. Yksittäisiä AAA-kriteereitä kannattaa silti käyttää silloin, kun ne sopivat, esimerkiksi selkeämpää kieltä tai suurempia painikkeita.

Tavoite kannattaa kirjata sopimukseen täsmällisesti: mikä versio ja mikä taso. Pelkkä ”sivusto on saavutettava” ei kerro, mitä on luvattu.

WCAG 2.1 vai 2.2?

Uusin versio on 2.2, mutta Suomen julkisen sektorin vaatimukset ja eurooppalainen standardi ovat viitanneet versioon 2.1. Siksi tarjouspyynnöissä puhutaan edelleen 2.1 AA -tasosta. Mitä versiota juuri sinun palveluusi sovelletaan, kannattaa tarkistaa viranomaisen ohjeista, koska viittaukset päivittyvät.

Käytännössä valinta on helppo. Versio 2.2 lisää muutaman kriteerin ja poistaa yhden vanhentuneen, ja W3C:n mukaan version 2.2 täyttävä sisältö täyttää myös aiemmat versiot. Jos rakennat uutta, tavoittele 2.2 AA -tasoa.

Uudet kriteerit ovat käytännöllisiä. Kohdistettu elementti ei saa jäädä kiinteän yläpalkin alle piiloon, painikkeiden pitää olla riittävän suuria, vetämällä tehtävälle toiminnolle pitää olla vaihtoehto, eikä kirjautuminen saa vaatia muistitehtävää ilman helpotusta.

Mitkä AA-vaatimukset koskevat tavallista yrityssivustoa?

Tavallista yrityssivustoa koskevat ennen kaikkea kuvia, värejä, näppäimistökäyttöä, rakennetta, lomakkeita ja suurennusta koskevat kriteerit. Jos sivustolla on videoita, mukaan tulevat tekstitys ja kuvailutulkkaus, ja jos siellä on karuselleja tai animaatioita, liikkeen hallinta.

Seuraava taulukko kokoaa kriteerit, joihin tavallinen sivusto useimmin kompastuu. Nimet ovat tässä kuvaavia eivätkä virallisia käännöksiä.

Taulukko ei ole koko lista. Se on lähtökohta, josta tavallisen sivuston tarkastus kannattaa aloittaa, koska nämä kohdat löytyvät lähes jokaiselta sivulta.

Kuvat ja muu ei-tekstuaalinen sisältö

Jokaisella tietoa välittävällä kuvalla pitää olla tekstivastine, joka kertoo saman asian. Koristekuva merkitään niin, että ruudunlukija ohittaa sen. Kuvalinkin tekstivastine kertoo, mihin linkki vie, ei miltä kuva näyttää.

Kuvana esitetty teksti on oma ongelmansa. Hinnasto, aukioloajat tai tarjous kuvana ei suurene, ei mukaudu kapealle näytölle eikä kuulu ruudunlukijalla. AA-taso edellyttää, että teksti on tekstiä aina kun se on mahdollista. Logo on sallittu poikkeus.

Kaaviot ja infografiikat tarvitsevat pidemmän kuvauksen, esimerkiksi tekstin kaavion alla, joka kertoo, mitä kaavio osoittaa.

Värit ja kontrasti

Tavallisen tekstin kontrastin taustaansa vasten pitää olla vähintään 4,5:1 ja suuren tekstin vähintään 3:1. Painikkeiden reunojen, lomakekenttien rajojen ja merkityksellisten kuvakkeiden kontrastin pitää olla vähintään 3:1.

Väri ei saa olla ainoa tapa välittää tietoa. Jos pakollinen kenttä merkitään vain punaisella tai linkki erottuu tekstistä vain värillä, osa käyttäjistä ei huomaa sitä. Lisää merkintä, alleviivaus tai teksti.

Kontrasti on helpoin kriteeri mitata, koska se on kahden väriarvon suhde. Ilmaiset kontrastityökalut kertovat sen sekunnissa, ja korjaus on usein yksi väriarvo tyylitiedostossa. Kuvan päälle sijoitettu teksti on vaikeampi, koska kontrasti vaihtelee kuvan eri kohdissa.

Näppäimistö ja kohdistus

Kaikki toiminnot pitää voida tehdä näppäimistöllä, ja käyttäjän pitää päästä jokaisesta elementistä myös pois. Kohdistuksen järjestyksen pitää olla looginen, ja kohdistuksen pitää näkyä.

Näkyvä kohdistus on kriteeri, jonka moni sivusto rikkoo tarkoituksella, koska selaimen oletuskehys on poistettu ulkoasun takia. Korjaus on tehdä kohdistukselle oma, sivuston ilmeeseen sopiva tyyli eikä poistaa sitä.

Sivun alussa kannattaa olla linkki, jolla pääsee suoraan sisältöön valikon ohi. Se täyttää A-tason vaatimuksen toistuvien lohkojen ohittamisesta, ja näppäimistön käyttäjälle se säästää kymmeniä painalluksia jokaisella sivulla.

Rakenne, otsikot ja linkit

Otsikoiden, listojen, taulukoiden ja lomakkeiden pitää olla merkitty rakenteena eikä pelkkänä ulkoasuna. Ruudunlukijan käyttäjä liikkuu sivulla otsikosta toiseen, ja jos otsikko on vain lihavoitua tekstiä, sitä ei ole hänelle olemassa.

Jokaisella sivulla on kuvaava otsikko, ja sivun kieli on merkitty. Jos sivulla on kappale toisella kielellä, sekin merkitään, jotta ruudunlukija ääntää sen oikein. Kaksikielisellä sivustolla tämä unohtuu usein.

Linkin tekstin pitää kertoa, mihin linkki vie, joko itse tai lauseensa kanssa. Navigoinnin pitää pysyä samana sivulta toiselle, ja sivuille pitää päästä useammalla kuin yhdellä tavalla, esimerkiksi valikosta, haulla tai sivukartasta.

Lomakkeet

Lomakkeiden kentillä pitää olla näkyvät nimet tai ohjeet, ja virheet pitää kertoa tekstinä. AA-tasolla virheilmoituksen pitää myös ehdottaa korjausta, kun se on mahdollista, esimerkiksi kertomalla, missä muodossa päivämäärä syötetään.

Käyttäjää itseään koskevat kentät, kuten nimi, sähköposti, puhelin ja osoite, merkitään koneluettavasti niin, että selain voi täyttää ne automaattisesti. Se auttaa kaikkia, ja erityisesti niitä, joille kirjoittaminen on hidasta.

Kun lomake tekee oikeudellisesti tai taloudellisesti merkittävän toimenpiteen, kuten tilauksen tai sopimuksen, käyttäjän pitää voida tarkistaa tiedot ennen lähettämistä, perua lähetys tai korjata virheet. Yhteydenottolomakkeen toimivuudesta kerrotaan lisää artikkelissa yhteydenottolomakkeesta, joka toimii.

Suurennus ja kapea näyttö

Tekstin pitää voida suurentaa kaksinkertaiseksi ilman, että sisältöä tai toimintoja katoaa. Lisäksi sisällön pitää toimia 320 CSS-pikselin levyisenä ilman sivuttaisvieritystä, mikä vastaa suunnilleen tavallisen näytön katsomista nelinkertaisella suurennuksella.

Sivu ei saa lukkiutua pysty- tai vaakasuuntaan, ellei se ole toiminnon kannalta välttämätöntä. Kun käyttäjä kasvattaa rivi-, kappale- ja kirjainvälejä omilla asetuksillaan, tekstin pitää pysyä luettavana eikä leikkautua.

Kun kohdistus tai hiiri tuo näkyviin lisäsisältöä, kuten työkaluvihjeen tai alavalikon, käyttäjän pitää voida sulkea se, siirtää hiiri sen päälle ja lukea se rauhassa. Hyvin tehty responsiivinen sivusto täyttää suurimman osan näistä ilman erillistä työtä.

Video, ääni ja liike

Tallennetuissa videoissa pitää olla tekstitys, ja jos olennaista tietoa näkyy vain kuvassa, AA-tasolla tarvitaan kuvailutulkkaus. Suorissa lähetyksissä tarvitaan reaaliaikainen tekstitys. Pelkälle äänelle, kuten podcastille, tarvitaan tekstivastine.

Liikkuva sisältö, joka alkaa itsestään ja kestää yli viisi sekuntia, pitää voida pysäyttää. Tämä koskee erityisesti etusivun karuselleja ja taustavideoita. Sivulla ei saa olla välähtelyä, joka voi laukaista kohtauksen.

Automaattisesti alkava ääni on oma ongelmansa, koska se peittää ruudunlukijan puheen. Jos ääni kestää yli muutaman sekunnin, sen pitää olla pysäytettävissä tai sen voimakkuuden säädettävissä.

Miten tarkistat oman sivustosi?

Tarkista sivusto valitsemalla edustavat sivut, ajamalla automaattinen tarkistus, käymällä sivut läpi näppäimistöllä ja suurennuksella ja kuuntelemalla tärkeimmät ruudunlukijalla. Kirjaa löydökset kriteereittäin, jotta tiedät, mitä korjataan ja mitä selosteeseen kirjoitetaan.

1. Valitse sivut: etusivu, tyypillinen palvelusivu, yhteystiedot, lomake ja jokainen erilainen sivupohja.
2. Aja automaattinen tarkistustyökalu jokaiselle valitulle sivulle.
3. Käy sivut läpi pelkällä näppäimistöllä ja katso, näkyykö kohdistus ja toimiiko kaikki.
4. Suurenna teksti kaksinkertaiseksi ja kavenna ikkuna puhelimen levyiseksi.
5. Kuuntele etusivu ja lomake ruudunlukijalla.
6. Mittaa epäilyttävät värit kontrastityökalulla.
7. Lähetä lomake tahallaan väärin täytettynä ja lue virheilmoitukset.

Automaattiset työkalut löytävät vain osan ongelmista. Ne kertovat puuttuvista tekstivastineista, kontrasteista ja rikkinäisistä otsikkotasoista, mutta eivät siitä, onko tekstivastine järkevä tai toimiiko valikko näppäimistöllä. Loput vaatii ihmisen.

Tarkastuksen voi tehdä itse, ja pienelle sivustolle se riittää hyvin alkuun. Jos palvelu kuuluu lakisääteisten vaatimusten piiriin, ulkopuolinen arvio kannattaa, koska se antaa saavutettavuusselosteelle vahvemman pohjan.

Mitä yleisimmät puutteet ovat?

Yleisimmät puutteet ovat heikko kontrasti, puuttuvat tai hyödyttömät tekstivastineet, poistettu kohdistuksen korostus, lomakekentät ilman nimiä, rikkinäinen otsikkorakenne ja epämääräiset linkkitekstit. Ne toistuvat sivustosta toiseen alasta riippumatta.

• Vaalea harmaa teksti valkoisella taustalla, erityisesti lomakkeiden ohjeteksteissä.
• Tekstivastine tiedostonimenä tai sama teksti jokaisessa kuvassa.
• Kohdistus poistettu tyylitiedostosta, jolloin näppäimistön käyttäjä ei näe, missä on.
• Kentän nimi vain kentän sisällä vihjetekstinä, joka katoaa kirjoitettaessa.
• Otsikkotasot ulkoasun mukaan, jolloin rakenne hyppii ja katkeaa.
• Linkit, joissa lukee ”lue lisää”, eikä niistä selviä, mihin ne vievät.
• Karuselli ilman pysäytystä ja ponnahdusikkuna, jota ei saa suljettua näppäimistöllä.
• Upotettu kartta tai video, johon näppäimistön käyttäjä jää jumiin.

Lähes kaikki näistä korjataan tyylitiedostossa tai sivupohjassa kerran, ja korjaus näkyy koko sivustolla. Siksi ne kannattaa korjata ennen kuin aloitetaan yksittäisten sivujen hienosäätö.

Mitä vaatimustenmukaisuus tarkoittaa

Vaatimustenmukaisuus arvioidaan sivu kerrallaan, ja sivun pitää täyttää kaikki valitun tason kriteerit. Jos sivu on osa prosessia, kuten tilausta tai ajanvarausta, prosessin kaikkien vaiheiden pitää täyttää ne. Yksi saavutettava vaihe ei auta, jos seuraava pysäyttää käyttäjän.

Tästä syystä ulkopuoliset osat, kuten ajanvarausjärjestelmä, maksusivu tai upotettu lomake, kuuluvat arvioon silloin, kun ne ovat osa palveluasi. Kysy niiden toimittajilta, miten ne täyttävät vaatimukset.

Harva sivusto täyttää kaikki kriteerit täydellisesti, ja se on tavallista. Tärkeää on tietää, mitkä kohdat eivät täyty, korjata ne järjestyksessä ja kertoa niistä rehellisesti. Yleiskuvan lakisääteisistä velvoitteista saat artikkelista saavutettavuusvaatimuksista yrityksille.

Yhteenveto

WCAG 2.1 AA tarkoittaa, että sivusto täyttää ohjeiston 50 A- ja AA-tason kriteeriä. Tavallisella yrityssivustolla niistä olennaisimmat koskevat kuvia, kontrastia, näppäimistöä, rakennetta, lomakkeita ja suurennusta, ja ne kaikki voi tarkistaa itse muutamassa tunnissa.

Uutta tehdessä kannattaa tavoitella versiota 2.2, joka kattaa myös aiemmat. Yleisimmät puutteet korjataan sivupohjissa kerran, ja sen jälkeen saavutettavuus pysyy kunnossa, kun uusi sisältö tehdään samoilla säännöillä.