Universell utforming av nettbutikker: WCAG 2.2 AA-sjekkliste

WCAG 2.2 AA-sjekkliste for Shopify- og WooCommerce-butikker etter sidetype: alt-tekst, kontrast, ledetekster, tastatur, fokus, målstørrelse og nye 2.2-krav.

FixReports-redaksjonen10 min lesing

En sjekkliste for WCAG 2.2 AA for en nettbutikk starter med feilene som finnes i de fleste butikkmaler: manglende alt-tekst, tekst med for lav kontrast, lenker og knapper uten tilgjengelig navn, skjemafelt uten ledetekst, tastaturfeller og usynlig fokus. WCAG 2.2 legger så til AA-krav som rammer nettbutikker hardt: elementer i fokus som skjules under faste linjer (2.4.11), trykkflater mindre enn 24 × 24 CSS-piksler (2.5.8) og innlogginger som krever at folk husker eller skriver av noe (3.3.8). Test hver sidetype (forside, kolleksjon, produkt, handlekurv) med tastatur og et automatisk testverktøy, og rett deretter feilene i temamalene, slik at alle sider arver rettelsen.

Hovedpunkter

  • WCAG 2.2 ble en W3C-anbefaling 5. oktober 2023. Gjeldende utgave er datert 12. desember 2024, og den ble godkjent som ISO/IEC 40500:2025 (åpnes i en ny fane).
  • I WebAIM Million 2026 (åpnes i en ny fane) (data fra februar 2026) hadde 95,9 % av forsidene til de én million største nettstedene påviselige WCAG 2-feil.
  • De seks vanligste feilene var tekst med lav kontrast (83,9 % av sidene), manglende alt-tekst (53,1 %), manglende ledetekster i skjemaer (51 %), tomme lenker (46,3 %), tomme knapper (30,6 %) og manglende angivelse av sidespråk (13,5 %).
  • De 42 516 Shopify-forsidene i utvalget hadde i snitt 75,1 påviste feil, mot 56,1 for alle sider.
  • WCAG 2.2 legger til fire AA-kriterier (2.4.11, 2.5.7, 2.5.8, 3.3.8) og to kriterier på nivå A (3.2.6, 3.3.7), og fjerner 4.1.1 Parsing.

Hva er nytt i WCAG 2.2 for nettbutikker?

WCAG 2.2 la til ni suksesskriterier, seks av dem på nivå A eller AA, og fjernet 4.1.1 Parsing som foreldet (W3C WAI (åpnes i en ny fane)).

Nytt kriteriumNivåHva det betyr for en nettbutikk
2.4.11 Focus Not Obscured (Minimum)AAEn lenke eller knapp i fokus må ikke skjules helt av en fast topplinje, en fast «Legg i handlekurv»-linje, et cookie-banner eller en chat-widget
2.5.7 Dragging MovementsAAAlt som krever at du drar, for eksempel en glidebryter for prisintervall, trenger et alternativ som fungerer med ett enkelt trykk
2.5.8 Target Size (Minimum)AAKlikk- og trykkflater er minst 24 × 24 CSS-piksler, eller har så stor avstand at en sirkel på 24 px rundt hver flate ikke berører naboene
3.2.6 Consistent HelpAHjelpelenker, kontaktinformasjon eller chat vises i samme relative rekkefølge på alle sider
3.3.7 Redundant EntryAIkke be om den samme informasjonen to ganger i én prosess; fyll den ut automatisk eller la folk velge den
3.3.8 Accessible Authentication (Minimum)AAInnlogging må ikke være avhengig av at man husker eller skriver av noe, med mindre det finnes et alternativ eller et hjelpemiddel som innliming og passordbehandlere

De tre andre (2.4.12, 2.4.13 og 3.3.9) er på nivå AAA. Fordi 2.2 beholder alle kriteriene fra 2.1 unntatt 4.1.1, dekker du også 2.1 AA når du oppfyller 2.2 AA.

Hvilke WCAG-kriterier brytes oftest i butikkmaler?

De samme få dukker opp hvert år: kontrast, alt-tekst, ledetekster i skjemaer og navn på lenker og knapper, i tillegg til tastatur- og fokusproblemer som automatiske verktøy bare delvis fanger opp.

KriteriumHva som feiler i nettbutikkerSlik retter du det
1.1.1 Non-text Content (A)Produktbilder uten alt-tekst eller med filnavnet som alt-tekst; lenkede bilder uten tekstBeskriv produktet som vises (farge, stil, vinkel). Bruk alt="" bare for dekorasjon. Shopify-temaer bør skrive ut image.alt
1.4.3 Contrast (Minimum) (AA)Lysegrå brødtekst, plassholdertekst, salgsmerker, tekst over hero-bilder4,5:1 for vanlig tekst, 3:1 for stor tekst (omtrent 24 px, eller 18,5 px fet) (W3C (åpnes i en ny fane))
2.4.4 Link Purpose (A), 4.1.2 Name, Role, Value (A)Lenker til handlekurv, søk og sosiale medier med bare ikon; piler i bildekaruseller; «X»-knapper for å lukke uten navnGi hver kontroll synlig tekst eller en aria-label, for eksempel «Handlekurv, 2 varer»
1.3.1 Info and Relationships (A), 3.3.2 Labels or Instructions (A)Felt for nyhetsbrev og søk med bare plassholdertekst; antallsfelt uten ledetekstBruk en <label for> som samsvarer med id-en til feltet; grupper fargeruter med radioknapper i et fieldset med legend
2.1.1 Keyboard (A), 2.1.2 No Keyboard Trap (A)Menyer som bare fungerer når musepekeren holdes over (hover), fargeruter bygget av div-er, popup-vinduer som ikke kan lukkes med tastaturetBruk ekte button- og a-elementer; Escape lukker overlegg og sender fokus tilbake
2.4.7 Focus Visible (AA)outline: none i CSS-en til temaetLegg til en :focus-visible-stil som skiller seg tydelig ut fra bakgrunnen

WebAIM fant også at ett av fire lenkede bilder manglet alt-tekst, og at 45 % av bildene uten alt-tekst var lenker (WebAIM (åpnes i en ny fane)). I et produktrutenett på en kolleksjonsside er det som regel lenken på produktbildet.

Hva bør du sjekke på forsiden?

Sjekk topplinjen, hero-området og alt som dukker opp, fordi det er dette alle besøkende møter først.

  • Hopp-til-innhold-lenke. En lenke «Hopp til innhold» som det første elementet som kan få fokus (2.4.1 Bypass Blocks, A).
  • Ikoner i topplinjen. Ikonene for søk, konto og handlekurv har tilgjengelige navn, og navnet på handlekurven inkluderer antall varer.
  • Meny. Åpnes med Enter eller mellomromstasten, underpunktene kan nås med Tab, lukkes med Escape og er ikke avhengig av hover (2.1.1). Shopifys krav til Theme Store (åpnes i en ny fane) sier at alle deler av en side, også nedtrekksmenyer, må kunne brukes med tastatur.
  • Bildekarusell i hero-området. Hvis lysbildene skifter automatisk i mer enn fem sekunder, må du tilby en pauseknapp (2.2.2 Pause, Stop, Hide, A).
  • Kunngjøringslinje og tekst på bilder. Mål kontrasten. Merkevarefarger når ofte ikke opp til 4,5:1.
  • Popup-vinduer og cookie-bannere. Flytt fokus inn i popup-vinduet, gi e-postfeltet en ledetekst, la Escape lukke det, og sørg for at et fast banner aldri dekker elementet i fokus helt (2.4.11). W3C nevner CSS-egenskapen scroll-padding som én måte å holde elementer i fokus fri for faste linjer på (W3C (åpnes i en ny fane)).
  • Sidespråk. html-elementet har et korrekt lang-attributt (3.1.1 Language of Page, A).

Hva bør du sjekke på kolleksjonssider?

Kolleksjonssider feiler som regel på produktkort, filtre og fargeruter.

  • Produktkort. Bildelenken har alt-tekst, eller bildet er skjult for hjelpemiddelteknologi og tittellenken bærer navnet.
  • Filtre. Hver avkrysningsboks har en ledetekst, og hver gruppe har en overskrift eller en legend. Filterpanelet kan åpnes, brukes og lukkes med tastaturet. Sørg for at oppdatert antall treff blir lest opp som en statusmelding (4.1.3 Status Messages, AA).
  • Glidebrytere for pris. Legg til tallfelt for minimums- og maksimumspris, slik at filteret fungerer uten å dra (2.5.7) og uten mus (2.1.1).
  • Fargeruter. Hver fargerute har et tekstnavn, og «utsolgt» vises ikke bare med farge (1.4.1 Use of Color, A). Fargerutene er minst 24 × 24 CSS-piksler eller oppfyller avstandsregelen (2.5.8).
  • Sortering og paginering. Nedtrekksmenyen for sortering har en ledetekst, og sidelenker og «Last inn flere»-knapper oppfyller kravet til målstørrelse.

Hva bør du sjekke på produktsider?

Det er på produktsiden kjøpsbeslutningen tas, så test hver kontroll mellom bildene og «Legg i handlekurv»-knappen.

  • Galleri. Hvert bilde har alt-tekst, miniatyrbildene er knapper med navn som «Vis bilde 2», og pilene fungerer uten å dra (2.5.7).
  • Variantvelgere. Valgene for størrelse og farge ligger i en gruppe med ledetekst (1.3.1), det valgte alternativet blir formidlet til skjermlesere (4.1.2), og størrelser som ikke er tilgjengelige, er merket med tekst.
  • Antall. Feltet har en ledetekst, og minus- og plussknappene har navn og oppfyller 2.5.8. Shopifys Theme Store krever nå trykkflater på minst 24 × 24 CSS-piksler, og Shopifys beste praksis for tilgjengelighet (åpnes i en ny fane) anbefaler 44 × 44 for de viktigste kontrollene.
  • Legg i handlekurv. Meldinger om at handlingen lyktes eller feilet, blir lest opp (4.1.3). Klagen fra FTC mot en leverandør av tilgjengelighetsoverlegg (overlay) viste til et nettsted der skjermleseren ikke sa fra om at en vare var lagt i handlekurven, og der en grafikk med 5-stjerners vurdering ble lest opp som en «previous»-knapp (FTC-klagen (åpnes i en ny fane)).
  • Vurderinger, faner og trekkspillmenyer. Vurderinger har tekst som «4,5 av 5 stjerner». Trekkspillmenyer formidler om de er utvidet eller ikke.
  • Fast «Legg i handlekurv»-linje. Den må ikke dekke elementet i fokus helt når en tastaturbruker tabber seg nedover siden (2.4.11).
  • Video. Produktvideoer med tale har teksting (1.2.2 Captions (Prerecorded), A).

Hva bør du sjekke i handlekurven og ved innlogging?

Handlekurven er den siste siden de fleste temaer har full kontroll over, så test den helt frem til kasseknappen. Sjekk deretter at innlogging på kundekontoen ikke er avhengig av hukommelse eller av å skrive inn noe på nytt.

  • Handlekurvpanel. Fokus flyttes inn i panelet, blir der mens det er åpent, og går tilbake til handlekurvknappen når Escape lukker det, slik Shopifys beste praksis beskriver.
  • Varelinjer. Hvert antallsfelt har en ledetekst med produktnavnet, og hver fjernknapp sier hva den fjerner, for eksempel «Fjern Linskjorte, størrelse M».
  • Felt for rabattkode og merknader. Har ledetekst, og feil beskrives i tekst (3.3.1 Error Identification, A).
  • Kasseknappen. Kan nås med Tab, har synlig fokus og er ikke skjult bak faste elementer.
  • Innlogging (3.3.8). Shopifys kundekontoer bruker som standard passordløs innlogging med engangskode (åpnes i en ny fane). W3C sier at koder må kunne limes inn eller fylles ut automatisk, og at blokkering av innliming eller passordbehandlere bryter kriteriet. CAPTCHA-er der man gjenkjenner objekter, er tillatt på nivå AA, men CAPTCHA-er med gåter eller regnestykker trenger en annen metode (W3C (åpnes i en ny fane)).

Her spiller forskjellene mellom plattformene en rolle. I Shopify støttes checkout.liquid ikke lenger (åpnes i en ny fane) for trinnene informasjon, frakt og betaling, så det meste av HTML-koden i kassen kommer fra Shopify og ikke fra temaet ditt. Test kasse-appene og tilpasningene du legger til. I WooCommerce er kassen en side på WordPress-nettstedet ditt. WooCommerce sier at kjernegrensesnittet i stor grad er i samsvar med WCAG 2.2 AA (erklæringen ble sist oppdatert 1. april 2025), men temaet og utvidelsene dine kan likevel ødelegge dette (WooCommerce (åpnes i en ny fane)).

Hvordan tester du en nettbutikk mot denne sjekklisten?

Kombiner en automatisk skanning med et kjøp som bare gjøres med tastatur og en kort sjekk med skjermleser, på hver sidetype.

  1. Automatisk skanning. Verktøy som axe, WAVE eller Lighthouse fanger opp problemer med kontrast, alt-tekst, ledetekster og tomme lenker. Shopifys Theme Store krever en gjennomsnittlig Lighthouse-score for tilgjengelighet på minst 90 på forsiden, kolleksjonssider og produktsider. Det er et minstekrav, ikke samsvar med standarden: W3C sier at verktøy ikke kan avgjøre tilgjengelighet alene (åpnes i en ny fane).
  2. Kjøp kun med tastatur. Gå fra forsiden til et produkt via menyen eller søket, filtrer, velg en variant, legg varen i handlekurven, åpne handlekurven og kom frem til kasseknappen uten å bruke mus.
  3. Stikkprøve med skjermleser. Lytt med VoiceOver eller NVDA til produktnavn, pris, variantstatus og bekreftelsen når varen legges i handlekurven.
  4. Test på nytt etter endringer. Temaoppdateringer og nye apper kan gjøre rettelser ugjort.

Vår gratis skanning dekker trinn 1 på en forside, en kolleksjonsside, en produktside, en handlekurvside og en innholdsside, i ekte Chromium med axe-core. Rapport om universell utforming tester opptil 25 sider, legger til trinn 2 som en handletest kun med tastatur frem til kasseknappen, gir deg koden før og etter rettelsen og inneholder en sjekkliste for trinn 3, som krever at et menneske tester med skjermleser. Ingen av dem garanterer samsvar med ADA eller WCAG.

Ofte stilte spørsmål

Er WCAG 2.2 et lovkrav for nettbutikker i USA?

Det amerikanske justisdepartementet (Department of Justice) har ingen ADA-forskrift som fastsetter en webstandard for private virksomheter, og veiledningen om nettsteder fra 2022 (åpnes i en ny fane) viser til WCAG som nyttig veiledning. Kravbrev (demand letters) viser ofte til WCAG 2.1 eller 2.2 AA, så snakk med en advokat om dine konkrete forpliktelser.

Oppfyller du WCAG 2.1 AA når du oppfyller WCAG 2.2 AA?

Ja, i praksis. WCAG 2.2 beholder alle suksesskriteriene i WCAG 2.1 unntatt 4.1.1 Parsing, som W3C fjernet fordi det var foreldet.

Hva er minste målstørrelse i WCAG 2.2?

Etter 2.5.8 må klikk- og trykkflater være minst 24 × 24 CSS-piksler, med mindre en sirkel på 24 px sentrert på hver mindre flate ikke berører andre flater eller sirklene deres. Unntatt er lenker inne i setninger, nettleserkontroller uten egen styling, visninger der utformingen er avgjørende, og flater der det finnes en likeverdig kontroll som oppfyller kravet.

Betyr en Lighthouse-score på 100 for tilgjengelighet at butikken min er i samsvar med WCAG?

Nei. Automatiske verktøy oppdager bare en del av feilene, og WebAIM påpeker at fravær av påviste feil ikke betyr at en side er tilgjengelig eller i samsvar med standarden.

Bryter innlogging med passord med 3.3.8?

Ikke i seg selv. Et passordfelt oppfyller kriteriet når folk kan lime inn i det og bruke en passordbehandler. Det er blokkering av innliming eller autofyll som bryter kriteriet.

Hvor ofte bør jeg teste butikken min på nytt?

Test på nytt etter hver temaoppdatering, hver ny app og hver større endring i malene, og ta jevnlige stikkprøver av kjøpsflyten, siden apper kan legge inn ny HTML-kode uten forvarsel.

Kilder

Alle veiledninger