Toolkit · Verkkokaupalle

Verkkokaupan saavutettavuus — rakennettu kaupoille ADA + EAA -vaatimusten mukaisesti.

Verkkokauppa on yksittäisenä toimialana korkein oikeudenkäyntiriski ADA Title III -verkkosaavutettavuuskanteissa Yhdysvalloissa ja kuuluu selkeästi eurooppalaisen esteettömyysdirektiivin (EAA) soveltamisalaan EU:ssa. Tämä sivu sisältää 30 kohdan WCAG 2.2 AA -tarkistuslistan ja alustakohtalset muistiinpanot, joita Shopify-, WooCommerce-, BigCommerce- ja headless-tiimit todella tarvitsevat — kirjoitettu ostoskorin rakentajille, ei sitä tarkasteleville lakimiehille.

Miksi verkkokauppa on korkein-riskin toimiala

Kaksi sääntelyviranomaista, yksi docket — verkkokaupan hallitsema.

Yhdysvalloissa ADA Title III -verkkosaavutettavuusvalituksia on nostettu liittovaltion tuomioistuimissa noin 4 300 vuosittain vuoteen 2024 asti, ja verkkokauppa hallitsee docketia ravintola- ja majoituspalveluvarausten ohella. Pelkästään verkossa toimivat jälleenmyyjät eivät enää luotettavasti voita "ei fyysistä yhteyttä" -puolustuksella — useimmat piirikunnat ovat joko hylänneet sen tai kiertäneet sen, ja Kalifornian Unruh Act -lain sekä New Yorkin Human Rights Law -lain nojalla nostettujen osavaltiooikeudenkäyntien määrä kasvaa rinnakkain.

Euroopan unionissa eurooppalainen esteettömyysdirektiivi (EAA) mainitsee nimenomaisesti "sähköisen kaupankäynnin palvelut" soveltamisalaluettelossaan — artikla 2(2)(d) — ja mikroyrityspoikkeus (alle 10 henkilöstöä tai alle 2 M€ liikevaihto) koskee harvoja todellisia jälleenmyyjiä. Jokainen kauppa, jolla on varasto, useamman hengen tiimi tai merkittävä tuotevalikoima, kuuluu soveltamisalaan ja sen on täytettävä EN 301 549, joka viittaa WCAG 2.2:n onnistumiskriteereihin.

Toimettomuuden kustannukset ovat konkreettiset. Yhdysvaltain ADA-sovinnot päätyvät tyypillisesti 20 000–50 000 dollarin haarukaan ensikertaisia vastaajia kohtaan, ja toistuvasti haastetut jälleenmyyjät maksavat huomattavasti enemmän; kantajapuolen toimistot toimivat nykyään mittakaavassa, ja yksittäinen saavutettavuusselosteiden kaappaus ruokkii kymmeniä vaatimuskirjeitä. EU:ssa EAA:n valvonta siirtyy varoituskirjevaiheesta, joka hallitsi vuotta 2025, sakkojenantovaiheeseen, jonka monet jäsenvaltiot ottivat käyttöön vuonna 2026 — Saksa, Ranska, Italia, Espanja ja Alankomaat ovat kaikki perustaneet valvontatiimit.

Hyvä uutinen: verkkokaupan saavutettavuudella on tuttu muoto. Samat tusinan verran ongelmia toistuvat lähes jokaisessa auditoinnissa, ja useimmat voidaan korjata design-tokeneilla, teemakomponenteilla tai keskitetyllä kehityssprintillä. Alla oleva tarkistuslista on se, mitä annamme verkkokauppatiimeille, kun ne kysyvät "mistä aloitamme?"

Verkkokaupan 30 kohdan tarkistuslista

Kuusi osa-aluetta × viisi tarkistusta. Tulosta, merkitse, sitten auditoi.

  1. 01 Navigointi ja haku

  2. 02 Tuotelistaaussivut (PLP)

  3. 03 Tuotedetaljisivut (PDP)

  4. 04 Ostoskori ja kassalle siirtyminen

  5. 05 Tili ja ostoksen jälkeiset toimet

  6. 06 Läpileikkaavat vaatimukset

Alustakohtalset toteutusmuistiinpanot

Missä tarkistuslista todella näkyy koodissa — alustakohtalset.

Shopify

Teemojen laatu vaihtelee suuresti. Online Store 2.0 -teemat (Dawn, Sense, Craft, Refresh) toimitetaan huomattavasti paremmalla saavutettavuuslähtötasolla kuin vanha Vintage-pino — semanttiset otsikot, kohdistuksenhallinta pikakatsauksessa, ohituslinkit oletuksena. Jäljelle jäävät ongelmat liittyvät kaupankäyntikohtaiseen käyttöliittymään: varianttivalitsimet ja värilaatikot, jotka menettävät tilan valinnan yhteydessä, toimituskululaskurin iframe, joka kaappaa kohdistuksen, sekä kolmannen osapuolen sovellukset (arvostelut, upsell, chat), jotka renderöivät DOM:iin ilman näppäimistösiirron huomiointia. Auditoi teema, sitten auditoi jokainen asennettu sovellus erikseen.

WooCommerce / WordPress

Teema-lisäosakaaos on hallitseva riski. WooCommercen omat mallipohjat ovat toimivia, mutta ne yhdistetään pääteemaan, jota et ole kirjoittanut, ja maksulisäosaan, jota et ole auditoinut. Toistuva ongelma on AJAX-pohjainen varianttikaavake tuotesivulla: variantin valinta vaihtaa DOM-solmuja ilmoittamatta muutoksesta, ja hintaelementti renderöityy uudelleen ilman aria-live-ankkuria. Ostoskoripäivityksillä on sama muoto — minikori renderöityy hiljaisesti lisäyksen yhteydessä. Molemmat voidaan korjata käärimällä dynaamiset alueet aria-live-elementtiin.

BigCommerce / Salesforce Commerce Cloud

Yritysalustoilla on vahvemmat oletusasetukset mutta tiukemmat mukauttamispolut. Stencil (BigCommerce) ja SFRA (Salesforce Commerce Cloud) -julkaisumallipohjat ovat usein lukittuna toimiston toimittaman mukauttamisen taakse; alustan oma saavutettavuusasema merkitsee vähemmän kuin toimistosi. Pyydä ajantasainen VPAT tai EN 301 549 -vaatimustenmukaisuusraportti omalta toteutuskumppaniltasi, ei alustan toimittajalta. Alusta ylittää tietyn tason; toimiston rakentama ratkaisu on se, jota vastaan kanteet nostetaan.

Headless / mukautetut React-, Vue- tai Svelte-kaupat

Täysi omistajuus tarkoittaa täyttä vastuuta. Toistuva ongelma on hydraatioristiriidat, jotka jättävät aria-attribuutit epäyhtenäisiin tiloihin SSR:n ja asiakkaan välillä; toinen on reitinvaihtoilmoitukset, jotka eivät koskaan käynnisty, koska asiakaspuolen reititin korvaa sivun renderöimättä otsikkoa uudelleen tai siirtämättä kohdistusta. Yhdistä kehyskohtainen live-region-apuohjelma (katso aria-live-alueet moderneissa kehyksissä) reitinvaihtokohtaiseen kohdistuksenkäsittelijään. Useimmissa headless-auditoinneissa, joita olemme nähneet, 70 % ongelmista ratkeaa näillä kahdella muutoksella.

Seuranta- ja auditointisykli

Kertaluonteinen korjaus ei selviä yhdestäkään sprintistä.

Verkkokaupan koodi muuttuu päivittäin. Markkinointi julkaisee hero-variantin tiistaina, myyntitiimi kääntää osion torstaina, sovellus päivittyy viikonlopun aikana. Kertaluonteinen saavutettavuuskorjaus kestää suunnilleen seuraavaan käyttöönottoon asti — siksi toimiva malli on kolmikerroksinen, ei yksikerroksinen.

Ensiksi, suorita maksuton WCAG 2.2 -skanneri live-kauppaasi vastaan tänään lähtötason vahvistamiseksi. Toiseksi, kytke jatkuva automaattinen seuranta jokaista esikäännöstä ja jokaista tuotantokäyttöönottoa vastaan — tämä on kerros, joka havaitsee regressiot ennen kuin asiakas tekee niin. Kolmanneksi, tilaa manuaalinen auditointi vammaisten testaajien tekemänä vähintään vuosittain ja jokaisen merkittävän uudelleensuunnittelun tai alustamuutoksen jälkeen — automaattiset työkalut eivät koskaan havaitse ruudunlukuohjelman luettavuutta, kohdistusjärjestyksen tarkoitusta tai sitä, onko prosessi todella käytettävissä päästä päähän.

Seuranta- ja manuaaliauditoinnin siirtymän osalta seurannan ostajan opas kattaa alustat, jotka hallitsevat skannauksesta auditointiin ulottuvaa työnkulkua päästä päähän — Qualibooth, axe Monitor, Siteimprove ja Level Access. Valinta perustuu CI-integraatioon sopivuuteen ja siihen, sisältääkö alustan manuaaliauditointiverkosto todella testaajia, joilla on asiakkaidesi vammoja — kaikki eivät sisällä.

UKK

Kysymyksiä, joita verkkokauppatiimit esittävät ennen sitoutumista.

Vaatiiko ADA verkkokauppani saavutettavuuden?

Käytännössä kyllä. Liittovaltion tuomioistuimet ovat soveltaneet ADA Title III:a kaupallisiin verkkosivustoihin yli vuosikymmenen ajan, ja verkkokauppa on yksittäisenä kategoriana suurin verkkosaavutettavuusvalitusten lähde. Oikeusministeriö (DOJ) on virallisesti todennut, että julkisen palvelun verkkosivustojen on oltava saavutettavia, ja useimmissa tuomioissa katsotaan, ettei "yhteys" fyysiseen myymälään ole edellytys pelkästään verkossa toimiville jälleenmyyjille. Kauppa, joka ei täytä WCAG 2.1 AA:n (ja yhä useammin 2.2 AA:n) vaatimuksia, altistuu todelliselle oikeudenkäyntiriskille.

Sovelletaanko EAA:ta verkkokauppaani?

Lähes varmasti, jos myyt EU:hun. Eurooppalainen esteettömyysdirektiivi (EAA) luettelee "sähköisen kaupankäynnin palvelut" soveltamisalassaan — artikla 2(2)(d). Mikroyrityspoikkeus — alle 10 henkilöstöä JA alle 2 miljoonan euron liikevaihto — vapauttaa vain pienimmät toimijat. Jokainen jälleenmyyjä, jolla on varasto, useita työntekijöitä tai merkittävä tuotevalikoima, kuuluu soveltamisalaan ja sen on täytettävä EN 301 549, joka viittaa WCAG 2.1 AA:han.

Mikä on yleisin saavutettavuusongelma verkkokaupassa?

Kolme ongelmaa toistuu lähes jokaisessa auditoinnissa: hintojen ja alennustarrojen heikko värikontrasti (usein brändin punainen valkoisella taustalla jää alle 4,5:1), merkitsemättömät tai kontekstittomat "Lisää ostoskoriin" -painikkeet sekä ostoskoripäivitykset, joita avustava teknologia ei ilmoita. Yksikään näistä ei vaadi uudelleensuunnittelua — ne edellyttävät design-tokenien auditointia, aria-label-läpikäyntiä korttikohtaisille painikkeille ja aria-live-aluetta ostoskorin widgetille.

Voiko Shopify-kauppa olla ADA-vaatimusten mukainen?

Shopify-kauppa voidaan saada vaatimustenmukaiseksi, mutta pelkkä alusta ei takaa sitä. Online Store 2.0 -teemat (Dawn, Sense, Craft, Refresh) ovat huomattavasti parempia kuin vanhat Vintage-teemat — semanttiset otsikot, kohdistuksenhallinta pikakatsauksessa, ohituslinkit oletuksena. Jäljelle jäävät ongelmat liittyvät kaupankäyntikohtaiseen käyttöliittymään: varianttivalitsimet ja värilaatikot, jotka menettävät tilan valinnan yhteydessä, toimituskululaskurin iframe, joka kaappaa kohdistuksen, sekä kolmannen osapuolen sovellukset (arvostelut, upsell, chat), jotka renderöivät DOM:iin ilman näppäimistösiirron huomiointia. Auditoi teema, sitten auditoi jokainen asennettu sovellus erikseen.

Kuinka usein verkkokauppa tulisi auditoida?

Automaattinen skannaus tulisi suorittaa jokaisen käyttöönoton yhteydessä (ennen yhdistämistä tai käyttöönoton jälkeen). Vammaisten testaajien tekemät manuaaliset auditoinnit tulisi tilata vähintään vuosittain vakaaseen käyttöön otetuille kaupoille — sekä jokaisen merkittävän uudelleensuunnittelun, alustamuutoksen tai uuden kassajärjestelmän käyttöönoton jälkeen. Useimmat verkkokauppatiimit yhdistävät neljännesvuosittaiset automaattiset raportit vuosittaisiin manuaalisiin auditointeihin.

Kolme seuraavaa askelta

Valitse se, joka vastaa tiimisi nykytilannetta.

  1. Suorita maksuton skanneri nyt

    Live-toiminen maksuton WCAG 2.2 -skanneri mitä tahansa julkista URL-osoitetta vastaan. Qualibooth-pohjainen, avautuu uudessa välilehdessä. Paras lähtökohta, jos sinulla ei ole nykyistä lähtötasoa.

    Avaa skanneri →

  2. Lataa 30 kohdan tarkistuslista

    Tulostettava PDF-versio yllä olevasta tarkistuslistasta tilaa vastuuhenkilölle ja määräpäivälle per kohta. Tulossa tulevassa versiossa — toistaiseksi tulosta tämä sivu.

  3. Tilaa manuaalinen auditointi

    Lue oppaamme manuaalisen auditoinnin tilaamisesta vammaisten testaajien tekemänä — mitä pyytää, mikä budjetti varata ja mitkä alustat sisältävät oikean testaajaverkoston verrattuna niihin, jotka ulkoistavat sen.

    Lue opas →