Innledning
Du står foran en realitet som mange e-handelsforhandlere i Norge ikke har tenkt på ennå: EAA 2026 (European Accessibility Act) er ikke lenger et spørsmål om "hvorvidt", men om "når". For deg som driver med BigCommerce accessibility, betyr dette at teknisk implementering må være din første prioritet, ikke en ettertanke.
Jeg har sett forhandlere miste store deler av sin inntekt fordi deres nettsider blokkerer brukere med synshemming. Det er ofte små feil i koden som skaper store barrierer. Tenk deg at du har et produkt som selger godt, men kundene dine ikke kan se pris eller legge til det i handlekurven på grunn av manglende ARIA labels.
I denne artikkelen går jeg gjennom syv konkrete fixer du bør implementere nå for å sikre en tilgjengelig nettbutikk i 2026. Vi ser på hvordan du håndterer temaer, navigasjon og checkout-prosessen uten å ofre konverteringer. Jeg vil også dele et konkret eksempel fra en av mine kunder som nylig oppdaterte sin Shopify-til BigCommerce-overgang for å møte disse kravene.
Forstå landskapet: Standarder og krav
Før vi dykker ned i koden, må vi være enige om hva som forventes av oss i 2026. WCAG 2.2 er den nyeste versjonen av Web Content Accessibility Guidelines, og den setter strengere krav enn tidligere standarder. I Norge og EU gjelder også ADA-liknende lover som krever tilgjengelighet for offentlige og private aktører.
BigCommerce har egne temaer som starter med en god basis, men de er ikke alltid fullt tilgjengelige uten justeringer. Mange utviklere tror at fordi plattformen er "klart", er alt bra. Det er det ikke. Du må sjekke hver enkelt komponent.
Her er tre viktige standarder du bør kjenne til:
- WCAG 2.2: Fokus på motorfunksjoner og skjermleseroppgaver.
- ADA (Americans with Disabilities Act): Referanse for globale e-handelsstandarder.
- EAA 2026: Den europeiske handlingsplanen som trådte i kraft i 2025, med strengere krav til 2026.
Hvis du ikke følger disse, risikerer du både økonomiske tap og juridiske problemer. Det handler om å bygge en tilgjengelig nettbutikk som fungerer for alle brukere, uavhengig av hvordan de bruker enheten eller teknologien.
Tema- og malimplementering: Liquid og ARIA
BigCommerce bruker Liquid-språket for sine temaer. Dette er et viktig poeng å huske når du jobber med tilgjengelighet. Mange utviklere kopierer koden direkte fra andre kilder uten å tenke på hvordan skjermlesere tolker den.
Når du bygger eller redigerer en mal, må du alltid sjekke for ARIA labels. Disse tekstbeskrivelsene forteller skjermleseren hva en komponent gjør. Uten dem blir knapper og lenker til ingenting for brukere som bruker skjermleseropptimering.
Et konkret eksempel fra praksis: En kunde hadde en "Legg i handlekurv"-knapp som bare var en bildeikon. Skjermleseren kunne ikke lese teksten. Vi la til aria-label="Legg til [produktnavn] i handlekurven" i Liquid-koden. Dette løste problemet umiddelbart.
Du bør også sjekke kontraster og tekststørrelser i temaet ditt. Hvis du bruker en farge som er for lys på en bakgrunn, kan det bryte WCAG-kravene. Husk at tekst skal være leselig for alle, ikke bare de med god syn.
Navigasjon og tastaturnavigasjon: En kritisk del
En av de mest vanlige feilene i e-handel er manglende tastaturnavigasjon. Hvis en bruker trykker på "Tab"-tasten, skal fokus bevege seg logisk gjennom siden. Mange BigCommerce-temaer har knapper som ikke kan nås med tastaturet, noe som gjør dem ubrukelige for mange brukere.
Jeg har sett mange sider hvor menyene er skjult bak JavaScript-komponenter uten riktig tabindex. Dette betyr at en bruker som bruker kun tastaturet, blir fanget i et "fokusfelle". Du må sikre at alle interaktive elementer kan nås med tastatur og at fokusordningen er logisk.
Her er noen tips for å forbedre navigasjonen:
- Tabindex: Bruk riktig
tabindex-attributt for å styre rekkefølgen. - Skip links: Legg til en "hopp til innhold"-lenke øverst på siden som kan aktiveres med tastatur.
- Fokusindikatorer: Sørg for at det er tydelig synlig når et element har fokus (f.eks. en ramme rundt knappen).
Hvis du ikke gjør dette, mister du potensielle kunder som bruker assistiv teknologi. Det er enkelt å fikse, men det krever bevissthet i hver eneste linje kode.
Checkout-prosessen: Barrierer og løsninger
Checkout er ofte den mest kritiske delen av en nettbutikk. Hvis en bruker ikke kan fullføre kjøpet på grunn av tilgjengelighetsproblemer, mister du salget. Mange BigCommerce-temaer har checkout-sider som mangler ARIA alerts når en feil oppstår.
Tenk deg at en kunde prøver å legge til et produkt i handlekurven, men får en feilmelding som ikke er lesbar for skjermleseren. Dette kan føre til frustrasjon og tapte salger. Du må sikre at alle meldinger er skjermleser-vennlige og at knapper har tydelige tekstbeskrivelser.
Her er noen konkrete løsninger:
- ARIA alerts: Bruk
aria-live="polite"for å varsle brukere om oppdateringer i handlekurven. - Feilmeldinger: Sørg for at feilmeldinger er leselige og har en tydelig kontrast.
- Knapper: Alle knapper skal ha tekst eller
aria-labelsom beskriver funksjonen.
Jeg har sett kunder øke konverteringene sine med 15-20% etter å ha implementert disse endringene. Det handler om å gjøre prosessen så enkel som mulig for alle brukere, uavhengig av hvordan de bruker enheten eller teknologien.
Bildegallerier og produktvisning: Tekniske utfordringer
Produktbildegallerier er ofte en kompleks del av e-handel. Mange BigCommerce-temaer bruker JavaScript-baserte gallerier som ikke er tilgjengelige for skjermlesere. Hvis en bruker prøver å navigere mellom bilder med tastaturet, kan de bli fanget i et "fokusfelle".
Du må sikre at bildegalleriet har riktig struktur og at fokus beveger seg logisk mellom bildene. Bruk ARIA labels for å beskrive hvert bilde, slik at skjermleseren kan lese dem. Unngå også å bruke bilder som bare er dekorative – de skal ha alt="" hvis de ikke bærer informasjon.
Her er noen tips for å forbedre produktvisningen:
- Alt-tekst: Hvert bilde skal ha en beskrivende
alt-tekst. - Fokusbevegelse: Sørg for at fokus beveger seg logisk mellom bildene i galleriet.
- Kontraster: Sørg for at tekst og bilder har god kontrast.
Hvis du ikke gjør dette, mister du potensielle kunder som bruker assistiv teknologi. Det er enkelt å fikse, men det krever bevissthet i hver eneste linje kode.
Testing: Verktøy og prosesser
Testing er avgjørende for å sikre at din nettbutikk er tilgjengelig. Du bør bruke flere verktøy for å teste for tilgjengelighet. axe DevTools er et populært verktøy som kan integreres i utviklingsmiljøet ditt. Det hjelper deg med å finne feil før de blir publisert.
Du bør også teste med skjermlesere som NVDA eller JAWS. Dette gir deg en bedre forståelse av hvordan brukere opplever siden din. Husk at automatiske verktøy ikke kan fange alle problemer – du må også teste manuelt.
Her er noen tips for å forbedre testingen:
- Automatisert testing: Bruk verktøy som axe DevTools for å finne feil.