Saavutettavuus verkkokaupassa: WCAG 2.2 AA -tarkistuslista

WCAG 2.2 AA -tarkistuslista Shopify- ja WooCommerce-kauppaan sivutyypeittäin: alt-teksti, kontrasti, nimiöt, näppäimistö, fokus, kohdekoko, uudet kriteerit.

FixReportsin toimitusLukuaika 8 min

Verkkokaupan WCAG 2.2 AA -tarkistuslista alkaa virheistä, joita löytyy useimmista verkkokauppojen sivupohjista: puuttuvat alt-tekstit, heikkokontrastinen teksti, linkit ja painikkeet ilman saavutettavaa nimeä, lomakekentät ilman nimiötä, näppäimistöansat ja näkymätön fokus. WCAG 2.2 lisää näiden päälle AA-tason tarkistuksia, jotka osuvat verkkokauppoihin erityisen kovaa: kiinteiden palkkien alle piiloutuvat fokuksessa olevat elementit (2.4.11), alle 24 × 24 CSS-pikselin kosketuskohteet (2.5.8) ja kirjautumiset, joissa käyttäjän on muistettava tai kirjoitettava jotain uudelleen (3.3.8). Testaa jokainen sivutyyppi (etusivu, kokoelma, tuote, ostoskori) näppäimistöllä ja automaattisella tarkistustyökalulla ja korjaa sitten teeman sivupohjat, jotta korjaus periytyy jokaiselle sivulle.

Tärkeimmät kohdat

  • WCAG 2.2:sta tuli W3C:n suositus 5.10.2023. Nykyinen versio on päivätty 12.12.2024, ja se on hyväksytty standardiksi ISO/IEC 40500:2025 (avautuu uuteen välilehteen).
  • Selvityksessä WebAIM Million 2026 (avautuu uuteen välilehteen) (helmikuun 2026 aineisto) 95,9 prosentilla miljoonan suosituimman sivuston etusivuista oli havaittavia WCAG 2 -virheitä.
  • Kuusi yleisintä virhettä olivat heikkokontrastinen teksti (83,9 % sivuista), puuttuvat alt-tekstit (53,1 %), puuttuvat lomakkeiden nimiöt (51 %), tyhjät linkit (46,3 %), tyhjät painikkeet (30,6 %) ja puuttuva sivun kielen määritys (13,5 %).
  • Otoksen 42 516 Shopify-etusivulla havaittiin keskimäärin 75,1 virhettä, kun kaikkien sivujen keskiarvo oli 56,1.
  • WCAG 2.2 lisää neljä AA-tason kriteeriä (2.4.11, 2.5.7, 2.5.8, 3.3.8) ja kaksi A-tason kriteeriä (3.2.6, 3.3.7) ja poistaa kriteerin 4.1.1 Parsing.

Mitä WCAG 2.2 muutti verkkokaupoille?

WCAG 2.2 lisäsi yhdeksän onnistumiskriteeriä, joista kuusi on A- tai AA-tasolla, ja poisti vanhentuneena kriteerin 4.1.1 Parsing (W3C WAI (avautuu uuteen välilehteen)).

Uusi kriteeriTasoMitä se tarkoittaa verkkokaupassa
2.4.11 Focus Not Obscured (Minimum)AAKiinteä yläpalkki, kiinteä ostoskoripalkki, evästebanneri tai chat-ikkuna ei saa peittää kokonaan fokuksessa olevaa linkkiä tai painiketta
2.5.7 Dragging MovementsAAKaikelle, mikä vaatii vetämistä, kuten hintahaarukan liukusäätimelle, tarvitaan vaihtoehto, joka toimii yhdellä napautuksella
2.5.8 Target Size (Minimum)AANapsautus- ja kosketuskohteet ovat vähintään 24 × 24 CSS-pikseliä, tai niiden välissä on niin paljon tilaa, ettei kunkin kohteen ympärille piirretty 24 px:n ympyrä kosketa naapurikohteita
3.2.6 Consistent HelpAOhjelinkit, yhteystiedot tai chat näkyvät jokaisella sivulla samassa suhteellisessa järjestyksessä
3.3.7 Redundant EntryAÄlä kysy samoja tietoja kahdesti saman prosessin aikana; täytä ne automaattisesti tai anna käyttäjän valita ne
3.3.8 Accessible Authentication (Minimum)AAKirjautuminen ei saa edellyttää ulkoa muistamista tai tietojen jäljentämistä, ellei tarjolla ole vaihtoehtoa tai apukeinoa, kuten liittämistä ja salasanojen hallintaohjelmia

Loput kolme (2.4.12, 2.4.13 ja 3.3.9) ovat AAA-tasoa. Koska 2.2 säilyttää kaikki 2.1:n kriteerit kriteeriä 4.1.1 lukuun ottamatta, 2.2 AA -tason täyttäminen kattaa myös 2.1 AA -tason.

Mitkä WCAG-kriteerit jäävät useimmin täyttymättä verkkokauppojen sivupohjissa?

Samat muutamat toistuvat vuodesta toiseen: kontrasti, alt-tekstit, lomakkeiden nimiöt sekä linkkien ja painikkeiden nimet, minkä lisäksi näppäimistö- ja fokusongelmat, jotka automaattiset työkalut havaitsevat vain osittain.

KriteeriMikä verkkokaupoissa epäonnistuuNäin korjaat
1.1.1 Non-text Content (A)Tuotekuvat ilman alt-tekstiä tai tiedostonimi alt-tekstinä; linkitetyt kuvat ilman tekstiäKuvaa näkyvä tuote (väri, tyyli, kuvakulma). Käytä alt="" vain koristekuville. Shopify-teemojen pitäisi tulostaa image.alt
1.4.3 Contrast (Minimum) (AA)Vaaleanharmaa leipäteksti, paikkamerkkiteksti, alennusmerkit, hero-kuvien päällä oleva teksti4,5:1 normaalille tekstille, 3:1 suurelle tekstille (noin 24 px tai lihavoituna 18,5 px) (W3C (avautuu uuteen välilehteen))
2.4.4 Link Purpose (A), 4.1.2 Name, Role, Value (A)Pelkkinä kuvakkeina toteutetut ostoskori-, haku- ja somelinkit; karusellin nuolet; ”X”-sulkupainikkeet ilman nimeäAnna jokaiselle säätimelle näkyvä teksti tai aria-label, esimerkiksi ”Ostoskori, 2 tuotetta”
1.3.1 Info and Relationships (A), 3.3.2 Labels or Instructions (A)Uutiskirje- ja hakukentät, joissa on vain paikkamerkkiteksti; määräkentät ilman nimiötäKäytä <label for>-elementtiä, joka vastaa kentän id:tä; ryhmittele valintanappeina toteutetut varianttivalitsimet fieldset-elementtiin, jolla on legend
2.1.1 Keyboard (A), 2.1.2 No Keyboard Trap (A)Vain hiiren osoituksella avautuvat valikot, div-elementeistä rakennetut valitsimet, ponnahdusikkunat, joita ei voi sulkea näppäimistölläKäytä aitoja button- ja a-elementtejä; Esc sulkee peittokerrokset ja palauttaa fokuksen
2.4.7 Focus Visible (AA)outline: none teeman CSS:ssäLisää :focus-visible-tyyli, joka erottuu selvästi taustasta

WebAIM havaitsi myös, että joka neljänneltä linkitetyltä kuvalta puuttui alt-teksti ja että 45 % kuvista, joilta alt-teksti puuttui, oli linkkejä (WebAIM (avautuu uuteen välilehteen)). Kokoelmasivun ruudukossa kyse on yleensä tuotekuvan linkistä.

Mitä etusivulla kannattaa tarkistaa?

Tarkista yläpalkki, hero-alue ja kaikki esiin ponnahtavat elementit, koska jokainen kävijä kohtaa ne ensimmäisenä.

  • Ohituslinkki. ”Siirry sisältöön” -linkki ensimmäisenä fokusoitavana elementtinä (2.4.1 Bypass Blocks, A).
  • Yläpalkin kuvakkeet. Haun, tilin ja ostoskorin kuvakkeilla on saavutettavat nimet, ja ostoskorin nimessä on tuotteiden määrä.
  • Valikko. Avautuu Enterillä tai välilyönnillä, alakohtiin pääsee sarkaimella, sulkeutuu Esc-näppäimellä eikä ole riippuvainen hiiren osoituksesta (2.1.1). Shopifyn Theme Store -vaatimusten (avautuu uuteen välilehteen) mukaan kaikkien sivun osien, myös pudotusvalikoiden, on oltava käytettävissä näppäimistöllä.
  • Hero-karuselli. Jos diat vaihtuvat automaattisesti yli viiden sekunnin ajan, tarjoa keskeytyspainike (2.2.2 Pause, Stop, Hide, A).
  • Ilmoituspalkki ja kuvien päällä oleva teksti. Mittaa kontrasti; brändivärit jäävät usein alle suhteen 4,5:1.
  • Ponnahdusikkunat ja evästebannerit. Siirrä fokus ponnahdusikkunaan, anna sähköpostikentälle nimiö, salli sulkeminen Esc-näppäimellä ja varmista, ettei kiinteä banneri koskaan peitä fokuksessa olevaa elementtiä kokonaan (2.4.11). W3C mainitsee CSS:n scroll-padding-ominaisuuden yhtenä keinona pitää fokuksessa olevat elementit kiinteiden palkkien ulottumattomissa (W3C (avautuu uuteen välilehteen)).
  • Sivun kieli. html-elementillä on oikea lang-määrite (3.1.1 Language of Page, A).

Mitä kokoelmasivuilla kannattaa tarkistaa?

Kokoelmasivut kompastuvat yleensä tuotekortteihin, suodattimiin ja värivalitsimiin.

  • Tuotekortit. Kuvalinkillä on alt-teksti, tai kuva on piilotettu avustavilta teknologioilta ja nimen välittää otsikkolinkki.
  • Suodattimet. Jokaisella valintaruudulla on nimiö, ja jokaisella ryhmällä on otsikko tai selite (legend). Suodatinpaneeli avautuu, toimii ja sulkeutuu näppäimistöllä. Ilmoita päivittyneet tulosmäärät tilaviestinä (4.1.3 Status Messages, AA).
  • Hinnan liukusäätimet. Lisää vähimmäis- ja enimmäishinnalle numerokentät, jotta suodatin toimii ilman vetämistä (2.5.7) ja ilman hiirtä (2.1.1).
  • Värivalitsimet. Jokaisella värivalitsimella on tekstinimi, eikä ”loppuunmyyty”-tietoa ilmaista pelkällä värillä (1.4.1 Use of Color, A). Valitsimet täyttävät 24 × 24 CSS-pikselin koon tai välistyssäännön (2.5.8).
  • Lajittelu ja sivutus. Lajitteluvalikolla on nimiö; sivulinkit ja ”Lataa lisää” -painikkeet täyttävät kohteen vähimmäiskoon.

Mitä tuotesivuilla kannattaa tarkistaa?

Tuotesivulla tehdään ostopäätös, joten testaa jokainen säädin kuvien ja ”Lisää ostoskoriin” -painikkeen välillä.

  • Kuvagalleria. Jokaisella kuvalla on alt-teksti, pikkukuvat ovat painikkeita, joilla on nimet kuten ”Näytä kuva 2”, ja nuolet toimivat ilman vetämistä (2.5.7).
  • Varianttivalitsimet. Koko- ja värivaihtoehdot ovat nimetyssä ryhmässä (1.3.1), valittu vaihtoehto välittyy ruudunlukijoille (4.1.2), ja saatavilla olemattomat koot on merkitty tekstillä.
  • Määrä. Kentällä on nimiö, ja miinus- ja pluspainikkeilla on nimet ja ne täyttävät kriteerin 2.5.8. Shopifyn Theme Store edellyttää nykyään vähintään 24 × 24 CSS-pikselin kosketuskohteita, ja Shopifyn saavutettavuuden parhaat käytännöt (avautuu uuteen välilehteen) suosittelevat ensisijaisille säätimille kokoa 44 × 44.
  • Lisää ostoskoriin. Onnistumis- ja virheilmoitukset välitetään ruudunlukijalle (4.1.3). Yhdysvaltain FTC:n kanteessa erästä overlay-palvelun toimittajaa vastaan mainittiin sivusto, jolla ruudunlukija ei ilmoittanut tuotteen lisäämisestä ostoskoriin ja jolla 5 tähden arviografiikka luettiin ääneen ”previous”-painikkeena (FTC:n kanne (avautuu uuteen välilehteen)).
  • Arviot, välilehdet ja haitarit. Arvioilla on teksti, kuten ”4,5 tähteä viidestä”. Haitarit kertovat, ovatko ne avattuina.
  • Kiinteä ostoskoripalkki. Se ei saa peittää fokuksessa olevaa elementtiä kokonaan, kun näppäimistön käyttäjä siirtyy sivulla alaspäin sarkaimella (2.4.11).
  • Video. Puhetta sisältävissä tuotevideoissa on tekstitys (1.2.2 Captions (Prerecorded), A).

Mitä ostoskorissa ja kirjautumisessa kannattaa tarkistaa?

Ostoskori on viimeinen sivu, jota useimmat teemat hallitsevat kokonaan, joten testaa se kassapainikkeeseen asti ja tarkista sitten, ettei asiakastiliin kirjautuminen edellytä muistamista tai uudelleen kirjoittamista.

  • Ostoskorin sivupaneeli. Fokus siirtyy paneeliin, pysyy siellä paneelin ollessa auki ja palaa ostoskoripainikkeeseen, kun Esc sulkee paneelin, kuten Shopifyn parhaissa käytännöissä kuvataan.
  • Tuoterivit. Jokaisen määräkentän nimiössä on tuotteen nimi, ja jokainen poistopainike kertoo, mitä se poistaa, esimerkiksi ”Poista Pellavapaita, koko M”.
  • Alennuskoodi- ja lisätietokentät. Kentillä on nimiöt, ja virheet kuvataan tekstinä (3.3.1 Error Identification, A).
  • Kassapainike. Saavutettavissa sarkaimella, fokus näkyy selvästi, eikä painike jää kiinteiden elementtien alle.
  • Kirjautuminen (3.3.8). Shopifyn asiakastilit käyttävät oletuksena salasanatonta kirjautumista kertakäyttöisellä koodilla (avautuu uuteen välilehteen). W3C:n mukaan koodit on voitava liittää tai täyttää automaattisesti, ja liittämisen tai salasanojen hallintaohjelmien estäminen rikkoo kriteeriä. Objektintunnistukseen perustuvat CAPTCHAt ovat sallittuja AA-tasolla, mutta pulma- tai laskutehtäviin perustuvien CAPTCHAjen tilalle tarvitaan jokin muu menetelmä (W3C (avautuu uuteen välilehteen)).

Alustojen erot vaikuttavat tässä. Shopifyssa checkout.liquid ei ole enää tuettu (avautuu uuteen välilehteen) tieto-, toimitus- ja maksuvaiheissa, joten suurin osa kassan merkinnästä tulee Shopifylta eikä teemastasi; testaa lisäämäsi kassasovellukset ja mukautukset. WooCommercessa kassa on sivu WordPress-sivustollasi. WooCommerce ilmoittaa, että sen ytimen käyttöliittymä on olennaisilta osin WCAG 2.2 AA -tason mukainen (lausuma päivitetty viimeksi 1.4.2025), mutta teemasi ja lisäosasi voivat silti rikkoa sen (WooCommerce (avautuu uuteen välilehteen)).

Miten testaat verkkokaupan tämän tarkistuslistan avulla?

Yhdistä jokaisella sivutyypillä automaattinen skannaus, pelkällä näppäimistöllä tehty ostos ja lyhyt ruudunlukijatarkistus.

  1. Automaattinen skannaus. Työkalut, kuten axe, WAVE tai Lighthouse, havaitsevat kontrastin, alt-tekstien, nimiöiden ja tyhjien linkkien ongelmat. Shopifyn Theme Store edellyttää, että Lighthousen saavutettavuuspisteiden keskiarvo on vähintään 90 etu-, kokoelma- ja tuotesivuilla. Se on vähimmäistaso, ei vaatimustenmukaisuus: W3C:n mukaan työkalut eivät pysty yksinään määrittämään saavutettavuutta (avautuu uuteen välilehteen).
  2. Ostos pelkällä näppäimistöllä. Siirry ilman hiirtä etusivulta tuotteeseen valikon tai haun kautta, suodata, valitse variantti, lisää tuote ostoskoriin, avaa ostoskori ja siirry kassapainikkeeseen.
  3. Pistokoe ruudunlukijalla. Kuuntele VoiceOverilla tai NVDA:lla tuotteen nimi, hinta, variantin tila ja ostoskoriin lisäämisen vahvistus.
  4. Testaa uudelleen muutosten jälkeen. Teemapäivitykset ja uudet sovellukset voivat kumota korjauksia.

Ilmainen skannauksemme kattaa vaiheen 1 etu-, kokoelma-, tuote-, ostoskori- ja sisältösivulla aidossa Chromiumissa axe-corella. Saavutettavuusraportti testaa enintään 25 sivua, lisää vaiheen 2 pelkällä näppäimistöllä tehtävänä ostotestinä kassapainikkeeseen asti, antaa koodin ennen ja jälkeen -vertailuna ja sisältää tarkistuslistan vaiheeseen 3, joka vaatii ihmisen ja ruudunlukijan. Kumpikaan ei takaa ADA- tai WCAG-vaatimustenmukaisuutta.

Usein kysytyt kysymykset

Onko WCAG 2.2 lakisääteinen vaatimus yhdysvaltalaisille verkkokaupoille?

Yhdysvaltain oikeusministeriö (Department of Justice) ei ole antanut ADA-lakiin perustuvaa asetusta, joka määrittäisi verkkostandardin yksityisille yrityksille, ja sen vuoden 2022 verkko-ohjeistus (avautuu uuteen välilehteen) viittaa WCAG:hen hyödyllisenä ohjeistuksena. Vaatimuskirjeissä (demand letters) viitataan yleisesti WCAG 2.1:n tai 2.2:n AA-tasoon, joten keskustele omista velvoitteistasi juristin kanssa.

Täyttääkö WCAG 2.2 AA -taso myös WCAG 2.1 AA -tason?

Käytännössä kyllä. WCAG 2.2 säilyttää kaikki WCAG 2.1:n onnistumiskriteerit lukuun ottamatta kriteeriä 4.1.1 Parsing, jonka W3C poisti vanhentuneena.

Mikä on kohteen vähimmäiskoko WCAG 2.2:ssa?

Kriteerin 2.5.8 mukaan kohteiden on oltava vähintään 24 × 24 CSS-pikseliä, ellei kunkin pienemmän kohteen keskelle sijoitettu 24 px:n ympyrä kosketa muita kohteita tai niiden ympyröitä. Poikkeuksia ovat virkkeiden sisällä olevat linkit, muotoilemattomat selaimen säätimet, kohteet, joiden esitystapa on olennainen, sekä kohteet, joille on tarjolla vaatimuksen täyttävä vastaava säädin.

Tarkoittaako Lighthousen saavutettavuuspistemäärä 100, että kauppani on vaatimusten mukainen?

Ei. Automaattiset työkalut havaitsevat vain osan virheistä, ja WebAIM huomauttaa, ettei havaittujen virheiden puuttuminen tarkoita, että sivu olisi saavutettava tai vaatimusten mukainen.

Rikkooko salasanalla kirjautuminen kriteeriä 3.3.8?

Ei sellaisenaan. Salasanakenttä täyttää kriteerin, kun siihen voi liittää tekstiä ja käyttää salasanojen hallintaohjelmaa; kriteeri rikkoutuu vasta, jos liittäminen tai automaattinen täyttö estetään.

Kuinka usein minun pitäisi testata kauppani uudelleen?

Testaa uudelleen jokaisen teemapäivityksen, uuden sovelluksen tai suuren sivupohjamuutoksen jälkeen ja tee ostopolulle säännöllisesti pistokokeita, koska sovellukset voivat lisätä sivuille uutta koodia ilman varoitusta.

Lähteet

Kaikki oppaat