Att veta om er webbplats uppfyller tillgänglighetskraven kan kännas överväldigande. WCAG 2.1 innehåller 50 framgångskriterier på nivå A och AA, och det är inte alltid tydligt vad de innebär i praktiken. Den här checklistan bryter ner de viktigaste kontrollerna i begripliga steg som webbredaktörer, kommunikatörer och utvecklare kan följa.

Vill ni veta direkt hur er webbplats ligger till? Skanna gratis på 30 sekunder →

Vad är WCAG 2.1?

WCAG står för Web Content Accessibility Guidelines och är den internationella standarden för digital tillgänglighet. I Sverige hänvisar lagen om tillgänglighet till digital offentlig service till just WCAG 2.1 nivå AA som den standard som ska uppfyllas.

Standarden bygger på fyra principer. Allt innehåll på er webbplats ska vara möjligt att uppfatta, hanterbart, begripligt och robust. Under varje princip finns konkreta kriterier att uppfylla. Om ni vill ha en djupare genomgång av standarden, läs vår introduktion till WCAG 2.1.

Checklista: det som webbredaktörer kan kontrollera själva

Följande punkter kräver inga tekniska kunskaper. Ni kan kontrollera dem direkt i ert publiceringsverktyg.

Bilder och media

Har alla bilder en alternativtext som beskriver vad bilden visar? Alternativtexten ska förklara bildens innehåll som om ni beskriver den för någon i telefon. Dekorativa bilder, som bakgrundsmönster eller grafiska element utan informationsvärde, ska markeras som dekorativa eller ha en tom alternativtext.

Har alla videoklipp undertexter? Förinspelade videor ska ha textning som återger vad som sägs. Direktsändningar behöver inte ha undertexter enligt nivå AA, men det rekommenderas.

Rubriker och struktur

Använder ni rubrikformat (H1, H2, H3) i publiceringsverktyget istället för att bara göra texten stor och fet? En sida ska ha exakt en H1 (sidans huvudrubrik), sedan H2 för varje huvudavsnitt, och H3 för underavsnitt. Hoppa aldrig över nivåer, till exempel från H2 direkt till H4.

Länktexter

Är alla länktexter beskrivande? "Läs mer", "Klicka här" och "Här" säger ingenting för den som navigerar med skärmläsare. Skriv istället vad länken leder till: "Läs vår årsredovisning 2024", "Ansök om bidrag" eller "Kontakta handläggare".

Kontraster och färger

Är texten läsbar mot bakgrunden? Normal text behöver ett kontrastförhållande på minst 4,5:1 mot bakgrunden. Stor text (18 punkter eller 14 punkter fetstil) behöver minst 3:1. Ni kan kontrollera kontrasten med gratisverktyg som WebAIM Contrast Checker.

Förmedlas information med fler metoder än bara färg? Om ni markerar obligatoriska fält med rött ska det också finnas en asterisk eller texten "obligatorisk".

Checklista: det som kräver en utvecklare

Dessa punkter handlar om webbplatsens kod och behöver ofta åtgärdas av en webbutvecklare.

Tangentbordsnavigation

Går det att nå alla funktioner med enbart tangentbordet? Testa genom att trycka på Tab-tangenten genom hela sidan. Alla knappar, länkar, formulärfält och menyer ska gå att nå och använda utan mus. Fokusmarkeringen (den synliga ram som visar var ni befinner er) ska alltid synas tydligt.

Formulär

Har alla formulärfält en kopplad etikett som förklarar vad fältet är till för? Etiketten ska vara synlig och programmatiskt kopplad till fältet. Fält för personlig information som namn, e-post och telefonnummer bör ha autocomplete-attribut så att webbläsaren kan fylla i dem automatiskt.

Visas tydliga felmeddelanden när något fylls i fel? Felmeddelandena ska förklara vad som gick fel och hur användaren kan rätta till det.

Språk och struktur i koden

Är sidans språk angivet i HTML-koden? Elementet html ska ha attributet lang="sv" för svenskspråkiga sidor. Om delar av sidan är på ett annat språk ska det anges separat.

Har sidan landmärken som hjälper skärmläsare att navigera? Elementen header, nav, main och footer hjälper användare att snabbt hoppa till rätt del av sidan.

Finns det en "hoppa till innehåll"-länk bland de första elementen på sidan? Länken gör att tangentbordsanvändare slipper tabba igenom hela menyn på varje sida.

Vanliga brister vi hittar

När vi skannar svenska webbplatser ser vi samma problem om och om igen. De allra vanligaste är bilder utan alternativtext, otydliga länktexter som "Läs mer", rubriker som inte följer rätt hierarki, formulärfält utan autocomplete-attribut, och bristande kontrast mellan text och bakgrund.

Många av dessa brister är enkla att åtgärda. Alt-texter och länktexter kan webbredaktörer fixa direkt i publiceringsverktyget. Tekniska brister som saknade landmärken eller autocomplete-attribut kräver en utvecklare, men är ofta snabba kodfixar.

Nästa steg

En checklista ger er en bra grund, men automatiserad granskning hittar brister som är svåra att upptäcka manuellt. Ni kan skanna er webbplats gratis på tillganglighetskrav.se och få en sammanfattning av de vanligaste bristerna på 30 sekunder. Vill ni ha en komplett genomgång med åtgärdsplan kan ni beställa en fullständig rapport för 249 kr.

Läs mer