WCAG 2.1 vs. 2.2: mikä muuttui ja miksi sillä on väliä

WCAG 2.2:sta tuli W3C-suositus lokakuussa 2023. Jos sivustosi on auditoitu WCAG 2.1:tä vasten, se saattaa jo epäonnistua kriteereissä, jotka nyt määrittävät lakisääteisen vaatimustenmukaisuuden EU:ssa, Yhdistyneessä kuningaskunnassa ja yhä useammin myös Yhdysvaltain valvontatoimissa. Tämä opas käy läpi jokaisen muutoksen — mitä lisättiin, mitä poistettiin ja mitä kukin kriteeri tarkoittaa käytännössä.

Nopea tausta: mitä WCAG 2.1 toi mukanaan

WCAG 2.1 (julkaistu 2018) laajensi alkuperäistä 2.0-standardia 17 uudella onnistumiskriteerillä, jotka keskittyivät kolmeen aiemmin heikosti huomioituun ryhmään:

Mobiilikäyttäjät — kosketuseleet, näytön suunta, osoittimen tarkkuus
Heikkonäköiset käyttäjät — sisällön uudelleenjuoksutus, ei-tekstuaalinen kontrasti, tekstin välistys
Kognitiiviset ja kielelliset vammat — aikakatkaisut, tilasta kertovat viestit

WCAG 2.2 rakentuu suoraan version 2.1 päälle. Jokainen 2.1:n vaatimus on edelleen voimassa. Kysymys kuuluu: mitä 2.2 lisäsi niiden päälle?

Mitä WCAG 2.2 lisäsi: 9 uutta onnistumiskriteeriä

2.4.11 Kohdistus ei peity (vähimmäisvaatimus) — taso AA

Kun komponentti saa näppäimistökohdistuksen, muu sisältö (kiinteät ylätunnisteet, evästebannerit, chat-vimpaimet) ei saa peittää sitä kokonaan. Ainakin osan kohdistetusta elementistä on jäätävä näkyviin.

Yleinen virhe: kiinteä navigointipalkki peittää kohdistetun lomakekentän, kun käyttäjä siirtyy sarkaimella sivun läpi.

2.4.12 Kohdistus ei peity (parannettu) — taso AAA

Tiukempi versio kriteeristä 2.4.11 — kohdistetun komponentin on oltava kokonaan näkyvissä, ei vain osittain.

2.4.13 Kohdistusilmaisimen ulkoasu — taso AA

Näppäimistökohdistuksen ilmaisimien on täytettävä koko- ja kontrastivaatimukset:

Kohdistusilmaisimen alueen on oltava vähintään yhtä suuri kuin 2 CSS-pikselin levyinen kehä komponentin ympärillä
Kohdistetun ja kohdistamattoman tilan välisen kontrastin on oltava vähintään 3:1

Tämä menee pidemmälle kuin nykyinen kriteeri 2.4.7 (Kohdistus näkyvissä), joka vaati vain, että kohdistusilmaisin ylipäätään on olemassa.

Yleinen virhe: ohut yhden pikselin pisteviivareunus, jonka kontrasti on matala, läpäisee kriteerin 2.4.7 mutta ei kriteeriä 2.4.13.

2.5.7 Vetämisliikkeet — taso AA

Jokainen toiminto, joka edellyttää vetämistä, on voitava tehdä myös yhdellä osoittimella (napautus tai napsautus). Tämä palvelee motorisesti rajoittuneita käyttäjiä, jotka eivät pysty luotettavasti hallitsemaan vetotoimintoja.

Esimerkki: järjestettävän listan on tarjottava vaihtoehto (kuten ylös/alas-painikkeet) käyttäjille, jotka eivät voi vetää kohteita.

2.5.8 Kohteen koko (vähimmäisvaatimus) — taso AA

Vuorovaikutteisten kohteiden (painikkeet, linkit, lomakesäätimet) on oltava vähintään 24×24 CSS-pikseliä — tai niiden ympärillä on oltava riittävästi tilaa viereisiin kohteisiin nähden, jotta koko aktivointialue täyttää kynnysarvon.

Tämä on vähimmäisversio. Parannettu kriteeri (2.5.5, peritty versiosta 2.1 tasolla AAA) suosittaa kokoa 44×44 pikseliä.

Yleisiä virheitä: pelkän kuvakkeen sisältävät painikkeet, sulkukuvakkeet (×) ja tekstilinkit tiiviissä navigointivalikoissa.

3.2.6 Johdonmukainen ohje — taso A

Jos verkkosivusto tarjoaa ohjemekanismin (puhelinnumero, chat-linkki, yhteydenottolomake, UKK-linkki), sen on esiinnyttävä samassa suhteellisessa paikassa kaikilla niillä sivuilla, joilla se on. Kognitiivisesti vammaiset käyttäjät ovat usein riippuvaisia ennakoitavasta sijoittelusta.

3.3.7 Toistuva syöttö — taso A

Tietoa, jonka käyttäjä on jo antanut saman istunnon aikana, ei saa vaatia uudelleen — ellei uudelleensyöttö ole välttämätöntä (esimerkiksi salasanan vahvistuskenttä) tai ellei tieto ole turvallisuuden kannalta arkaluonteista.

Esimerkki: monivaiheisessa kassaprosessissa ei pidä kysyä laskutusosoitetta vaiheessa 3, jos käyttäjä on jo antanut sen vaiheessa 1.

3.3.8 Saavutettava tunnistautuminen (vähimmäisvaatimus) — taso AA

Tunnistautumisvaiheet eivät saa perustua kognitiivisen toiminnan testiin — kohteiden tunnistamiseen, merkkien kirjaamiseen tai pulmien ratkaisemiseen — ellei vaihtoehtoa tarjota tai ellei testi koske käyttäjän itsensä hallitsemaa sisältöä (kuten käyttäjän lataamaa valokuvaa).

Yleisiä virheitä: CAPTCHA-testit, jotka vaativat vääristyneen tekstin tunnistamista ilman äänivaihtoehtoa, tai “napsauta kaikkia kuvia joissa on liikennevaloja” -haasteet.

3.3.9 Saavutettava tunnistautuminen (parannettu) — taso AAA

Parannettu versio poistaa jopa käyttäjän hallitsemaa sisältöä koskevan poikkeuksen. Tunnistautumisprosessissa ei sallita minkäänlaista kognitiivisen toiminnan testiä.

Mitä WCAG 2.2 poisti: 4.1.1 Jäsentäminen

WCAG 2.1 sisälsi kriteerin 4.1.1 Jäsentäminen (taso A), joka edellytti muodollisesti oikeaa HTML:ää — yksilöllisiä elementtien ID-tunnisteita, oikein sisäkkäisiä tageja ja täydellisiä alku- ja lopputagipareja. Nykyselaimista oli tullut niin hyviä korjaamaan virheellistä HTML:ää huomaamatta, että kriteeristä tuli käytännössä mittaamaton.

WCAG 2.2:ssa 4.1.1 Jäsentäminen on merkitty vanhentuneeksi ja se katsotaan aina täytetyksi. Sitä ei tarvitse enää auditoida, vaikka siistin HTML:n kirjoittaminen on edelleen hyvä käytäntö.

Yhteenvetotaulukko

Kriteeri	Taso	Aihe
2.4.11 Kohdistus ei peity (vähimmäisvaatimus)	AA	Näppäimistökohdistus
2.4.12 Kohdistus ei peity (parannettu)	AAA	Näppäimistökohdistus
2.4.13 Kohdistusilmaisimen ulkoasu	AA	Kohdistusilmaisin
2.5.7 Vetämisliikkeet	AA	Osoitinsyöte
2.5.8 Kohteen koko (vähimmäisvaatimus)	AA	Kosketuskohteet
3.2.6 Johdonmukainen ohje	A	Ennakoitavuus
3.3.7 Toistuva syöttö	A	Lomakkeet
3.3.8 Saavutettava tunnistautuminen (vähimmäisvaatimus)	AA	Kirjautuminen / CAPTCHA
3.3.9 Saavutettava tunnistautuminen (parannettu)	AAA	Kirjautuminen / CAPTCHA
~~4.1.1 Jäsentäminen~~	A	Poistettu

Kenen on päivitettävä?

Käytännössä kaikkien. WCAG 2.2 on nyt lähtötaso, johon viittaavat:

Euroopan esteettömyysdirektiivi (EAA), voimassa kesäkuusta 2025
Yhdenmukaistettu standardi EN 301 549 (päivitetty viittaamaan WCAG 2.2:een)
Yhdistyneen kuningaskunnan julkisen sektorin saavutettavuussäädökset (päivitetty ohjeistus)
Monet Yhdysvaltain osavaltiolait ja oikeusministeriön (DOJ) epäviralliset valvontalinjaukset

Jos viimeisin täysi auditointisi tehtiin WCAG 2.1 AA:ta vasten, keskitä päivitystyö näihin viiteen kriteeriin, jotka koskevat useimpia sivustoja: 2.4.11, 2.4.13, 2.5.8, 3.3.8 ja 3.3.7 (jos sinulla on monivaiheisia lomakkeita tai kassaprosesseja).

Miten uudet kriteerit auditoidaan

Useimmat automaattiset skannerit merkitsevät nykyään kriteerin 2.5.8 (kohteen koko) ja osan kriteerin 2.4.13 (kohdistusilmaisimen ulkoasu) tapauksista. Seuraavat vaativat kuitenkin manuaalista testausta:

2.4.11 / 2.4.12 — siirry sarkaimella jokaisen sivun läpi kiinteät ylä- ja alatunnisteet käytössä ja varmista, että kohdistetut elementit näkyvät
2.4.13 — mittaa kohdistusilmaisimen mitat ja kontrasti selaimen kehittäjätyökaluilla tai kontrastintarkistimella
2.5.7 — tunnista jokainen vetotoiminto ja varmista, että pelkällä osoittimella toimiva vaihtoehto on olemassa
3.2.6 — tarkista, että ohjelinkit näkyvät johdonmukaisissa paikoissa eri sivuilla
3.3.7 — käy läpi kaikki monivaiheiset prosessit ja varmista, ettei mitään tietoa kysytä kahdesti
3.3.8 — testaa jokainen kirjautumis-, rekisteröitymis- ja vahvistusvaihe kognitiivisen toiminnan testien varalta

WCAG 2.2 ei ole kokonaisvaltainen uudistus — se on kohdennettu joukko lisäyksiä, jotka puuttuvat todellisiin esteisiin joita versio 2.1 ei huomioinut. Hyvä uutinen on, että useimmat uudet AA-kriteerit voidaan ratkaista kohdennetulla korjaustyöllä ilman koko sivuston uudelleenrakentamista.

Liittyvää luettavaa: Verkkosivusto WCAG 2.2 -yhteensopivaksi · Opas manuaalisiin saavutettavuusauditointeihin