De 8 vanligaste tillgänglighetsbristerna på svenska webbplatser

Vi har granskat hundratals svenska webbplatser. Samma brister återkommer. Ofta är de enkla att åtgärda. Men de har reell påverkan på riktiga besökare. Här är de åtta vanligaste med konkreta konsekvenser och åtgärder.

1. Bilder utan alternativtext

WCAG 1.1.1 Icke-textuellt innehåll

Den vanligaste bristen. Vi hittar den på i princip varje webbplats vi granskar.

Konsekvens: En blind besökare som använder skärmläsare hör "bild" eller filnamnet "IMG_2847.jpg". Informationen bilden förmedlar når aldrig fram. Om bilden visar viktig information, som ett diagram eller ett beslut, är besökaren helt utestängd.

Hur vanlig: Förekommer på över 90 procent av granskade webbplatser.

Åtgärd: Varje meningsfull bild behöver en alt-text som beskriver bildens syfte i sitt sammanhang. Dekorativa bilder ska ha tom alt-text (alt=""). Det här är ett redaktörsansvar i CMS:et.

2. Otydliga länktexter

WCAG 2.4.4 Länkens syfte

"Klicka här". "Läs mer". "Länk". Dessa länktexter ger ingen information om vart länken leder.

Konsekvens: En skärmläsaranvändare kan lista alla länkar på sidan för snabb navigering. Tio stycken "Läs mer" i rad ger ingen vägledning. Besökaren måste navigera till varje länk och läsa omgivande text för att förstå vad den handlar om.

Hur vanlig: Förekommer på cirka 85 procent av granskade webbplatser.

Åtgärd: Skriv länktexter som beskriver målet. "Ladda ner årsrapporten 2024" istället för "Klicka här". Om designen kräver kort text, komplettera med aria-label.

3. Tangentbordsfokus som fastnar eller försvinner

WCAG 2.1.1 Tangentbord och 2.4.7 Synligt fokus

Interaktiva element som inte går att nå med Tab. Fokus som försvinner bakom modaler. Menyer som inte kan öppnas utan mus.

Konsekvens: Den som navigerar med tangentbord, oavsett om det är på grund av motorisk funktionsnedsättning eller personlig preferens, kan inte använda delar av webbplatsen. Det kan handla om navigation, formulär eller viktiga funktioner.

Hur vanlig: Förekommer på cirka 70 procent av granskade webbplatser.

Åtgärd: Använd semantiska HTML-element. Button-taggar istället för div-taggar med klickhändelser. Testa hela webbplatsen med enbart tangentbord. Se till att fokusindikatorn alltid är synlig.

4. För låg kontrast mellan text och bakgrund

WCAG 1.4.3 Kontrast (minimum)

Ljusgrå text på vit bakgrund. Platshållartext i formulär som knappt syns. Text ovanpå bilder med varierande bakgrund.

Konsekvens: Besökare med nedsatt syn kan inte läsa texten. Men det drabbar fler. Alla som sitter i solljus med en mobilskärm. Alla med trötta ögon sent på kvällen. Kontrast är inte ett nischproblem.

Hur vanlig: Förekommer på cirka 80 procent av granskade webbplatser.

Åtgärd: WCAG kräver 4.5:1 kontrast för normal text, 3:1 för stor text. Testa era textfärger mot bakgrunden med ett kontrastverktyg. Var särskilt uppmärksam på grå toner och text ovanpå bilder.

5. Formulär utan tydliga fältbeteckningar

WCAG 1.3.1 Information och relationer

Inmatningsfält utan kopplade label-element. Platshållartext som enda ledtråd.

Konsekvens: Skärmläsaren säger "redigeringsruta" utan att ange vad som förväntas. Besökaren gissar. Platshållartext försvinner vid inmatning, så referensen försvinner mitt i ifyllandet.

Hur vanlig: Förekommer på cirka 60 procent av granskade webbplatser.

Åtgärd: Varje fält ska ha ett label-element med for-attribut som matchar fältets id. Platshållartext kan komplettera men aldrig ersätta etiketten.

6. Video utan textning

WCAG 1.2.2 Textbeskrivningar (förinspelat)

Inspelade videor på webbplatsen saknar undertexter.

Konsekvens: Döva och hörselskadade besökare kan inte ta del av videons innehåll. Och alla som tittar utan ljud, i kollektivtrafiken eller i öppet kontorslandskap, missar budskapet.

Hur vanlig: Förekommer på cirka 50 procent av webbplatser som publicerar video.

Åtgärd: Lägg till undertexter på alla inspelade videor. Automatisk textning via YouTube eller Vimeo är en start, men granska och korrigera resultatet.

7. Sidor utan logisk rubrikstruktur

WCAG 1.3.1 Information och relationer

H1 saknas. Rubriknivåer hoppas över (H1 direkt till H3). Visuella rubriker som tekniskt är fetstilad brödtext.

Konsekvens: Skärmläsaranvändare navigerar via rubriker. Det är deras primära sätt att skumläsa en sida. Utan logisk rubrikstruktur tappar de överblicken helt.

Hur vanlig: Förekommer på cirka 65 procent av granskade webbplatser.

Åtgärd: En H1 per sida. H2 för huvudsektioner. H3 för undersektioner. Hoppa aldrig över nivåer. Använd rubrikelement, inte fetstil, i CMS:et.

8. Interaktiva element som inte fungerar med skärmläsare

WCAG 4.1.2 Namn, roll, värde

Anpassade dropdown-menyer, tabbar, modaler och datepickers som byggts med div-element utan ARIA-attribut.

Konsekvens: Skärmläsaren presenterar elementet som en generisk behållare. Besökaren vet inte att det är en meny, att den kan expanderas, eller vad valen är.

Hur vanlig: Förekommer på cirka 55 procent av granskade webbplatser.

Åtgärd: Använd semantiska HTML-element i första hand (select, button, dialog). Om anpassade komponenter krävs, implementera korrekta ARIA-roller, tillstånd och tangentbordsinteraktion.

Vad gör man med den här listan?

Börja med brister som drabbar flest besökare och som är enklast att åtgärda. Alt-texter och kontrastproblem kan fixas av webbredaktörer utan kodändringar. Rubrikstruktur likaså. Tangentbords- och ARIA-problem kräver utvecklarinsats men har stor påverkan.

En automatisk granskning identifierar de flesta av dessa brister och ger er en prioriterad lista att arbeta igenom.