Tillgänglighet på hemsidor med WCAG

Oavsett om det handlar om ett gott recept, en ny produkt eller en användbar tjänst har det blivit en naturlig del av vardagen för de flesta människor att söka information online. Men för personer med synnedsättning, motoriska svårigheter eller andra funktionsnedsättningar kan digitalt innehåll ofta vara svårt, eller till och med omöjligt, att ta del av. Det är här riktlinjerna Web Content Accessibility Guidelines (WCAG) kommer in i bilden. De fungerar som en standard för digital tillgänglighet på hemsidor och för digitalt innehåll.

I artikeln ”Vad EU:s tillgänglighetsdirektiv 2025 innebär för din hemsida” förklarade vi den EU-gemensamma EU Accessibility Act 2025 (EAA) och varför den är nödvändig för att främja digital tillgänglighet.

WCAG är centralt för detta ämne eftersom riktlinjerna definierar de specifika krav och bästa praxis som säkerställer att digitalt innehåll blir tillgängligt för alla människor, oavsett förmågor eller begränsningar.

I denna guide förklarar vi WCAG-riktlinjer mer i detalj och visar hur de kan bidra till att riva hinder och skapa mer inkluderande digitala miljöer. Vi visar också vad du behöver göra för att göra din hemsida tillgänglig.

Vad är WCAG-riktlinjerna?

Web Content Accessibility Guidelines (WCAG) är internationella riktlinjer som definierar hur hemsidor och digitalt innehåll kan göras tillgängligt, så att alla användare får tillgång, även personer med funktionsnedsättning. De utvecklades av W3C (World Wide Web Consortium) för att ge webbutvecklare tydlig vägledning i hur man skapar tillgängligt innehåll.

WCAG publicerades första gången 1999 med syftet att ta bort hinder på internet. De innehåller konkreta rekommendationer om hur man med teknisk design och innehåll kan göra hemsidor tillgängliga. För de senaste rekommendationerna och riktlinjerna hänvisar vi till den officiella WCAG-sidan hos W3C.

Därför är WCAG-riktlinjer viktiga

WCAG är avgörande för att säkerställa att digitalt innehåll är tillgängligt för alla användare, oavsett funktionsnivå. Riktlinjerna ger tydliga instruktioner för hur hemsidor och appar ska utformas för att kunna användas av personer med funktionsnedsättningar, till exempel synnedsättning, hörselnedsättning eller motoriska svårigheter.

WCAG:s roll i lagstiftningen

WCAG är inte bara en teknisk rekommendation, utan utgör även grunden för lagar, som till exempel den tyska lagen om stärkt tillgänglighet (BFSG). Företag och offentliga aktörer är skyldiga att göra sina hemsidor tillgängliga för att undvika diskriminering på grund av funktionsnedsättning. WCAG gör att kraven på tillgänglighet blir internationellt standardiserade och mätbara, vilket gör att efterlevnaden kan följas upp och verifieras.

Vikten av tillgänglighet i det digitala rummet

I den digitala världen är hinder lika problematiska som i den fysiska. En otillgänglig hemsida utesluter personer med funktionsnedsättning och hindrar deras fulla deltagande i det sociala och ekonomiska livet. Tillgänglighet är därför både en teknisk nödvändighet och en grundläggande del av social inkludering.

De fyra principerna i WCAG

Riktlinjerna bygger på fyra grundläggande principer. Varje princip hjälper till att identifiera och ta bort hinder som kan göra det svårt för personer med funktionsnedsättning att använda internet. Dessa principer är:

1. Möjligt att uppfatta

Information och användargränssnitt måste presenteras på ett sätt som kan uppfattas av alla användare. Personer med olika funktionsnedsättningar, till exempel syn- eller hörselnedsättning, måste kunna ta del av innehåll i en form de förstår.

Exempel:

• Textalternativ för bilder: Bilder bör alltid ha en alt-text som beskriver dem. Detta gör att personer som använder skärmläsare kan förstå vad bilden föreställer. Exempel: En alt-text kan beskriva en bild av ett träd som: ”Ett grönt träd i parken på våren”.
• Undertexter för videor: Videor bör alltid innehålla undertexter eller utskrifter så att personer som är döva eller har hörselnedsättning kan förstå innehållet.
• Färgkontraster: För personer med synnedsättningar, till exempel färgblindhet, är kontrasten mellan text och bakgrund mycket viktig. Rätt kontraster förbättrar användarupplevelsen. Läs mer i vår artikel om bästa färgerna för din hemsida.

2. Möjligt att använda

Användargränssnitt och menyer måste vara utformade så att de kan användas av alla, oavsett förmåga eller teknik. Detta gäller både personer som använder mus och tangentbord och de som använder alternativa inmatningsenheter, som röststyrning eller joystick.

Exempel:

• Tillgänglighet med tangentbord: En hemsida måste gå att navigera helt med tangentbord, så att personer med motoriska svårigheter inte är beroende av mus. Alla interaktiva element som formulär, länkar eller knappar måste kunna användas via tab-tangenten eller andra kortkommandon. Exempel: Tydlig markering av var fokus ligger vid tangentbordsnavigation bör finnas på varje sida.
• Undvika tidsbegränsningar: Hemsidor ska inte ha interaktiva element som startar automatiskt eller försvinner innan användaren fått tillräckligt med tid. Om ett formulär har en tidsgräns ska det finnas möjlighet att förlänga eller pausa.
• Undvika blinkande innehåll: Element som blinkar eller flimrar för snabbt (till exempel banners eller annonser) kan vara farliga för personer med epilepsi eller andra neurologiska tillstånd. Sådana effekter bör undvikas eller kunna stängas av.

3. Begripligt

Information och användargränssnitt måste vara utformade så att de är förståeliga för alla användare. Detta gäller både text, struktur och funktion.

Exempel:

• Enkel språkstil: Språket på hemsidan bör vara klart och enkelt. Komplicerade tekniska termer eller för långa meningar kan vara ett hinder. Ett exempel: I stället för en CTA som det står ”Klicka här för att identifiera din transaktion” kan man skriva: ”Bekräfta din transaktion”.
• Konsekvent navigation: Alla interaktiva element och navigationskomponenter på hemsidan ska vara konsekventa och förutsägbara. Till exempel ska en ”Tillbaka”-knapp alltid finnas på samma plats.
• Felmeddelanden: Om användaren fyller i något fel ska hemsidan visa tydliga felmeddelanden som hjälper dem att förstå och rätta till misstag. Till exempel: ”Ange en giltig mailadress” i stället för bara ”Fel”.

4. Robust

Hemsidor måste byggas så att de fungerar och är kompatibla på många olika enheter, webbläsare och hjälpmedel, inklusive skärmläsare och röststyrning.

Exempel:

• Flera enheter: Hemsidor måste fungera på datorer, surfplattor och mobiler. En mobilanpassad hemsida anpassar sig automatiskt efter olika enheter. Med hemsideprogrammet från one.com kan du enkelt skapa en mobilanpassad sida.
• Standardteknik: Hemsidor ska följa HTML- och CSS-standarder för att kunna tolkas korrekt av olika webbläsare och hjälpmedel.
• Feltolerans: Med bra webbdesign slutar inte hemsidor att fungera helt vid felaktiga inmatningar eller problem med externa system. Till exempel måste en sida fortfarande ladda, även om en vädertjänst tillfälligt inte fungerar.

Dessa fyra principer – möjlighet att uppfatta, använda, förstå och robusthet – utgör grunden i WCAG. Att följa dem är avgörande för att skapa en inkluderande digital upplevelse.

WCAG:s tre nivåer för efterlevnad

WCAG delar in kraven i tre nivåer för att underlätta införande och anpassning till olika behov:

1. Nivå A (minimikrav)
Grundläggande krav som måste uppfyllas för att en hemsida ska vara tillgänglig.

Exempel:

• Alt-texter för alla bilder
• Korrekt märkta formulärfält

Hemsidor som endast uppfyller nivå A erbjuder endast den mest grundläggande tillgängligheten.

2. Nivå AA (rekommenderad nivå för de flesta hemsidor)
Krav som är rekommenderade för de flesta hemsidor. De höjer tillgängligheten betydligt och förbättrar användarupplevelsen för en större grupp människor.

Exempel:

• Tydlig felhantering och beskrivning i formulär

De flesta offentliga och kommersiella hemsidor bör minst uppfylla nivå AA.

3. Nivå AAA (högsta nivån)
Ställer de högsta kraven och syftar till att skapa en nästintill perfekt användarupplevelse, även för personer med svåra funktionsnedsättningar.

Exempel:

• Fullständiga utskrifter och undertexter för allt audiovisuellt innehåll

Nivå AAA är framför allt relevant för utbildningssektorn och offentliga institutioner.

Juridiska krav

Inom EU, inklusive Sverige, kräver EU:s tillgänglighetslag 2025 att digitala tjänster följer WCAG 2.1 nivå AA som miniminivå. Detta gäller både offentliga aktörer och privata företag som erbjuder sina tjänster online.

WCAG och EU:s tillgänglighetslag (EAA)

EAA ålägger alla offentliga aktörer och privata företag som verkar inom eller riktar sina tjänster till EU att göra sina digitala erbjudanden tillgängliga. Lagen stärker efterlevnaden av WCAG genom att göra tillgänglighet till en juridisk skyldighet.

De juridiska skyldigheter som införs genom EAA

EAA fastställer tydliga juridiska krav för offentliga aktörer och privata företag. De måste säkerställa att deras hemsidor, mobila applikationer och andra digitala tjänster följer kraven i WCAG 2.1:

1. Tidsfrister för genomförande: EAA fastställer tydliga tidsgränser för när digital tillgänglighet måste vara uppnådd. Offentliga aktörer och privata företag som erbjuder tjänster online (till exempel för en webshop) måste säkerställa att deras digitala erbjudanden är tillgängliga senast den 28 juni 2025.
2. Rättsliga konsekvenser vid bristande efterlevnad: Om tillgänglighetskraven inte uppfylls kan höga böter utdömas, beroende på land och företagets storlek. Dessutom kan rättsliga åtgärder vidtas om användare hindras från att utöva sina rättigheter på grund av bristande tillgänglighet. I vissa fall kan tillgängligheten på hemsidor och digitala tjänster även bli föremål för domstolsprövning.
3. Kontroller och revisioner: EAA föreskriver att hemsidor regelbundet ska granskas för tillgänglighet, antingen genom egenkontroller från operatören eller genom externa revisioner. Detta säkerställer att hemsidorna förblir tillgängliga och fortsätter att förbättras även efter den inledande implementeringen.

WCAG-riktlinjerna: avgörande för en inkluderande digital värld

WCAG-riktlinjerna är nödvändiga för att skapa en tillgänglig digital värld som ger lika tillgång till information och tjänster för alla användare, oavsett förmåga eller begränsningar. De är inte bara en teknisk nödvändighet utan också en etisk och juridisk standard.

Genom att implementera WCAG bidrar du inte bara till digital inkludering, utan förbättrar även användarupplevelsen för alla. Hemsidor som följer WCAG blir mer användarvänliga och rättvisa. De som implementerar WCAG bidrar till att internet blir en plats som är tillgänglig för alla, oavsett individuella behov.

Ta chansen att göra din hemsida tillgänglig: uppfyll lagkraven, förbättra användarupplevelsen och nå fler människor.