{ FJS26 }

Tillgänglighet /
Accessibility

WCAG, de fyra principerna, och kraven i u01

[ v40 · onsdag 30 september 2026 ]

ÖVERSIKT

Innehåll

Varför tillgänglighet

Vad det är, och vem det är till för.

01 · GRUNDEN

Vad är digital tillgänglighet?

• Samhället blir alltmer digitaliserat, och det är viktigt att vi inte utesluter stora grupper.
• Information och tjänster ska kunna användas av så många som möjligt, oavsett funktionsnedsättning och oberoende av egenskaper och förmågor.
• Ungefär var femte person har en funktionsnedsättning.

01 · GRUNDEN

Permanent, temporärt, situationsbundet

Tillgänglighet behövs både för permanenta funktionsvariationer och för temporära.

• Permanent — en person som är blind på ett öga.
• Temporärt — en ögoninflammation som går över.
• Situationsbundet — starkt solljus mot skärmen.
• Samma lösning hjälper alla tre.

[ Tillgänglighetsmatrisen från gamla decken kan läggas in här ]

Design för alla

Att skapa lösningar som fungerar för så många som möjligt redan från början.

• Kallas också universell utformning eller inclusive design.
• Billigare och bättre än att lappa i efterhand.

WCAG och regelverket

Riktlinjerna, nivåerna och vad lagen kräver.

02 · WCAG

De fyra principerna

WCAG är riktlinjerna. WCAG 2.2 är den version som gäller sedan 2023. Principerna förkortas ofta POUR.

• Möjlig att uppfatta — innehållet går att ta in, även utan syn eller hörsel.
• Hanterbar — allt går att styra, även utan mus.
• Begriplig — text och gränssnitt går att förstå.
• Robust — koden fungerar med hjälpmedel och håller över tid.

02 · WCAG

Principerna i din u01-sida

Varje tillgänglighetskrav i u01 hänger på en av de fyra principerna.

02 · WCAG

Nivåerna A, AA och AAA

• A — lägsta ambitionsnivån.
• AA — kräver att både A och AA följs. Det är nivån u01 mäts mot.
• AAA — högsta ambitionsnivån, alla kriterier följs.

Alla lagar pekar i slutändan på WCAG nivå AA.

02 · REGELVERKET

Regelverket, kort

• 2007 — FN:s konvention om rättigheter för personer med funktionsnedsättning.
• 2015 — tillgänglighet blir en del av svenska diskrimineringslagen.
• EU:s webbdirektiv, DOS-lagen — gäller offentlig sektor.
• European Accessibility Act — omfattar även privat sektor, gäller sedan juni 2025.

02 · BEGREPP

Begrepp du kommer att stöta på

• WCAG — själva riktlinjerna.
• WAI — initiativet inom W3C som tar fram WCAG.
• A11y — kortform för accessibility, och namnet på open source-communityn.
• DIGG — Myndigheten för digital förvaltning, som följer upp kraven i Sverige.
• ARIA — extra roller och tillstånd för HTML. Använder du rätt element behöver du oftast ingen ARIA alls. Vi tar den i u02.

Så bygger du tillgängligt

Det här är precis kraven i u01.

03 · U01

Alt-texter

alt beskriver vad bilden betyder i sitt sammanhang — inte att det är en bild.

• Innehållsbild: alt="Pawan vid sin arbetsplats", inte alt="bild".
• Dekoration: alt="" — tom, så att skärmläsaren hoppar över den.
• Ligger bilden som background-image i CSS behövs ingen alt. Då är den dekoration per definition.
• Skriv aldrig "bild på" eller "bilden visar". Skärmläsaren säger redan att det är en bild.

03 · U01

Tangentbord och fokus

Allt som går att klicka på ska gå att nå med tangentbord.

• Tabba igenom sidan. Kommer du åt alla länkar, knappar och fält?
• Tabbordningen följer HTML:en. Är ordningen konstig är HTML-ordningen konstig.
• Ta aldrig bort fokusmarkeringen med outline: none utan att ersätta den med något.
• Styla den istället med :focus-visible och tydlig kontrast.

03 · U01

Kontrast

u01 kräver WCAG nivå AA.

• 4.5:1 för brödtext.
• 3:1 för stor text, alltså från 24 px eller 18,5 px fet.
• Ljusgrå text på vit bakgrund är den vanligaste missen.
• Mät med DevTools eller WebAIM Contrast Checker. Gissa inte.

03 · U01

Formulär

Varje fält behöver en label som hör ihop med just det fältet.

• <label for="email"> kopplas till <input id="email">. Samma sträng på båda.
• Ett stavfel i for eller id bryter kopplingen tyst, utan felmeddelande.
• Placeholder är inte en label. Den försvinner när man börjar skriva.
• Felmeddelanden ska gå att uppfatta, inte bara vara en röd ram.

03 · U01

Semantik och rubriker

Det mesta av tillgängligheten ligger redan i att välja rätt element.

• header, nav, main och footer ger skärmläsaren landmärken att hoppa mellan.
• En h1 per sida, sedan h2 och h3 i ordning. Hoppa inte över nivåer.
• Rubriknivån väljs efter struktur, inte efter hur stor texten ska se ut. Storleken sätter du i CSS.
• En knapp som gör något är en button, inte en div med onclick.

Testa och kom vidare

Hur du vet att det faktiskt fungerar.

04 · TESTA

Så testar du din sida

• Tangentbord — lägg undan musen och tabba igenom hela sidan.
• Lighthouse i DevTools — kör Accessibility-revisionen.
• Kontrast — färgväljaren i DevTools eller WebAIM Contrast Checker.
• Skärmläsare — VoiceOver på Mac (Cmd + F5), Narrator på Windows.
• Validatorn — validator.w3.org. Ogiltig HTML ger opålitliga hjälpmedel.

Övning

< Testa din u01-sida >

Lägg undan musen och tabba igenom din portfoliosida. Kommer du åt allt? Ser du hela tiden var fokus ligger? Kör sedan Lighthouse och skriv ner vad den klagar på.

04 · VIDARE

Vidare läsning

• learn-a11y.netlify.app — praktisk guide skriven för utvecklare.
• w3.org/WAI/WCAG22/quickref — alla kriterier, filtrerbara på nivå.
• a11yproject.com — checklistor och artiklar.
• digg.se/webbriktlinjer — de svenska webbriktlinjerna.