Många e-handelsföretag i Sverige tror att tillgänglighet handlar om att lägga till en textbeskrivning på bilder. Det är inte sant. Rättgörande av koden krävs för att uppfylla lagkrav och undvika rättegångar under 2026. Den nya lagen i EU, EAA (European Accessibility Act), träder i kraft med full effekt nästa år. Om du säljer digitala tjänster eller fysiska varor online måste din webbutik fungera för alla användare, inklusive de som använder skärmläsare eller navigerar via tangentbordet.
Teknisk teknikutveckling är nyckeln till framgång här. Du kan inte bara installera en app och vara klar. Du måste förstå hur koden fungerar under huven. BigCommerce är ett kraftfullt plattform, men det krävs noggrann hantering av Liquid-filer och temastruktur.
Denna guide fokuserar på konkreta steg för att fixa tillgänglighetsproblem direkt i tekniken. Vi tittar på hur du uppdaterar din webbutik så den följer WCAG 2.2-riktlinjerna. Vi kommer också att se hur verktyg som Accessio.ai kan hjälpa dig att automatisera delar av processen utan att förlora kontrollen över koden.
Grundläggande begrepp för tillgänglighet
För att fixa problem måste du först förstå dem. Tillgänglighet handlar om att göra digital information och verktyg användbara för så många människor som möjligt. Det inkluderar personer med synnedsättning, hörselnedsättning eller motoriska nedsättningar.
WCAG 2.2 är den senaste versionen av riktlinjerna. Den introducerade nya krav kring fokusindikatorer och automatisk upptäckt av språk. Om du inte följer dessa kan din butik bli oacceptabel för myndigheter.
ARIA-labels är en viktig del av tekniken. ARIA står för Accessible Rich Internet Applications. Dessa attribut hjälper skärmläsare att förstå vad en knapp gör eller vilken information som visas i en tabell. Utan dem ser en användare med nedsatt syn bara tomma knappar eller text utan kontext.
Du måste också tänka på kontrast. Texten måste vara tydlig mot bakgrunden. Många BigCommerce-teman använder ljusa färger som kan bli för svaga för personer med daltonsyn. Justera färgkoder i CSS-filerna för att öka kontrasten.
Hur du hanterar BigCommerce-adminpanelen
Din administration är där konfigurationen sker, men koden ligger ofta i temafiler. När du loggar in på din BigCommerce-adminpanel kan du se vilka teman som är aktiva. Om du använder ett standardtema kan du ändra inställningar direkt i panelen för att påverka tillgängligheten.
Gå till Design > Tema. Här finns ofta en meny för tillgänglighet. Se till att alla valfria element är markerade med tydliga ikoner eller text. Undvik att använda "custom HTML" om du inte vet vad du gör. Det kan introducera koder som bryter mot standarderna.
Om du behöver redigera kod måste du göra det i Liquid-filerna. Liquid är BigCommerces templating language. Du hittar dessa filer under Design > Tema > Kod. Var försiktig här. En felaktig ändring kan bryta hela butiken.
Felsökning av kod
När du redigerar en fil, spara den och testa i din webbläsare. Om sidan inte laddas eller om texten försvinner har du gjort ett misstag. Använd F12 i din webbläsare för att öppna utvecklarverktygen. Klicka på Elements för att se HTML-strukturen.
Kontrollera om alla element har tillräcklig kontrast. Om inte, ändra färgkoden i CSS-filen. Titta också på ARIA-labels. Se till att de är korrekta och inte tomma. En knapp ska ha en label som beskriver vad den gör, t.ex. "Lägg till i varukorg".
Automatisering med Accessio.ai
Att göra alla ändringar manuellt tar lång tid. Det finns verktyg som kan hjälpa dig att automatisera processen. Accessio.ai är ett sådant verktyg. Det använder AI för att analysera din webbutik och hitta tillgänglighetsproblem.
När du installerar Accessio.ai skannar det hela sidan efter fel. Det hittar saknade ARIA-labels, låg kontrast eller felaktiga strukturer. Verktyget ger dig sedan en rapport med förslag på hur du kan fixa problemen.
Du behöver inte skriva koden själv för varje ändring. Accessio.ai genererar ofta kodsnuttar som du kan kopiera och klistra in i dina Liquid-filer. Det sparar tid och minskar risken för mänskliga fel.
Men var försiktig. AI kan ibland ge felaktiga förslag. Granska alltid varje ändring innan du publicerar den. Tillgänglighet är en seriös fråga, inte något man kan överlåta helt till en robot.
Kontrast och färgjusteringar
Kontrast är ett av de vanligaste problemen i BigCommerce-butiker. Många teman använder ljusa bakgrunder med mörk text, men färgvalen är ofta för svaga. För att fixa detta måste du redigera CSS-filerna.
Gå till Design > Tema > Kod. Hitta filen som styr färger, t.ex. theme.css eller styles.css. Sök efter färgkoder och justera dem för att öka kontrasten. Använd en onlineverktyg för att kontrollera kontrastnivåer innan du sparar.
Om du använder bilder kan du också lägga till textbeskrivningar i CSS:en. Detta hjälper skärmläsare att läsa ut bilden korrekt. Se till att alla viktiga bilder har alt-attributet fyllt med relevant information.
Hantering av formulär och knappar
Formulär är kritiska för e-handel. Kunden måste kunna fylla i ett formulär utan problem. Om en knapp saknar en label kan skärmläsaren inte veta vad den gör.
I Liquid-filerna, se till att varje <button>-element har en text eller ett aria-label-attribut. Om du använder ikoner istället för text, måste du lägga till en beskrivning. T.ex.:
<button aria-label="Lägg till i varukorg">
<i class="icon-cart"></i>
</button>
Om du har ett formulär med flera fält, se till att varje input-fält är kopplat till en label. I Liquid kan du använda for-loopar för att generera fält dynamiskt. Men var noga med att inte glömma att lägga till labels i looparna.
Hantering av tabeller och listor
Tabeller är ofta svåra att hantera för tillgänglighet. Om en tabell saknar rubriker blir den oläslig för skärmläsare. Du måste använda <th>-element för kolumnrubriker och <caption> för en överskrift.
I Liquid-filerna, se till att din tabellstruktur följer dessa regler. Om du genererar tabeller dynamiskt med loopar, kontrollera att varje cell har rätt attribut. Undvik att använda div-element istället för table. Det gör det svårt för skärmläsare att navigera.
Listor är också viktiga. Använd <ul> och <li>-taggar för listor. Om du använder en lista för navigation, se till att den har rätt struktur. En felaktig lista kan göra det omöjligt för användaren att hoppa mellan sidor.
Hantering av media och bilder
Bilder är viktiga för e-handel. Men de måste vara tillgängliga. Varje bild behöver ett alt-attribut med en kortfattad beskrivning.