WCAG 2.2 -tarkistuslista: Kaikki 86 onnistumiskriteeriä selitettynä

Tämä tarkistuslista kattaa jokaisen WCAG 2.2:n onnistumiskriteerin, järjestettynä neljän POUR-periaatteen ja kolmentoista ohjeen mukaan. Jokainen kriteeri sisältää vaatimustenmukaisuustason, käytännöllisen selityksen ja ohjeistuksen siitä, mitä se tarkoittaa käytännössä.

Periaate 1: Havaittava

Tiedon ja käyttöliittymäkomponenttien on oltava esitettävissä käyttäjille tavoilla, jotka he voivat havaita.

Ohje 1.1: Tekstivaihtoehdot

1.1.1 Ei-tekstuaalinen sisältö (Taso A) — Kaikella käyttäjälle esitetyllä ei-tekstuaalisella sisällöllä on tekstivaihtoehto, joka palvelee vastaavaa tarkoitusta. Tämä sisältää kuvat, kuvakkeet, kaaviot, äänen, videon, animaatiot, CAPTCHAt ja koristeeelliset elementit. Informatiiviset kuvat tarvitsevat kuvaavan alt-tekstin. Toiminnalliset kuvat tarvitsevat toimintoa kuvaavan alt-tekstin. Koristekuvat tarvitsevat tyhjän alt-tekstin. Monimutkaiset kuvat tarvitsevat yksityiskohtaiset tekstikuvaukset.

Ohje 1.2: Aikaperusteinen media

1.2.1 Pelkkä ääni ja pelkkä video – Tallennettu (Taso A) — Tarjoa tekstivastine tallennetulle pelkälle äänisisällölle ja joko tekstivastine tai äänikuvaus tallennetulle pelkälle videosisällölle.

1.2.2 Tekstitys – Tallennettu (Taso A) — Tarjoa synkronoitu tekstitys kaikelle tallennetulle videosisällölle, jossa on ääntä.

1.2.3 Äänikuvaus tai mediavaihtoehto – Tallennettu (Taso A) — Tarjoa äänikuvaus tai täydellinen tekstivaihtoehto tallennetulle videosisällölle.

1.2.4 Tekstitys – Suora lähetys (Taso AA) — Tarjoa reaaliaikainen tekstitys kaikelle suoralle äänisisällölle videossa.

1.2.5 Äänikuvaus – Tallennettu (Taso AA) — Tarjoa äänikuvaukset kaikelle tallennetulle videosisällölle, jossa tärkeää visuaalista tietoa ei jo välitetä äänessä.

Ohje 1.3: Mukautettava

1.3.1 Tieto ja suhteet (Taso A) — Esityksen kautta välitetyt tiedot, rakenne ja suhteet ovat ohjelmallisesti määritettävissä tai saatavilla tekstinä. Käytä asianmukaista otsikkomerkintää, listamerkintää, taulukkomerkintää, lomaketunnisteita ja maamerkkejä välittääksesi visuaalisesti havaittavan rakenteen.

1.3.2 Merkityksellinen järjestys (Taso A) — Kun sisällön esitysjärjestys vaikuttaa sen merkitykseen, oikea lukujärjestys on ohjelmallisesti määritettävissä. DOM-järjestyksen tulisi vastata visuaalista järjestystä.

1.3.3 Aistinvaraiset ominaisuudet (Taso A) — Ohjeet sisällön ymmärtämiseksi ja käyttämiseksi eivät perustu pelkästään aistinvaraisiin ominaisuuksiin kuten muotoon, väriin, kokoon, visuaaliseen sijaintiin, suuntaukseen tai ääneen.

1.3.4 Suuntaus (Taso AA) — Sisältö ei rajoita näkymää tai käyttöä yhteen näytön suuntaukseen, ellei tietty suuntaus ole välttämätön.

1.3.5 Syötteen tarkoituksen tunnistaminen (Taso AA) — Käyttäjätietoja keräävien lomakekenttien tarkoitus on ohjelmallisesti määritettävissä autocomplete-attribuutin avulla.

Ohje 1.4: Erotettava

1.4.1 Värin käyttö (Taso A) — Väriä ei käytetä ainoana visuaalisena keinona tiedon välittämiseen, toiminnan osoittamiseen, vastauksen pyytämiseen tai visuaalisen elementin erottamiseen.

1.4.2 Äänenhallinta (Taso A) — Jos ääni toistetaan automaattisesti yli kolmen sekunnin ajan, tarjoa mekanismi äänenvoimakkuuden tauottamiseen, pysäyttämiseen tai itsenäiseen säätämiseen.

1.4.3 Kontrasti – Vähimmäistaso (Taso AA) — Tekstin ja tekstikuvien kontrastisuhde on vähintään 4,5:1, lukuun ottamatta suurta tekstiä (3:1), satunnaista tekstiä ja logotyyppejä.

1.4.4 Tekstin koon muuttaminen (Taso AA) — Tekstin kokoa voidaan muuttaa jopa 200 % ilman sisällön tai toiminnallisuuden menetystä.

1.4.5 Tekstikuvat (Taso AA) — Tiedon välittämiseen käytetään tekstiä tekstikuvien sijaan, paitsi kun tietty visuaalinen esitys on välttämätön.

1.4.10 Uudelleenjuoksutus (Taso AA) — Sisältö voidaan esittää ilman tiedon tai toiminnallisuuden menetystä ja ilman kahteen suuntaan vierittämistä 320 CSS-pikselin leveydellä pystysisällölle ja 256 CSS-pikselin korkeudella vaakasisällölle.

1.4.11 Ei-tekstuaalinen kontrasti (Taso AA) — Käyttöliittymäkomponenttien ja merkityksellisten graafisten kohteiden kontrastisuhde viereisiä värejä vasten on vähintään 3:1.

1.4.12 Tekstin välistys (Taso AA) — Sisältöä tai toiminnallisuutta ei menetä, kun käyttäjät säätävät rivivälin 1,5-kertaiseksi fonttikokoon nähden, kappalevälin 2-kertaiseksi, kirjainvälin 0,12-kertaiseksi ja sanavälin 0,16-kertaiseksi.

1.4.13 Sisältö osoittimen tai fokuksen päällä (Taso AA) — Kun osoittimen siirtyminen tai näppäimistöfokuksen saaminen laukaisee lisäsisällön ilmestymisen ja katoamisen, kyseinen sisältö on hylättävissä, osoitettavissa ja pysyvä.

Periaate 2: Hallittava

Käyttöliittymäkomponenttien ja navigaation on oltava hallittavissa.

Ohje 2.1: Näppäimistöllä käytettävissä

2.1.1 Näppäimistö (Taso A) — Kaikki toiminnallisuus on käytettävissä näppäimistöliittymän kautta ilman erityisiä ajoitusvaatimuksia.

2.1.2 Ei näppäimistöansaa (Taso A) — Jos näppäimistöfokus voidaan siirtää komponenttiin, fokus voidaan myös siirtää pois pelkällä näppäimistöllä.

2.1.4 Merkkipohjaiset pikanäppäimet (Taso A) — Jos pikanäppäin käyttää vain kirjaimia, välimerkkejä, numeroita tai symboleja, pikanäppäin voidaan poistaa käytöstä, uudelleenmääritellä tai aktivoida vain kun kyseisellä komponentilla on fokus.

Ohje 2.2: Riittävästi aikaa

2.2.1 Ajan säädettävyys (Taso A) — Kaikille sisällön asettamille aikarajoille käyttäjä voi poistaa aikarajan käytöstä, säätää sitä tai jatkaa sitä.

2.2.2 Tauota, pysäytä, piilota (Taso A) — Automaattisesti alkavalle liikkuvalle, vilkkuvalle, vierityvälle tai automaattisesti päivittyvälle sisällölle, joka kestää yli viisi sekuntia, käyttäjät voivat tauottaa, pysäyttää tai piilottaa sen.

Ohje 2.3: Kohtaukset ja fyysiset reaktiot

2.3.1 Kolme välähdystä tai alle kynnysarvon (Taso A) — Mikään sivulla ei välähdä enempää kuin kolme kertaa minkään yhden sekunnin aikana.

Ohje 2.4: Navigoitava

2.4.1 Lohkojen ohittaminen (Taso A) — Toistuvien sisältölohkojen ohittamiseen on käytettävissä mekanismi, kuten ohitusnavigointilinkit.

2.4.2 Sivun otsikko (Taso A) — Verkkosivuilla on otsikot, jotka kuvaavat niiden aihetta tai tarkoitusta.

2.4.3 Fokusjärjestys (Taso A) — Fokusoitavat komponentit saavat fokuksen järjestyksessä, joka säilyttää merkityksen ja käytettävyyden.

2.4.4 Linkin tarkoitus – kontekstissa (Taso A) — Jokaisen linkin tarkoitus voidaan määrittää pelkästä linkkitekstistä tai sen kontekstista.

2.4.5 Useita tapoja (Taso AA) — Sivun löytämiseen sivujoukosta on käytettävissä useampi kuin yksi tapa.

2.4.6 Otsikot ja tunnisteet (Taso AA) — Otsikot ja tunnisteet kuvaavat aiheensa tai tarkoituksensa.

2.4.7 Näkyvä fokus (Taso A) — Jokaisella näppäimistöllä käytettävällä käyttöliittymällä on näkyvä fokusindikaattori.

2.4.11 Fokus ei ole peitetty – vähimmäistaso (Taso AA) — Kun komponentti saa näppäimistöfokuksen, se ei ole kokonaan tekijän luoman sisällön peittämä. (Uusi WCAG 2.2:ssa)

2.4.12 Fokus ei ole peitetty – parannettu (Taso AAA) — Kun komponentti saa näppäimistöfokuksen, mikään osa fokusindikaattorista ei ole tekijän luoman sisällön peittämä. (Uusi WCAG 2.2:ssa)

2.4.13 Fokuksen ulkoasu (Taso AAA) — Fokusindikaattoreilla on riittävä koko (vähintään 2 pikselin kehys) ja kontrasti (vähintään 3:1 fokusoitujen ja fokusoimattomien tilojen välillä). (Uusi WCAG 2.2:ssa)

Ohje 2.5: Syöttötavat

2.5.1 Osoitineleet (Taso A) — Kaikki monipiste- tai polkuperusteisia eleitä käyttävä toiminnallisuus on käytettävissä yhdellä osoittimella ilman polkuperusteista elettä.

2.5.2 Osoittimen peruutus (Taso A) — Yhden osoittimen toiminnallisuudessa toiminto laukeaa ylöspäin-tapahtumalla ja se voidaan peruuttaa tai kumota.

2.5.3 Tunniste nimessä (Taso A) — Tekstimerkkejä sisältävien komponenttien saavutettava nimi sisältää visuaalisesti esitetyn tekstin.

2.5.4 Liiketoiminto (Taso A) — Laitteen tai käyttäjän liikkeellä laukaistava toiminnallisuus on myös käytettävissä käyttöliittymäkomponentin kautta, ja liikkeellä laukaiseminen voidaan poistaa käytöstä.

2.5.7 Vetämisliikkeet (Taso AA) — Kaikki vetämistä käyttävä toiminnallisuus on saavutettavissa myös yhdellä osoittimella ilman vetämistä. (Uusi WCAG 2.2:ssa)

2.5.8 Kohdekoko – vähimmäistaso (Taso AA) — Vuorovaikutteiset kohteet ovat vähintään 24 x 24 CSS-pikseliä, poikkeuksilla rivinsisäisille kohteille, käyttäjäagentin hallitsemille kohteille ja riittävästi välistetyille kohteille. (Uusi WCAG 2.2:ssa)

Periaate 3: Ymmärrettävä

Tiedon ja käyttöliittymän toiminnan on oltava ymmärrettäviä.

Ohje 3.1: Luettava

3.1.1 Sivun kieli (Taso A) — Jokaisen verkkosivun oletuskieli on ohjelmallisesti määritettävissä lang-attribuutin kautta.

3.1.2 Osien kieli (Taso AA) — Jokaisen tekstikappaleen tai lauseen kieli on ohjelmallisesti määritettävissä, lukuun ottamatta erisnimiä ja teknisiä termejä.

Ohje 3.2: Ennakoitava

3.2.1 Fokuksen yhteydessä (Taso A) — Kun komponentti saa fokuksen, se ei käynnistä kontekstin muutosta.

3.2.2 Syötön yhteydessä (Taso A) — Komponentin asetuksen muuttaminen ei automaattisesti aiheuta kontekstin muutosta, ellei käyttäjää ole varoitettu etukäteen.

3.2.3 Johdonmukainen navigaatio (Taso AA) — Useilla sivuilla toistuvat navigaatiomekanismit esiintyvät samassa suhteellisessa järjestyksessä joka kerta.

3.2.6 Johdonmukainen apu (Taso A) — Jos apumekanismit esiintyvät useilla sivuilla, ne esiintyvät samassa suhteellisessa järjestyksessä. (Uusi WCAG 2.2:ssa)

Ohje 3.3: Syöttötuki

3.3.1 Virheiden tunnistaminen (Taso A) — Jos syöttövirhe havaitaan automaattisesti, virheellinen kohde tunnistetaan ja virhe kuvataan tekstinä.

3.3.2 Tunnisteet tai ohjeet (Taso A) — Tunnisteet tai ohjeet annetaan, kun sisältö vaatii käyttäjän syötettä.

3.3.3 Virheiden korjausehdotukset (Taso AA) — Jos syöttövirhe havaitaan ja korjausehdotuksia tiedetään, ne annetaan käyttäjälle.

3.3.4 Virheiden estäminen – Oikeudellinen, taloudellinen, tiedot (Taso AA) — Sivuilla, jotka aiheuttavat oikeudellisia sitoumuksia, rahoitustapahtumia tai tietojen muutoksia, lähetykset ovat peruutettavissa, tarkistettavissa tai vahvistettavissa.

3.3.7 Toistuva syöttö (Taso A) — Aiemmin samassa prosessissa syötetty tieto täytetään automaattisesti tai on valittavissa. (Uusi WCAG 2.2:ssa)

3.3.8 Saavutettava todennus – vähimmäistaso (Taso AA) — Todennuksessa ei vaadita kognitiivista toimintatestiä, ellei vaihtoehtoja tai apumekanismeja tarjota. Esineen tunnistustestit ovat sallittuja. (Uusi WCAG 2.2:ssa)

3.3.9 Saavutettava todennus – parannettu (Taso AAA) — Sama kuin 3.3.8 mutta ilman esineen tunnistuspoikkeusta. (Uusi WCAG 2.2:ssa)

Periaate 4: Lujatekoinen

Sisällön on oltava riittävän lujatekoista, jotta monet erilaiset käyttäjäagentit voivat tulkita sen luotettavasti.

Ohje 4.1: Yhteensopiva

4.1.2 Nimi, rooli, arvo (Taso A) — Kaikille käyttöliittymäkomponenteille nimi ja rooli voidaan määrittää ohjelmallisesti, tilat ja ominaisuudet voidaan asettaa ja muutokset ovat avustavien teknologioiden saatavilla.

4.1.3 Tilailmoitukset (Taso AA) — Tilailmoitukset voidaan määrittää ohjelmallisesti roolin tai ominaisuuksien kautta, jotta avustavat teknologiat esittävät ne käyttäjälle ilman fokuksen saamista.

Huomautus: SC 4.1.1 Jäsennys on poistettu WCAG 2.2:sta vanhentuneena.

Tason AAA kriteerit (lisäkriteerit)

Seuraavia tason AAA kriteereitä ei ole lueteltu edellä, mutta ne ovat osa WCAG 2.2:ta. Ne edustavat korkeinta saavutettavuustasoa ja niitä suositellaan mahdollisuuksien mukaan:

1.2.6 Viittomakieli – Tallennettu (AAA) — Viittomakielitulkkaus tarjotaan kaikelle tallennetulle äänisisällölle.

1.2.7 Laajennettu äänikuvaus (AAA) — Laajennetut äänikuvaukset tarjotaan, kun äänessä olevat tauot eivät riitä tavalliselle äänikuvaukselle.

1.2.8 Mediavaihtoehto – Tallennettu (AAA) — Täydellinen tekstivaihtoehto tarjotaan kaikelle tallennetulle synkronoidulle medialle ja pelkälle videosisällölle.

1.2.9 Pelkkä ääni – Suora lähetys (AAA) — Tekstivaihtoehto tarjotaan suoralle pelkälle äänisisällölle.

1.3.6 Tarkoituksen tunnistaminen (AAA) — Käyttöliittymäkomponenttien, kuvakkeiden ja alueiden tarkoitus voidaan määrittää ohjelmallisesti.

1.4.6 Kontrasti – Parannettu (AAA) — Tekstin kontrastisuhde on vähintään 7:1 normaalille tekstille ja 4,5:1 suurelle tekstille.

1.4.7 Matala tai ei taustaääntä (AAA) — Tallennetussa pelkässä äänisisällössä, joka sisältää pääasiassa puhetta, on matala tai ei lainkaan taustamelua.

1.4.8 Visuaalinen esitys (AAA) — Tekstilohkot tarjoavat visuaalista mukautusta, mukaan lukien etualan/taustan värit, leveys, riviväli ja tasaus.

1.4.9 Tekstikuvat – Ei poikkeusta (AAA) — Tekstikuvia käytetään vain puhtaaseen koristeluun tai kun se on välttämätöntä.

2.1.3 Näppäimistö – Ei poikkeusta (AAA) — Kaikki toiminnallisuus on käytettävissä näppäimistöllä ilman poikkeuksia.

2.2.3 Ei ajoitusta (AAA) — Ajoitus ei ole tapahtuman tai toiminnan olennainen osa, lukuun ottamatta reaaliaikaista ja synkronoitua mediaa.

2.2.4 Keskeytykset (AAA) — Käyttäjä voi siirtää keskeytyksiä myöhemmäksi tai estää ne.

2.2.5 Uudelleentodennus (AAA) — Kun todennettu istunto päättyy, käyttäjä voi jatkaa uudelleentodennuksen jälkeen menettämättä tietoja.

2.2.6 Aikakatkaisut (AAA) — Käyttäjiä varoitetaan toimimattomuuden aikakatkaisuista, jotka voivat aiheuttaa tietojen menetystä, ellei tietoja säilytetä vähintään 20 tuntia.

2.3.2 Kolme välähdystä (AAA) — Mikään sivulla ei välähdä enempää kuin kolme kertaa sekunnissa, ilman poikkeuksia.

2.3.3 Vuorovaikutuksen laukaisema animaatio (AAA) — Vuorovaikutuksen laukaisema liikeanimaatio voidaan poistaa käytöstä, ellei se ole välttämätöntä.

2.4.8 Sijainti (AAA) — Tieto käyttäjän sijainnista sivujoukossa on saatavilla (esim. murupolku).

2.4.9 Linkin tarkoitus – Pelkkä linkki (AAA) — Jokaisen linkin tarkoitus voidaan määrittää pelkästä linkkitekstistä.

2.4.10 Osion otsikot (AAA) — Osion otsikoita käytetään sisällön järjestämiseen.

2.5.5 Kohdekoko – Parannettu (AAA) — Vuorovaikutteiset kohteet ovat vähintään 44 x 44 CSS-pikseliä.

2.5.6 Samanaikaiset syöttötavat (AAA) — Sisältö ei rajoita alustan käytettävissä olevien syöttötapojen käyttöä.

3.1.3 Epätavalliset sanat (AAA) — Mekanismi epätavallisella tavalla käytettyjen sanojen tai lauseiden tarkkojen määritelmien tunnistamiseen on käytettävissä.

3.1.4 Lyhenteet (AAA) — Mekanismi lyhenteiden laajennetun muodon tunnistamiseen on käytettävissä.

3.1.5 Lukutaso (AAA) — Kun teksti vaatii yläkoulutasoa korkeampaa lukutaitoa, tarjotaan täydentävää sisältöä tai vaihtoehtoinen versio.

3.1.6 Ääntäminen (AAA) — Mekanismi sanojen ääntämisen tunnistamiseen on käytettävissä, kun merkitys on epäselvä ilman ääntämistä.

3.2.4 Johdonmukainen tunnistaminen (AA) — Samalla toiminnallisuudella varustetut komponentit sivujoukossa tunnistetaan johdonmukaisesti.

3.2.5 Muutos pyynnöstä (AAA) — Kontekstin muutokset käynnistetään vain käyttäjän pyynnöstä tai mekanismi tällaisten muutosten poistamiseksi käytöstä on käytettävissä.

3.3.5 Ohje (AAA) — Kontekstisidonnainen ohje on saatavilla.

3.3.6 Virheiden estäminen – Kaikki (AAA) — Kaikilla käyttäjän syötettä vaativilla sivuilla lähetykset ovat peruutettavissa, tarkistettavissa tai vahvistettavissa.