Många e-handelsbutiker står inför en verklighet som många undviker: rättsliga risker och skadeståndskrav. Tillgänglighet är inte längre bara ett "nice-to-have" eller en god gärning. Det är en juridisk förpliktelse i Sverige, enligt lagen om anpassning av informationssamhället (EAA). Om du driver en Magento 2-butik måste du vara medveten om hur plattformens kodgenerering påverkar skärmläsare och tangentbordsnavigation.
I denna artikel går vi igenom konkreta tekniska åtgärder som du kan ta direkt. Vi tittar på hur du hanterar ARIA-labels, optimerar för skärmläsare och säkerställer att din butik fungerar utan mus. Vi kommer också att se på hur AI-verktyg kan hjälpa till med kodreparationer snarare än bara ytlösningar.
Varför är teknisk tillgänglighet avgörande för Magento?
Det finns en stor missuppfattning om vad som krävs för att en webbplats ska vara tillgänglig. Det handlar inte bara om att ha en kontrastrikt design. Det handlar om strukturell kod och hur information presenteras i DOM-trädet. När en användare använder en skärmläsare, läses texten upp baserat på den struktur du har byggt. Om du saknar korrekta etiketter blir sidan oläslig för dessa användare.
WCAG 2.2 är den senaste versionen av riktlinjerna och infördes i Sverige med nya lagkrav som träder i kraft under 2026. Dessa krav är striktare än tidigare standarder. De kräver att alla interaktiva element på en Magento-sida måste vara tillgängliga via tangentbordet. Detta inkluderar allt från menyval till "Lägg i varukorg"-knappar.
WCAG 2.2 och nya lagkrav i Sverige
När EAA-lagen (lagen om anpassning av informationssamhället) uppdateras, blir kravet på att alla offentliga webbplatser måste vara tillgängligt. Även privata butiker kan drabbas av diskrimineringsanspråk om de inte följer dessa standarder. Magento 2 är en kraftfull plattform, men den genererar kod som ibland saknar denna struktur ur boxen. Det är din uppgift som utvecklare eller administratör att fylla i luckorna.
Hur Magento-adminpanelen påverkar kodgenerering
När du skapar innehåll i Magento-adminpanelen, genereras XML-filer och JavaScript-kod automatiskt. Ibland lämnar denna process ut "ren" HTML utan tillräcklig semantik. Om du till exempel skapar en ny produktkategori via panelen kan den genererade sidan sakna korrekta rubriknivåer. Detta leder till att skärmläsare hoppar över viktig information eller tolkar strukturen felaktigt.
Steg-för-steg: Implementering av ARIA-labels
ARIA-labels är avgörande för att beskriva funktionen hos en knapp eller ett fält som saknar textinnehåll. I Magento 2 kan du ofta hitta knappar med icke-tillgängliga ikoner. Du måste lägga till aria-label-attributet manuellt i din tema-kod eller via en modul.
Använda aria-label i produktbeskrivningar
När du redigerar en produkt, se till att rubriken är tydlig. Om du använder en bild för att representera produkten, måste bilden ha ett alternativ textattribut som beskriver vad bilden visar. Detta är inte bara bra för skärmläsare utan också för SEO. En korrekt strukturerad produktbeskrivning hjälper sökmotorer att förstå innehåll bättre.
Hantera knappar och ikoner i Magento 2
I din tema-mapp, gå till webapp/js eller view/frontend/web/js. Här kan du hitta JavaScript-filer som hanterar interaktioner. Du måste modifiera dessa filer så att de lägger till aria-label-attributet på knappar som saknar text.
Exempel på kodreparation:
// Före: En knapp utan text eller aria-label
<button class="action-to-cart">
<span class="icon-shopping-cart"></span>
</button>
// Efter: Lägg till aria-label för att beskriva funktionen
<button class="action-to-cart" aria-label="Lägg till i varukorg">
<span class="icon-shopping-cart"></span>
</button>
Detta är en enkel åtgärd som kan göras via kodredigering eller genom att använda ett verktyg som Accessio.ai för att automatiskt generera dessa etiketter baserat på kontexten.
Optimering av skärmläsarstöd och fokusindikatorer
En av de vanligaste bristerna i Magento 2 är att fokusindikatorer saknas eller är svåra att se. När en användare navigerar med tangentbordet, måste det vara tydligt vilken element som har fokus. Om du använder CSS för att dölja standardfokusringar, måste du istället skapa en egen indikator.
Gör fokusindikatorer synliga
Gå till din temas webapp/css eller view/frontend/web/css mapp. Här kan du lägga till CSS-regler som säkerställer att alla interaktiva element har en synlig fokusring.
Exempel på CSS:
/* Säkerställ synlig fokus för alla interaktiva element */
button:focus, a:focus, input:focus {
outline: 2px solid #0056b3;
outline-offset: 2px;
}
Hantera focus-visible korrekt
WCAG 2.2 kräver att fokusindikatorer endast visas när användaren använder tangentbordet, inte musen. Detta kan uppnås genom att använda focus-visible. Om du har kod som tvingar fram en indikator för musanvändare måste du justera detta för att undvika konflikt med skärmläsare.
Undvik "Focus Traps" i moduler och popup-fönster
När du använder moduler eller popup-fönster i Magento 2, se till att fokus inte fastnar inne i fönstret när användaren förs att navigera bort. Detta kallas för en "focus trap". För att undvika detta måste du programmera så att fokus återställs till startpunkten när popup-fönstret stängs.
Tekniska åtgärder för strukturell kod och DOM-träd
Struktur är nyckeln till tillgänglighet. Om din DOM-struktur är felaktig, kommer skärmläsare att tolka sidan fel. Detta kan hända om du använder rubriknivåer på ett ologiskt sätt eller om du saknar korrekta liststrukturer.
Korrekt användning av rubriknivåer (H1-H6)
I Magento 2 kan det vara lätt att använda flera h1-rubriker, särskilt om du importerar innehåll från olika källor. Detta är felaktigt enligt WCAG. Du bör alltid ha en enda h1 per sida som beskriver sidans huvudtema. Underliggande rubriker (h2, h3) ska skapa en logisk hierarki.
Säkerställ korrekta liststrukturer (ul/li)
När du listar produkter eller kategorier, använd alltid <ul> och <li>-taggar. Undvik att använda <div>-element för att simulera listor. Detta gör det svårt för skärmläsare att förstå strukturen. Om du använder en modul som genererar HTML-dynamiskt, se till att den använder korrekta taggar.
Hantera tabeller och datamängder korrekt
Om din butik visar produktdata i tabeller, se till att varje cell har ett tydligt innehåll. Undvik komplexa strukturer med colspan eller rowspan om det inte är absolut nödvändigt. Om du måste använda dessa attribut, se till att scope-attributen (scope="row" eller scope="cross-header") används korrekt för att hjälpa rubriker att förstå tabellens struktur.