När man pratar om digital tillgänglighet dyker ofta WCAG upp. WCAG står för Web Content Accessibility Guidelines – och är ett gäng internationella riktlinjer för att göra digitalt innehåll tillgängligt för alla, oavsett funktionsförmåga.

Grunden i WCAG bygger på fyra principer, förkortat POUR. I den här artikeln förklarar vi vad dessa principer innebär – på ett enkelt, konkret och begripligt sätt.

P – Perceivable (Märkbar)

För att alla användare ska kunna ta del av innehållet måste det var möjligt att uppfatta med sinnena – oavsett om man ser, hör eller använder hjälpmedel som skärmläsare, punktdisplay eller talsyntes.

Det betyder att inget innehåll får vara beroende av bara ett sinne. Om du exempelvis använder färg för att signalera att ett formulärfält är felifyllt, måste det också finnas en text eller ikon som förklarar felet.

För visuella element, som bilder, är det viktigt med alternativtext (alt-text) som kortfattat men meningsfullt beskriver vad bilden visar. Ljudinnehåll behöver textalternativ, och videor bör kompletteras med undertexter och gärna transkription.

Målet är att ingen information ska gå förlorad, oavsett hur användaren tar till sig innehållet.

✅ En bild med beskrivande alt-text:
<img src="team.jpg" alt="Vårt team framför kontoret">

O – Operable (Hanterbar)

Gränssnittet ska vara möjligt att navigera och använda för alla användare – även de som inte använder mus eller pekskärm. Det innebär att alla interaktiva element, som knappar, länkar och formulärfält, måste gå att nå och använda med tangentbordet.

Det ska också gå att pausa, stoppa eller dölja rörligt innehåll, och funktioner får inte kräva snabb reaktion eller finmotorik för att fungera. Att tydligt visa var fokus befinner sig (t.ex. med en ram eller färgändring) är viktigt för användare som navigerar med tangentbord.

Använd alltid rätt HTML-element för interaktiva funktioner, annars riskerar du att viktiga funktioner inte fungerar alls med hjälpmedel.

✅ En knapp som går att tabba till och aktivera med tangentbord:
<button>Skicka</button>
(Jämför med t.ex. en <div> som ser ut som en knapp – den funkar inte utan extra kod.)

U – Understandable (Begriplig)

Innehåll och funktioner ska vara lätta att förstå och använda. Det handlar både om språket, gränssnittet och hur interaktionen är utformad.

Använd tydliga och konsekventa etiketter, logisk struktur och gärna hjälptexter eller förhandsinformation – så vet användaren vad som förväntas. Undvik plötsliga eller oförutsägbara förändringar på sidan. Ett klick ska inte ta användaren någonstans utan att det är tydligt vad som händer.

Tänk också på att enkla ordval, läsbar typografi och visuella ledtrådar kan hjälpa både personer med kognitiva svårigheter och alla andra.

✅ Ett formulärfält med tydlig etikett och hjälptext:
<label for="email">E-postadress</label> 
<input type="email" id="email" name="email">
<small>Vi skickar inga nyhetsbrev utan ditt OK.</small>

R – Robust

Innehållet ska vara tekniskt hållbart och fungera i många olika miljöer – oavsett om användaren surfar med den senaste versionen av Chrome, en äldre version av Firefox, en skärmläsare på mobilen eller någon framtida teknik.

Det kräver att koden är korrekt, standardiserad och semantiskt uppmärkt. Genom att använda rätt HTML-element – som <button> i stället för en klickbar <div> – talar du om för hjälpmedel vad som är vad, vilket förbättrar tillgängligheten dramatiskt.

Robust kod innebär också färre oväntade fel, bättre framtidssäkring och enklare underhåll.

✅ En semantiskt korrekt knapp, inte bara en klickbar div:
<!-- Rätt --> <button>Läs mer</button> 
<!-- Fel --> <div onclick="goToPage()">Läs mer</div>

Vill du ha fler tips? Ladda ner vår guide:
13 saker du måste veta om EU:s nya tillgänglighetsdirektiv

Tänk på: Många tillgänglighetsförbättringar är små – men kan göra stor skillnad. Vi hjälper gärna till med att se över grunderna.