Toolkit · För e-handel

E-handelstillgänglighet — byggt för butiker under ADA + EAA.

E-handel är den vertikala med högst risk för rättstvister enligt ADA Title III i USA och ingår uttryckligen i tillämpningsområdet för Europeiska tillgänglighetsakten i EU. Den här sidan innehåller 30-punkts WCAG 2.2 AA-checklistan och de plattformsspecifika noteringar som Shopify-, WooCommerce-, BigCommerce- och headless-team faktiskt behöver — skriven för de som bygger varukorgen, inte för advokaterna som granskar den.

Varför e-handel är den vertikala med högst risk

Två tillsynsmyndigheter, ett ärenderegister dominerat av näthandel.

I USA har klagomål om webbtillgänglighet enligt ADA Title III legat på ungefär 4 300 federala anmälningar per år genom 2024, och e-handel dominerar ärenderegistret jämte restaurangbokningar och hotellbranschen. Renodlade näthandlare kan inte längre på ett tillförlitligt sätt åberopa försvaret "ingen fysisk koppling" — de flesta kretsar har antingen avfärdat det eller kringgått det, och statliga stämningar enligt Californiens Unruh Act och New Yorks State Human Rights Law har ökat parallellt.

Inom Europeiska unionen namnger Europeiska tillgänglighetsakten "e-handelstjänster" uttryckligen i sitt tillämpningsområde — artikel 2(2)(d) — och undantaget för mikroföretag (under 10 anställda eller under 2 miljoner euro i omsättning) träffar få verkliga återförsäljare. Varje butik med ett lager, ett flerpersonsteam eller ett meningsfullt produktsortiment omfattas och måste uppfylla EN 301 549, som hänvisar till WCAG 2.2:s framgångskriterier.

Kostnaden för passivitet är konkret. Förlikningar enligt ADA i USA landar typiskt på 20 000–50 000 dollar för förstagångssvarande, medan återförsäljare som är upprepade mål hamnar betydligt högre; advokatbyråer på kärnandesidan arbetar nu i stor skala, och en enda skrapning av tillgänglighetsredogörelser genererar dussintals kravbrev. Inom EU övergår EAA-tillsynen från varningsbrevsfasen som dominerade 2025 till bötesutfärdandefasen som många medlemsstater antog 2026 — Tyskland, Frankrike, Italien, Spanien och Nederländerna har alla upprättat tillsynsteam.

Den goda nyheten: e-handelstillgänglighet har ett känt mönster. Samma dussin feltyper återkommer i nästan varje granskning, och de flesta går att åtgärda med designtokens, temakomponenter eller en fokuserad teknisk sprint. Checklistan nedan är vad vi ger e-handelsteam när de frågar "var börjar vi?"

30-punktschecklistan för e-handel

Sex ytor × fem kontroller. Skriv ut den, bocka av den, granska den sedan.

  1. 01 Navigering och sökning

  2. 02 Produktlistsidor (PLP)

  3. 03 Produktdetaljsidor (PDP)

  4. 04 Varukorg och betalning

  5. 05 Konto och efterköp

  6. 06 Övergripande krav

Plattformsspecifika implementeringsnoteringar

Var checklistan faktiskt landar i koden, per plattform.

Shopify

Temakvaliteten varierar kraftigt. Online Store 2.0-teman (Dawn, Sense, Craft, Refresh) levereras med en avsevärt bättre tillgänglighetsbaslinje än det äldre Vintage-stacken — semantiska rubriker, fokushantering vid snabbvisning, hopplänkar som standard. De problem som kvarstår är kopplade till handelspecifikt gränssnitt: variantväljare och färgrutor som förlorar tillståndet vid val, frakt-iframe som fångar fokus, och tredjepartsappar (recensioner, merförsäljning, chatt) som renderar i DOM utan att respektera tangentbordsöverlämning. Granska temat, granska sedan varje installerad app separat.

WooCommerce / WordPress

Kaos med tema plus tillägg är den dominerande risken. WooCommerces egna mallar är användbara, men de kombineras med ett överordnat tema du inte skrivit och ett betalningsinstick du inte granskat. Det återkommande felet är det AJAX-drivna variantformuläret på produktsidan: variantval byter DOM-noder utan att meddela ändringen, och priselementet återrenderas utan aria-live-ankare. Varukorgsuppdateringar har samma mönster — minivarukorgen återrenderas tyst vid tillägg. Båda kan åtgärdas genom att wrappa de dynamiska regionerna med aria-live.

BigCommerce / Salesforce Commerce Cloud

Företagsplattformar har starkare standardinställningar men snävare anpassningsvägar. Stencil (BigCommerce) och SFRA (Salesforce Commerce Cloud) butiksmallar är ofta låsta bakom anpassningar levererade av en byrå; plattformens egna tillgänglighetsposition spelar mindre roll än din byrås. Begär en aktuell VPAT eller EN 301 549-efterlevnadsrapport från din implementeringspartner, inte från plattformsleverantören. Plattformen klarar en ribba; byrå-bygget är det som stäms.

Headless / anpassade React-, Vue- eller Svelte-butiker

Fullt ägandeskap innebär fullt ansvar. Det återkommande felet är hydreringsfelmatchningar som lämnar aria-attribut i inkonsekvent tillstånd mellan SSR och klient; det andra är ruttbytesmeddelanden som aldrig utlöses eftersom klientroutern ersätter sidan utan att återrendera en rubrik eller flytta fokus. Kombinera ett ramverksspecifikt live-region-verktyg (se aria-live-regioner i moderna ramverk) med en fokus-vid-ruttbyte-hanterare. De flesta headless-granskningar vi sett åtgärdar 70 % av problemen med enbart dessa två ändringar.

Övervaknings- och granskningscykeln

En engångsfixning överlever inte ens en enda sprint.

E-handelskod ändras dagligen. Marknadsföringen lanserar en hero-variant på tisdag, merchandisingteamet byter en sektion på torsdag, en app uppdateras under helgen. En engångsfixning för tillgänglighet håller ungefär lika länge som nästa driftsättning — det är därför den modell som faktiskt fungerar har tre lager, inte ett.

Börja med att köra en gratis WCAG 2.2-skanner mot din aktiva butik i dag för att etablera en baslinje. Koppla sedan in kontinuerlig automatiserad övervakning mot varje förhandsvisningsbygge och varje produktionsdriftsättning — detta är lagret som fångar regressioner innan kunden gör det. Beställ sedan en manuell granskning av testare med funktionsnedsättningar minst en gång per år, och efter större omdesign eller plattformsbyte — automatiserade verktyg fångar aldrig skärmläsarläsbarhet, fokusordningsavsikt, eller om ett flöde faktiskt är användbart från början till slut.

För överlämningen mellan övervakning och manuell granskning specifikt täcker vår köpguide för tillgänglighetsövervakning de plattformar som hanterar arbetsflödet från skanning till granskning från start till mål — Qualibooth, axe Monitor, Siteimprove och Level Access. Välj baserat på integrationsmöjligheter med din CI och på om plattformens manuella granskningstjänst faktiskt inkluderar testare med de funktionsnedsättningar dina kunder har — det gör inte alla.

Vanliga frågor

Frågorna e-handelsteam ställer innan de bestämmer sig.

Kräver ADA att min nätbutik är tillgänglig?

I praktiken ja. Federala domstolar har tillämpat ADA Title III på kommersiella webbplatser i över ett decennium, och e-handel är den enskilt största kategorin av klagomål om webbtillgänglighet. DOJ har officiellt angett att webbplatser för allmänna servicetjänster måste vara tillgängliga, och de flesta avgöranden fastslår att en "koppling" till en fysisk butik inte krävs för renodlade näthandlare. En butik som inte uppfyller WCAG 2.1 AA (och i allt högre grad 2.2 AA) löper en verklig risk för rättstvister.

Gäller EAA för min e-handelssajt?

Med stor sannolikhet, om du säljer inom EU. Europeiska tillgänglighetsakten (EAA) listar "e-handelstjänster" som i tillämpningsområdet i artikel 2(2)(d). Undantaget för mikroföretag — färre än 10 anställda OCH under 2 miljoner euro i omsättning — gäller bara de allra minsta aktörerna. Varje återförsäljare med ett lager, flera anställda eller ett icke-trivialt produktsortiment omfattas och måste uppfylla EN 301 549, som hänvisar till WCAG 2.1 AA.

Vad är det vanligaste tillgänglighetsproblemet inom e-handel?

Tre problem återkommer i nästan varje granskning: låg färgkontrast på priser och reaklappar (varumärkets röda färg på vit bakgrund faller ofta under 4,5:1), omärkta eller kontextlösa "Lägg i varukorg"-knappar, och varukorgsuppdateringar som inte meddelas till hjälpmedelsteknik. Ingen av dessa kräver en omdesign — de behöver en granskning av designtokens, ett aria-label-genomslag på kortknapparna och en aria-live-region på varukorgswidgeten.

Kan en Shopify-butik uppfylla ADA?

En Shopify-butik kan göras kompatibel, men plattformen i sig garanterar det inte. Online Store 2.0-teman är avsevärt bättre än det äldre Vintage-stacken — semantiska rubriker, fokushantering vid snabbvisning, hopplänkar som standard. De problem som kvarstår är kopplade till handelspecifikt gränssnitt: variantväljare och färgrutor som förlorar tillståndet vid val, frakt-iframe som fångar fokus, och tredjepartsappar (recensioner, merförsäljning, chatt) som renderar i DOM utan att respektera tangentbordsöverlämning. Granska temat, granska sedan varje installerad app separat.

Hur ofta bör en e-handelssajt granskas?

Automatiserad skanning bör köras vid varje driftsättning (före sammanslagning eller efter driftsättning). Manuella granskningar av testare med funktionsnedsättningar bör beställas minst en gång per år för driftsatta butiker — och efter större omdesign, plattformsbyte eller ny kassalösning. De flesta e-handelsteam kombinerar kvartalsvisa automatiserade rapporter med årliga manuella granskningar.

Tre nästa steg

Välj det som matchar var ditt team befinner sig i dag.

  1. Kör den gratis skannern nu

    En aktiv gratis WCAG 2.2-skanner mot valfri offentlig URL. Drivs av Qualibooth, öppnas i en ny flik. Bästa startpunkten om du saknar en aktuell baslinje.

    Öppna skannern →

  2. Ladda ned 30-punktschecklistan

    En utskrivbar PDF-version av checklistan ovan, med plats för ansvarig och förfallodatum per punkt. Kommer i en framtida iteration — skriv ut den här sidan tills vidare.

  3. Beställ en manuell granskning

    Läs vår guide om att beställa en manuell granskning av testare med funktionsnedsättningar — vad du ska begära, vad du ska budgetera, och vilka plattformar som inkluderar ett verkligt testernätverk jämfört med de som lägger ut det.

    Läs guiden →