Din hemsida måste vara tillgänglighetsanpassad från och med den 28 juni 2025, annars riskerar du att betala böter.
EU:s tillgänglighetsdirektiv kommer att börja gälla den 28 juni, och ställer en hel del krav på webbshopar och deras tillgänglighet. Direktivet kräver att företag anpassar sina digitala tjänster och produkter, så att de blir mer tillgängliga för personer med funktionsnedsättningar.
Då undrar ni säkert: “Följer min webbshop dessa direktiv? Vad betyder detta för mig? Berörs jag, och i så fall: bör jag göra något?”
Därför går jag igenom och sammanfattar vad dessa tillgänglighetsdirektiv handlar om, varför det är viktigt att följa dem och vad du kan göra för att säkra din webbshop.
Vad är EU:s tillgänglighetsdirektiv?
Syftet med direktivet är att se till att fler företag som driver e-handel har produkter och tjänster som inte exkluderar kunder pga funktionsnedsättningar.
Tidigare har det varit strikta krav på tillgängligheten för stora offentliga verksamheter, som statliga myndigheter, kommuner och regioner inom EU. Tillgänglighetsdirektivet 2025 ställer nu även dessa krav till mer privata aktörer.
Exempel på åtgärder som gör en webbsida mer tillgänglig:
Följ tillgänglighetsstandarder (WCAG)
Det finns redan en uppsättning av standardiserade riktlinjer (WCAG:s riktlinjer) som webbsidor bör följa för bättre tillgänglighet. Så följer man dessa riktlinjer för sin e-handel så checkar man också många punkter i tillgänglighetsdirektivet.
WCAG delas in i tre nivåer:
- Nivå A = Grundläggande tillgänglighet (många användare kan ändå ha svårt att navigera).
- Nivå AA = Standardkrav i lagar, gör webbplatser användbara för en bred publik.
- Nivå AAA = Högsta nivån, t.ex. extra hög kontrast och lättläst språk (svårt att uppnå på alla sidor).
För att uppfylla lagkrav i EU, så behöver webbsidan uppfylla kraven på nivå AA, vilket innefattar att webbsidan har:
- En bra text-kontrast: Minst 4,5:1 mellan normal text och bakgrund, och 3:1 för stor eller fetstiliserad text (Källa: Color Contrast Checker).
- Stöd för zoom & förstoring: Webbplatsen måste fungera vid 200 % förstoring utan att innehåll försvinner.
- Möjlighet till tangentbordsnavigering: Allt ska gå att använda utan mus, endast med tangentbord.
- Alternativ för bilder: Viktiga bilder behöver ALT-texter så att skärmläsare kan läsa upp dem.
- Tydliga länkar och knappar: Länkar ska ha beskrivande text, inte bara ”Klicka här”.
- Inga färg-beroende instruktioner: Använd inte bara färg för att visa information (till exempel röd text för felmeddelanden).
- Tydliga formulär-fel: Om en användare gör fel i ett formulär måste det tydligt visas vad felet är och hur det kan rättas.
- Rörligt innehåll & blinkningar: Inget får blinka snabbare än 3 gånger per sekund (för att undvika epileptiska anfall).
En bra text-kontrast
Texter ska enligt kraven kunna läsas utan svårighet för någon användare. Text ska vara lagom stor, möjlig att förstora utan att innehåll blir svårläst, och det ska vara bra kontrast mellan text och bakgrund.
Här är det viktigt att testa kontrastverkan mellan två eller flera färger med hjälp av digitala verktyg, som Color Contrast Checker.
Möjlighet till tangentbordsnavigering
Användare som enbart har tillgång till tangentbordsfunktioner ska kunna använda webbsidan. Det innebär att webbsidan måste gå att navigera med hjälp av tangenter som ersätter muspekarens funktioner (tab, enter, mellanslag, backsteg och piltangenter) eller liknande hjälpmedel.
När muspekaren inte är tillgänglig, är det också extra viktigt att ha tydliga fokus-indikatorer. Det motsvarar en liten färgram som visar vilket objekt som är markerat på sidan. Den ersätter därmed muspekarens huvuduppgift: att navigera sidan och klicka på saker.
Med endast datormus: En muspekares placering och vänsterklicka på en knapp.
Med endast tangetbord: Att fokus-indikera knappen och klicka på enter.
Dessa indikatorer behöver synas tydligt och fungera.
Alternativa bilder & förbättrat stöd till skärmläsare
För användare som inte kan se produktbilder, måste det finnas alternativa texter (alt-texter). Med hjälp av alt-texter kan bilder beskrivas av skärmläsare (mjukvaruprogram som läser upp innehåll på webbsidor).
En bild på en kaffekopp kan till exempel ha alt-texten ”En vit kaffekopp på ett träbord.” Denna typ av text är även bra för en hemsidans SEO.
Likt alt-texternas uppgifter för produktbilder, behöver det även finnas alternativa texter som beskriver videoklipp och ljud.
Ett till stöd som hjälper skärmläsare att navigera webbsidor korrekt är Aria-attribut. Det motsvarar en extra beskrivning på html-koden, som stöttar skärmläsaren uppgift att tolka webbsidans funktioner.
En aria-attribut kan t.ex. tala om för skärmläsaren att “Namn”-fältet i ett kontaktformulär betyder att du som besökare ska fylla i “Förnamn och efternamn”, “Bara förnamn”, eller “Bara efternamn”. Om informationen inte är tillräckligt tydlig för skärmläsaren, blir uppgiften genast jättesvår för besökaren.
Sammanfattningsvis: utan aria-attribut riskerar man att ge ut otillräcklig information till användaren.
Tydliga länkar och knappar
Knappar och länkar måste vara tillräckligt stora för att lätt kunna klickas på, särskilt på mobiler. Knappar måste också vara tydliga med vad deras funktion innebär. Länkar måste signalera till användaren att de är klickbara, och får inte döljas i samma stil som omringade brödtext.
En sökfunktion är också en stor hjälp för alla besökare att ha tillgång till.
Tydliga formulär-fel
Varje input-fält i ett formulär ska ha en tydlig etikett och aria-attribut som förklarar vad som förväntas fyllas i.
När något fyllts i fel ska tydliga och specifika felmeddelanden visas (Exempel: ”Fyll i en giltig e-postadress” är mycket mer tillgängligt än felmeddelandet ”Ett fel har inträffat.”)
Snabb och effektiv laddningstid
Minimera laddningstider genom att optimera bilder, använda cache och reducera tung kod. Långsamma sidor kan vara ett hinder för många användare.
Påverkas ALLA webbshoppar av EU:s tillgänglighetsdirektiv?
Kort och gott: Ja, i olika grad berörs alla hemsidor av tillgänglighetsdirektivets regler. Främst blir det extra viktigt för större företag som driver e-handel.
Vad måste företag som berörs göra?
Företag som omfattas måste se till att:
- Webbplatser och mobilappar följer tillgänglighetsstandarder (t.ex. WCAG 2.1).
- Information om produkterna/tjänsterna är tillgänglig för personer med funktionsnedsättning.
- Kunder kan navigera, handla och genomföra betalningar utan hinder.
Fråga oss om ni är osäkra på om ni påverkas av direktivet eller om ni vill försäkra er om att er webbshop uppfyller direktivets krav.
Vad händer om jag inte följer tillgänglighetsdirektiv?
Om ditt företag berörs av direktivet, och ni inte följer dess krav, så kan det få både juridiska och ekonomiska konsekvenser.
Ni kan främst få varningar från myndigheter om brister inom tillgängligheten på er webbsida, som hänvisar till att åtgärder behöver utföras inom en viss tidsram. Konsekvensen av att inte utföra dessa åtgärder kan sedan leda till sanktionsavgifter eller böter. (Avgifterna kan variera beroende på land, men större företag riskerar i regel högre böter.)
Det är även öppet för användare att föra en civilrättslig talan för diskriminering om de upplever att de exkluderas på grund av otillgänglighet. Era besökare kan därför också anmäla ert företag till tillsynsmyndigheten. Ert företags rykte och varumärke kan påverkas, särskilt om problemet uppmärksammas i sociala medier.
Varför tillgänglighet är viktigt
Även om direktivet inte berör ditt företag, är det bra att redan nu jobba med tillgängligheten på ert företags webbplats. Inte bara för att undvika potentiella lagkrav, utan även för att det leder till fler och nöjdare kunder, och bidrar till ett mer inkluderande samhälle.
Du kan läsa mer om tillgänglighetsdirektivet på Myndigheten för delaktighets webbsida.
Kontakta oss om ni behöver Dalarna Digitals hjälp med att uppnå tillgänglighetsdirektivets krav.
