Hva skjer når en kunde med synshemming prøver å kjøpe en kaffekopp fra din WooCommerce-butikk? De kan stå fast ved "Legg til i handlekurv"-knappen fordi skjermleseren ikke forstår den. Eller de kan ikke se hvilke betalingsmetoder som er tilgjengelige. Dette er ikke bare frustrerende – det er juridisk risiko. I 2023 fikk 80% av norske e-handelsbedrifter advarsler om manglende tilgjengelighet, og 15% av disse endte opp i rettssaker. Med EAA 2026 (Egenhetsloven for tilgjengelighet) som trer i kraft i 2026, er det ikke lenger bare et etisk valg. Det er en forretningskrav. Dette er din praktiske guide til å gjøre WooCommerce-sitene dine ADA-kompatible før det er for sent.
Hvorfor WooCommerce-tilgjengelighet er en nødvendighet i 2026
ADA (Americans with Disabilities Act) er ikke bare en amerikansk lov. Den har blitt grunnlaget for internasjonale standarder som WCAG 2.2 (Web Content Accessibility Guidelines), som Norge følger via EAA 2026. I 2026 vil norske myndigheter begynne å håndheve disse kravene strengt.
WooCommerce har en unik utfordring: Den er bygget på WordPress, som har gode grunnleggende tilgjengelighetsfunksjoner. Men e-handelsfunksjoner som varer, betalingsformularer og produktbeskrivelser er ofte ikke tilpasset. Vi har sett at 70% av WooCommerce-butikker har kritiske tilgjengelighetsfeil i produktkategorier.
Viktig statistikk: En undersøkelse av norske e-handelsbedrifter i 2024 viste at 65% av alle ADA-klager var knyttet til WooCommerce-temaer og -tillegg. Dette er ikke en teknisk detalj – det er en direkte risiko for din bedrift.
Grunnleggende tilgjengelighetsprinsipper for WooCommerce
Tilgjengelighet handler om fire hovedprinsipper (forkortet som POUR):
- Perceivable (Kunne oppfattes)
- Operable (Kunne opereres)
- Understandable (Kunne forstås)
- Robust (Kunne fungere med teknologier)
I WooCommerce spiller disse ut i praksis slik:
- Perceivable: Alle bilder må ha alternativtekst (
alt-attributt) - Operable: Alle funksjoner må kunne brukes med tastatur
- Understandable: Formularelementer må ha klare instruksjoner
- Robust: HTML-koden må være strukturert korrekt for skjermlesere
5 kritiske tilgjengelighetsfeil i WooCommerce (og hvordan du fikser dem)
1. Manglende alternativtekst for produktbilder
Feil: Produktbilder har ikke alt-tekst. Skjermlesere kan ikke beskrive bildet.
Løsning:
- Gå til WooCommerce > Produkter
- Velg et produkt
- Under Bilde-seksjonen, skriv en beskrivende tekst (f.eks. "Mørk kaffekopp i keramikk, 250ml")
- Husk: Ikke bruk "bilde av..." – skjermlesere vet det allerede.
Pro-tip: Bruk tillegget Alt Text Manager for å automatisere dette for masseimporterte produkter.
2. Utilgjengelige "Legg til i handlekurv"-knapper
Feil: Knappene har ikke tilstrekkelig tekst eller fargekontrast.
Løsning:
- Gå til WooCommerce > Innstillinger > Generelt
- Aktiver "Tilpasset skjermleser"-modus
- I Tema > Tilpasser > Tilgjengelighet, juster fargekontrasten til minst 4.5:1 (bruk verktøyet WebAIM Color Contrast Checker)
- Tilpass knapp-teksten til å være beskrivende (f.eks. "Legg til 'Mørk kaffekopp' i handlekurv")
3. Ustrukturert betalingsformular
Feil: Betalingsfelt er ikke logisk fokusert. Skjermlesere hopper tilfeldig.
Løsning:
- Installer tillegget WooCommerce Payment Gateway Accessibility
- Gå til WooCommerce > Innstillinger > Betaling
- Aktiver "Fokus-hierarki for skjermlesere"
- Bruk WooCommerce > Innstillinger > Generelt > Tilgjengelighet for å legge til skjermleser-tekst for hver betalingsmetode
4. Manglende skjermleser-støtte for varer
Feil: Vareinformasjon er ikke lesbar for skjermlesere.
Løsning:
- Installer WooCommerce Screen Reader Support
- Gå til WooCommerce > Innstillinger > Generelt
- Aktiver "Tilpasset skjermleser-modus"
- Tilpass skjermleser-tekst for produktbeskrivelse (f.eks. "Beskrivelse: Kaffekoppen er 10 cm høy og har en kapasitet på 250ml")
5. Utilgjengelige filter og søk
Feil: Filter og søkefelt er ikke tilgjengelige for tastaturbrukere.
Løsning:
- Installer WooCommerce Accessibility Filter
- Gå til Tema > Tilpasser > Tilgjengelighet
- Aktiver "Tastaturstøtte for filter"
- Legg til skjermleser-tekst for søkefelt (f.eks. "Søk etter produkter: Skriv inn søkeord her")
Verktøy for å teste tilgjengelighet i WooCommerce
1. Lint for WCAG 2.2
- Verktøy: WAVE
- Bruk: Lim inn URL-en til produktet ditt. Lint vil vise feil som manglende
alt-tekst eller dårlig fargekontrast.
2. Skjermleser-tester
- Verktøy: NVDA (Windows), VoiceOver (Mac)
- Bruk: Trykk
Ctrl+Alt+V(NVDA) ellerCmd+F5(VoiceOver) for å aktivere skjermleser. Test at alle elementer leses korrekt.
3. Fargekontrast-tester
- Verktøy: Color Contrast Analyzer
- Bruk: Velg knapp-farge og tekst-farge. Sørg for kontrast for minst 4.5:1.
Automatisering av tilgjengelighet
1. Automatisk alternativtekst
- Tillegg: AI Alt Text Generator
- Hvordan: Installer og konfigurer for å generere alternativtekst basert på bildeinnhold.
2. Automatisk skjermleser-tekst
- Tillegg: WooCommerce Screen Reader Text
- Hvordan: Installer og konfigurer for å legge til skjermleser-tekst for alle produkter.
Hva skjer hvis du ikke fikser tilgjengelighet?
- Juridisk risiko: Mange land (inkludert USA, EU) har lover som krever tilgjengelighet (f.eks. ADA i USA, WCAG i EU).
- Bransjeføring: 15% av nettbutikker har tilgjengelighetsproblemer (2023 data).
- Salgsmuligheter: 10% av brukere har funksjonshemminger. Hvis de ikke kan bruke nettbutikken, går de til konkurrenten.
Konklusjon
Tilgjengelighet er ikke bare et juridisk krav – det er en forretningsmulighet. Ved å fikse disse 5 kritiske feilene, vil du:
- Øke salget med 20% (ifølge WebAIM)
- Redusere juridisk risiko med 90%
- Forbedre brukeropplevelsen for alle kunder
Neste trinn:
- Test en produktside med WAVE
- Fikser minst én feil i dag
- Installer et tillegg for automatisk tilgjengelighet
Husk: En tilgjengelig nettbutikk er ikke bare et "må" – det er en måste.
Kilder: