Tillgänglighetsanpassad webbplats: checklista med 10 punkter

En tillgänglig webbplats gör det enklare för fler människor att ta del av ditt innehåll, hitta produkter och handla online. Det förbättrar inte bara användarupplevelsen, utan kan också hjälpa dig att nå fler kunder. Sedan den 28 juni 2025 gäller nya tillgänglighetskrav för bland annat e-handelstjänster i Sverige. Kraven regleras i lagen (2023:254) om vissa produkters och tjänsters tillgänglighet, som bygger på EU:s tillgänglighetsdirektiv (EAA). Vissa mindre företag är undantagna från kraven.

I den här guiden går vi igenom vad tillgänglighetskraven innebär för e-handlare och ger dig en checklista med tio konkreta åtgärder för att göra din webbplats mer tillgänglig.

Vad innebär tillgänglighetskraven för webbplatser?

I Sverige regleras tillgängligheten för vissa digitala tjänster genom lagen (2023:254) om vissa produkters och tjänsters tillgänglighet, även kallad tillgänglighetslagen. Lagen bygger på EU:s tillgänglighetsdirektiv (European Accessibility Act, EAA) och började tillämpas den 28 juni 2025. Lagen omfattar bland annat e-handelstjänster som riktar sig till konsumenter. Syftet är att personer med funktionsnedsättning ska kunna använda tjänsterna, exempelvis för att hitta produkter, navigera på webbplatsen och genomföra köp. Mikroföretag som tillhandahåller tjänster är undantagna från lagens tillgänglighetskrav. Med mikroföretag avses i regel företag med färre än tio anställda och en årsomsättning eller balansomslutning på högst två miljoner euro. Även företag som inte omfattas av lagkraven kan ha nytta av att göra sina webbplatser mer tillgängliga. Det förbättrar användarupplevelsen och gör det enklare för fler kunder att handla.

Vad är riktlinjerna för tillgängligt webbinnehåll?

WCAG (Web Content Accessibility Guidelines) är internationella riktlinjer för digital tillgänglighet. De används som stöd för att skapa webbplatser som fungerar för personer med olika behov och förutsättningar. I Europa är standarden EN 301 549 också viktig. Den innehåller tillgänglighetskrav för digitala produkter och tjänster och bygger delvis på WCAG. Att uppfylla WCAG innebär dock inte automatiskt att alla krav i den svenska tillgänglighetslagen är uppfyllda.

Nivå A omfattar de mest grundläggande kriterierna för tillgänglighet, till exempel att webbplatsens funktioner ska kunna användas med tangentbord. Nivå AA omfattar ytterligare krav, bland annat på färgkontrast, och är den nivå som många webbplatser strävar efter. Shopify arbetar kontinuerligt med att testa och förbättra tillgängligheten för att uppfylla nivå AA och erbjuder resurser om tillgänglighet för utvecklare. Nivå AAA är den högsta nivån och omfattar ytterligare kriterier, exempelvis teckenspråkstolkning av förinspelat ljudinnehåll i videor, högre kontrastkrav för text och krav på att göra innehåll lättare att läsa.

Dessutom erbjuder WCAG ett ramverk för webbtillgänglighet som innehåller fyra centrala principer:

• Uppfattningsbar: Förse varje meningsfull bild med alternativtext så att besökare som använder hjälpmedel som skärmläsare förstår vad som visas på skärmen.
• Hanterbar: Undvik design som förutsätter navigering enbart med mus, och se till att navigering, rullgardinsmenyer och formulär fungerar med både tangentbord och mus.
• Begriplig: Håll etiketter och felmeddelanden tydliga och ge icke-visuella ledtrådar så att besökare alltid vet vad de ska göra härnäst.
• Robust: Använd semantisk HTML när du kodar så att hjälpmedel och framtida webbläsare kan tolka ditt webbinnehåll utan problem.

Varför webbtillgänglighet är viktigt

Att göra din webbplats tillgänglig är viktigt av fler skäl än att följa lagen. Sara Mote, kreativ chef på den digitala designbyrån Studio Mote, säger att även om tillgänglighet är en juridisk fråga som hon rekommenderar att kunder diskuterar med sitt juridiska ombud, är det helt enkelt också god design.

"Vissa designval är bästa praxis inte bara för tillgänglighet, utan för hela användarupplevelsen, eftersom det finns mycket överlappning", säger hon. "Design har kraften att fängsla en publik, förmedla information och väcka känslor, vilket direkt påverkar konsumenters beslut. Enkelt uttryckt höjer god design kvaliteten på samtalen."

Några ytterligare skäl till varför webbtillgänglighet är viktigt:

• Etik: Enligt Statistiska centralbyrån (SCB) uppgav cirka 12 procent av befolkningen i Sverige mellan 16 och 65 år att de hade en funktionsnedsättning 2025. Det motsvarar omkring 786 000 personer. En tillgänglig webbplats gör det möjligt för fler att ta del av information och handla online.
• .
• Intäktspotential: Ur ett företagarperspektiv kan inkluderande design bidra till att öka intäkterna. Om dina sidor har ren kod, beskrivande alt-text och starka färgkontrastkvoter kan du bredda din publik och driva mer försäljning.
• Rykte: En otillgänglig webbplats kan också utlösa negativa rubriker eller kritik i sociala medier som framställer varumärket som likgiltigt inför inkludering, vilket kan urholka kundernas förtroende och i slutändan skicka potentiella köpare till andra webbplatser.
• Ansvar: Företag som omfattas av den svenska tillgänglighetslagen måste uppfylla de tillämpliga kraven. Post- och telestyrelsen (PTS) ansvarar för tillsynen av bland annat e-handelstjänster och kan vidta åtgärder om kraven inte uppfylls.

"Tillgänglighet handlar i grunden om kognitiv enkelhet", säger Sara. "Det är verkligen en fördel att tänka på detta i designen och göra val som låter en användare förflytta sig smidigt genom webbplatsen."

Checklista för webbtillgänglighet

1. Erbjud undertexter och ljudbeskrivningar för varje video
2. Använd rätt kontrastkvot
3. Låt användare ändra storlek eller byta till tillgängliga typsnitt
4. Lägg till ARIA-etiketter på knappar, ikoner och formulärfält
5. Inkludera en länk för att "hoppa till huvudinnehållet" högst upp på varje webbsida
6. Håll blinkande element under epilepsisäkra gränsvärden
7. Se till att popup-rutor fångar fokus och alltid erbjuder en tangentbordsvänlig stängningsknapp
8. Visa formulärfel i text och koppla dem programmatiskt till rätt fält
9. Skriv beskrivande uppmaningar
10. Kombinera automatiska skanningar med manuella kontroller

Här är praktiska exempel på tillgänglighetsåtgärder du kan vidta för din egen webbplats, sammanställda från WCAG-kriterierna, Shopifys bästa praxis och WebAIM-checklistor som översätter WCAG till ett enkelt språk:

1. Erbjud undertexter och ljudbeskrivningar för varje video

Undertexter och syntolkning gör videoinnehåll mer tillgängligt för personer med hörsel- eller synnedsättning. De hjälper fler besökare att ta del av innehållet och kan även bidra till att uppfylla relevanta tillgänglighetskrav. Dessutom kan sökmotorer indexera undertexten, vilket förbättrar videons sökbarhet.

Gymsharks webbplats innehåller till exempel inbäddade videor med undertexter aktiverade.

2. Använd rätt kontrastkvot

Håll en färgkontrastkvot på minst 4,5:1 för text och interaktiva element. En färgkontrastkvot på minst 4,5:1 säkerställer att text och viktiga visuella element kan sticka ut tydligt mot bakgrunden, vilket gör det läsbart för personer med synnedsättning, inklusive de med nedsatt syn och färgblindhet. Du kan använda verktyg som WebAIM:s Contrast Checker för att testa dina egna färgkombinationer och deras kontrastkvot.

ColourPop använder till exempel en kontrastkvot på 4,5:1 för att säkerställa jämn läsbarhet.

3. Låt användare ändra storlek eller byta till tillgängliga typsnitt

Att ge dina användare möjlighet att ändra textstorlek eller byta till mer tillgängliga typsnitt kan hjälpa personer med nedsatt syn, användare med dyslexi och äldre personer som har svårt att läsa liten eller tät text. Det kan hjälpa dem att fokusera, minska ansträngningen för ögonen och öka deras förståelse av texten.

Good Good Golf har en hel uppsättning tillgänglighetsalternativ, inklusive justering av typsnitt, på varje sida av sin webbplats.

4. Lägg till ARIA-etiketter på knappar, ikoner och formulärfält

ARIA-etikettering säkerställer att hjälpmedel kan tala om för användaren vad varje interaktivt element är och gör. Till exempel lägger klädmärket Taylor Stitch till ARIA-etiketter i sin webbplatskod så att skärmläsare kan tala om för användarna vad varje funktion gör.

5. Inkludera en länk för att "hoppa till huvudinnehållet" högst upp på varje webbsida

En knapp eller länk för att hoppa till huvudinnehållet låter de som navigerar med tangentbord och skärmläsaranvändare hoppa förbi menyer och sidhuvuden och gå direkt till huvudinnehållet. Det kan spara tid och minska frustrationen för alla som vill ha snabbare åtkomst utan extra tabbande eller scrollande.

Webbplatser kan lägga till en dold länk högst upp på sidan som bara blir synlig när den får fokus, vanligtvis före navigeringskoden i HTML, så att tangentbordsanvändare ser den först. CSS-kod gör att den bara visas när tabbtangenten trycks ner efter att sidan har laddats.

Taylor Stitch är ett exempel på en webbplats som gör detta. En knapp märkt "Skip to Content" dyker upp när användare trycker på tabbtangenten vid sidladdning.

6. Håll blinkande element under epilepsisäkra gränsvärden

Om en animation blinkar mindre än tre gånger per sekund ligger den inom WCAG:s riktlinjer. Utvecklare kan åstadkomma detta med CSS-stilar som ser till att övergången ligger under det gränsvärdet. Det är fallet på MVMT:s startsida, som använder CSS-koden för opacitet för att hålla animationer under det anfallsframkallande gränsvärdet.

Ease-in hjälper visuellt till att tona in animationen mjukt. Detta kan gynna allmänna användare genom att ge en smidigare, mer visuellt tilltalande layout, samtidigt som det kan minska visuellt kaos för personer med kognitiva funktionsnedsättningar. Rörelsekänsliga användare och personer med risk för epileptiska anfall gynnas också här, så att fler människor kan ta del av innehållet på ett säkert sätt.

7. Se till att popup-rutor fångar fokus och alltid erbjuder en tangentbordsvänlig stängningsknapp

När sidan laddas förhindrar det att tangentbords- och skärmläsaranvändare fastnar bakom en modal dialogruta om tangentbordsfokus automatiskt flyttas till det första fokuserbara elementet, som en stängningsknapp eller ett inmatningsfält. Fångat fokus gör det mycket lättare att stänga popup-rutor utan att använda mus.

På Brooklinens webbplats är till exempel stängningsknappen uppe till höger åtkomlig via tangentbord för användare som använder skärmläsare och/eller system för navigering enbart med tangentbord.

8. Visa formulärfel i text och koppla dem programmatiskt till rätt fält

När det handlar om felmeddelanden när användare skickar in saknad eller felaktig information i ett webbformulär är det bäst att inkludera ett tydligt textbaserat felmeddelande som skärmläsare, personer med kognitiva funktionsnedsättningar och blinda eller synsvaga användare kan ta del av.

På bilden nedan innehåller inmatningsfältet i Shopifys Dawn-tema en textutmatning för felet "ingen e-postadress" när en användare trycker på den grå knappen för att ladda ner ett tema.

9. Skriv beskrivande uppmaningar

Tydlig, beskrivande knapptext och ankartext för länkar kan hjälpa blinda och synsvaga användare som förlitar sig på skärmläsare att veta vad en knapp gör innan de aktiverar den. Det kan också hjälpa personer med kognitiva funktionsnedsättningar som gynnas av ett tydligt språk, liksom alla andra, eftersom specifik knapptext gör en sida lättare att skanna och använda.

På Brooklinens webbplats är den blå knappen i mitten till höger på sidan tydligt märkt "Find Your Store". Användare vet vad den gör utan att behöva hålla muspekaren över eller aktivera den.

10. Kombinera automatiska skanningar med manuella kontroller

Webbteam kan använda automatiska verktyg som Axe eller Lighthouse för att söka efter tillgänglighetsproblem. Du kan också använda särskilda Shopify-appar för tillgänglighet för att kontrollera din webbplats. "Det finns en hel inbyggd verktygslåda i Shopify för en del av de bästa metoderna för tillgänglighet", säger Sara. "Många av våra kunder använder en app som garanterar att de följer riktlinjerna, eller så betalar de för en helt extern granskning med ett högt specialiserat tillgänglighetsteam."

Att testa manuellt om det finns problem, helst med personer som använder skärmläsare eller lever med andra funktionsnedsättningar, kan fånga problem som automatiska verktyg missar. Detta gör att du kan identifiera tillgänglighetsluckor och åtgärda problem när du lanserar din webbplats och inför varje uppdatering.