Tillgänglighet i Magento och Adobe Commerce

23 oktober 2026Uppdaterad 26 oktober 2026

Vad Adobe säger att butiken själv ansvarar för i Magento och Adobe Commerce, vad deras rapporter visar och hur du kontrollerar tema, produkter och kassa.

Det här är teknisk vägledning och inte juridisk rådgivning. För tolkningsfrågor om Lag (2023:254) om vissa produkters och tjänsters tillgänglighet, vänd dig till Post- och telestyrelsen (PTS).

Magento Open Source och Adobe Commerce används ofta av butiker med egna anpassningar: ett barntema, några moduler och en utvecklare som har ändrat kassan. Det gör att tillgängligheten sällan går att läsa av ur plattformen. Vi har läst Adobes egna dokument och tillgänglighetsrapporter i oktober 2026 för att se vad de säger och vad de lämnar åt butiken. Det som gäller Adobe har en källa sist. Vi citerar inte dokumenten ordagrant.

Vad Adobe säger om ansvaret

Adobes svar på vanliga frågor om tillgänglighet är kort: ansvaret för tillgängligheten ligger hos partnern eller handlaren. Adobe skriver att kunderna kan bygga vidare på temat Luma, skriva egna moduler eller hämta tillägg från Commerce Marketplace, och hänvisar till sin tillgänglighetsredogörelse (Accessibility Conformance Report, ACR). Sidan nämner inte Magento Open Source och anger ingen konformitetsnivå.

Det finns alltså inget löfte om att en standardinstallation klarar WCAG. Det är butikens sak att granska resultatet.

Vad redogörelserna visar

Vi läste två rapporter från Adobe.

Adobe Commerce, maj 2021 (WCAG 2.0 och 2.1, nivå A och AA). Den gäller administrationen och två butiksteman, Luma och Venia, som Adobe behandlar som innehåll. För Luma anger rapporten "Partially Supports" (stöds delvis) på kriterierna vi tittade på, med exempel som:

Innehåll som inte är text: CAPTCHA vid inloggning och i kassan saknar alternativ.
Information och relationer: rubrikstrukturen i kassan speglar inte innehållet.
Kontrast (minimum): blå hopplänktext på grått och vit text på röda meddelanden når inte kravet.
Tangentbord: huvudmenyns alternativ går inte att aktivera med tangentbord.
Synligt fokus: bland annat sidnumrering, vissa stängknappar i dialoger och betygsstjärnor saknar fokusmarkering.
Identifiering av fel: ett felmeddelande för postnummer syns men läses inte upp för skärmläsare.
Ledtexter/etiketter eller instruktioner: obligatoriska fält markeras bara med asterisk i vissa formulär, och e-postfältet i sidfoten har bara platshållartext.
Namn, roll, värde: kontrollen för antal per sida saknar namn.

Adobe Commerce Storefront, november 2025 (WCAG 2.0, 2.1 och 2.2, nivå A och AA). Rapporten beskriver produkten som en samling verktyg för att bygga moderna butiker och säger inte om Luma eller något annat tema har testats. Den anger "Does Not Support" för 1.3.1, eftersom det mesta av struktur och relationer inte förmedlas i koden, och "Partially Supports" för övriga kriterier vi tittade på. Läs den som en beskrivning av Adobes nyare butiksteknik, inte som ett besked om Luma.

Båda rapporterna gäller Adobe Commerce. Vi hittade ingen motsvarande rapport för Magento Open Source, och ett fynd i Luma-rapporten kan därför inte utan vidare överföras. Kontrollera din egen version och ditt eget tema.

Det butiken själv ansvarar för

Tema och färger

Adobes utvecklardokumentation säger att man ska bygga ett barntema som ärver från ett föräldratema (Blank eller Luma) i stället för att ändra de färdiga temana, och lägga bara de filer man vill ändra i barntemat. Föräldratemat anges i barntemats theme.xml. Layoutändringar ska helst göras som utökningar, inte som ersättningar. Ändra aldrig standardkoden, så att uppgraderingar inte skriver över dina rättelser.

Ett eget tema är samtidigt där tillgängligheten oftast försämras: nya färger som inte klarar kontrast, fokusramar som tagits bort med CSS (Synligt fokus) och menyer som bara öppnas med musen. Gå igenom guiden om tangentbord och synligt fokus.

Hyvä är ett tredjepartstema. Hyväs egen dokumentation säger att temat från version 1.3.0 implementerar tillgänglighetsfunktioner enligt WCAG 2.1 nivå AA, men också att en Hyvä-butik inte med automatik uppfyller nivån: temat är bara en del av butiken, allt innehåll måste vara tillgängligt, och anpassningar och tillägg ska testas. Det är Hyväs påstående, inte något vi har granskat.

Produktbilder och alt-text

I administrationen öppnar du produkten, viker ut Images and Videos, väljer bilden och fyller i fältet Alt text i bildens detaljfönster. Adobes sida anger ingen längdgräns, säger ingenting om dekorativa bilder och inte heller om alt-text per store view. Skriv därför texten för den vy som visar bilden och kontrollera hur den visas hos dig. Alt-text ska beskriva det kunden behöver för att välja, till exempel färg och vad som syns. Läs Alt-texter för produktbilder.

Sidtitlar och språk

Meta title och meta description fyller du i under Search Engine Optimization på produkten och kategorin. Adobe skriver att titeln ska vara unik för sidan och kortare än 70 tecken, och att den som standard bygger på produktnamnet. Det passar Sidans titel: kontrollera att titlarna skiljer sig åt mellan varianter och kategorier.

Språket sätts per store view under Stores, Configuration och General, i Locale Options. Där väljer du språkvarianten du vill tilldela vyn. Språkpaket finns på Commerce Marketplace under Translations & Localization. Dokumentationen nämner varken svenska eller språkattributet i sidans kod, så vi kan inte säga vad som sätts i lang. Titta efter lang="sv" i källkoden för Sidans språk.

Rubriker, formulär och länkar

Det är innehåll och mallar som du själv styr. Använd rubriknivåer i rätt ordning och inte stor text (Information och relationer), skriv länktexter som säger vart länken går (Syftet med en länk (i sammanhanget)) och ge egna formulär synliga etiketter (Ledtexter/etiketter eller instruktioner).

Kassan

Adobes dokumentation för klassisk kassa säger att kassan är byggd av UI-komponenter och att du ska lägga dina ändringar i en egen modul, inte i standardkoden. Fält, steg och mallar går alltså att ändra, men det kräver en utvecklare, och varje ändring kan införa fel som de i Luma-rapporten: fält utan etikett, fel som inte läses upp och beskrivningar som inte är kopplade till fältet. Läs de vanligaste felen i kassan och formulär och felmeddelanden i kassan.

Tillägg

Betalning, frakt, chatt, cookieruta och recensioner kommer ofta från tillägg. Adobe hänvisar själv till Marketplace för tillgänglighetstillägg, men säger inget om hur andra tilläggs tillgänglighet bedöms. Testa varje tillägg i kassan och på produktsidan.

Så kontrollerar du butiken

Kör det gratis testet på butik.nightwave.se/tillganglighet. Det läser källkoden på upp till fem sidor och hittar bland annat bilder utan alt-text, knappar utan namn och fält utan etikett. Det kontrollerar inte kontrast, synlig fokus eller tangentbord.
Gå igenom checklistan för det testet inte ser.
Gå igenom köpresan med bara tangentbordet: startsida, kategori, produkt, varukorg, kassa. Se så testar du själv.
Fyll i kassans fält fel med flit och kontrollera att felen står i text vid fältet.
Skriv ned varje fel med sida, element och kriterium. Det som beror på tema eller modul går till utvecklaren, det som beror på Adobes kod går till Adobe.

Vanliga fel att leta efter

Alt-text som saknas eller är samma för flera bilder.
Kontrast som sjunkit efter att färgerna ändrats i barntemat.
Fokusram som försvunnit efter egen CSS.
Huvudmeny som inte går att använda med tangentbord.
Fält i kassan som bara har platshållartext eller bara markerar obligatoriskt med asterisk.
Felmeddelanden som syns men inte kopplas till fältet.

Nästa steg

Börja med kassan och knappen "Lägg i varukorgen", eftersom ett fel där stoppar köpet. Ett fel du inte kan rätta ska du kunna beskriva i din tillgänglighetsinformation, tillsammans med hur kunden når dig. Vill du ha löpande kontroll finns ett abonnemang för 1 990 kr per månad exklusive moms för upp till 30 sidor. Det är teknisk granskning mot WCAG, inte juridisk rådgivning.

Vi har liknande genomgångar för Shopify, WooCommerce, Wix, Quickbutik, Squarespace, Centra, Norce och Abicart.