Bristerna som återkommer gång på gång

Efter att ha granskat hundratals svenska webbplatser ser vi tydliga mönster. Samma typer av tillgänglighetsbrister dyker upp om och om igen, ofta på webbplatser som i övrigt håller hög kvalitet. Här listar vi de tio vanligaste bristerna vi identifierar – och ger konkreta råd om hur du åtgärdar dem.

1. Saknade eller dåliga alt-texter

WCAG 1.1.1 – Icke-textuellt innehåll

Den i särklass vanligaste bristen. Bilder saknar helt alt-attribut, har tomma alt-texter för meningsfulla bilder, eller har generiska beskrivningar som "bild" eller filnamnet "IMG_2847.jpg".

Åtgärd: Varje meningsfull bild ska ha en alt-text som beskriver bildens innehåll och syfte. Dekorativa bilder ska ha alt="" (tomt alt-attribut). Undvik att börja med "Bild av" – skärmläsare meddelar redan att det är en bild.

2. Otillräcklig färgkontrast

WCAG 1.4.3 – Kontrast (minimum)

Texten är för ljus mot bakgrunden, särskilt vanligt för grå text, platshållartext i formulär och text ovanpå bilder. WCAG kräver ett kontrastförhållande på minst 4.5:1 för normal text och 3:1 för stor text.

Åtgärd: Använd ett kontrastverktyg för att kontrollera alla textfärger mot deras bakgrund. Var särskilt uppmärksam på grå toner, ljusa pastellfärger och text ovanpå fotografier.

3. Formulär utan kopplad etikett

WCAG 1.3.1 – Information och relationer

Inmatningsfält saknar <label>-element eller använder placeholder-text istället för riktiga etiketter. Utan kopplad etikett förstår inte skärmläsare vad fältet handlar om.

Åtgärd: Varje formulärfält ska ha ett <label>-element med for-attribut som matchar fältets id. Placeholders kan komplettera men aldrig ersätta etiketter.

4. Bristande tangentbordsnavigering

WCAG 2.1.1 – Tangentbord

Interaktiva element som menyer, knappar och modaler fungerar inte med tangentbord. Vanliga problem är att anpassade dropdown-menyer inte går att öppna, att dialogrutor inte fångar fokus och att fokus försvinner bakom modaler.

Åtgärd: Använd semantiska HTML-element (<button>, <a>, <select>) istället för <div> och <span> med klickhändelser. Testa hela webbplatsen genom att enbart använda Tab, Shift+Tab, Enter och Escape.

5. Saknad eller felaktig rubrikstruktur

WCAG 1.3.1 – Information och relationer

Rubriknivåer hoppas över (exempelvis H1 följt av H3), det saknas H1 på sidan, eller visuella rubriker är formaterade med fetstil istället för rubrik-element.

Åtgärd: Använd en logisk rubrikhierarki: en H1 per sida, H2 för huvudsektioner, H3 för undersektioner. Hoppa aldrig över nivåer. Rubriker hjälper skärmläsaranvändare att navigera effektivt på sidan.

6. Länkar utan beskrivande text

WCAG 2.4.4 – Länkens syfte

Länktexter som "Klicka här", "Läs mer" och "Länk" ger ingen information om vart länken leder. Skärmläsaranvändare navigerar ofta genom att lista alla länkar på sidan, och då behöver varje länk vara begriplig utan omgivande text.

Å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 länktext, använd aria-label för att ge en mer beskrivande text till skärmläsare.

7. Avsaknad av synlig fokusindikator

WCAG 2.4.7 – Synligt fokus

När användare navigerar med tangentbord behöver de se vilket element som har fokus. Många webbplatser döljer standardfokusindikatorn med outline: none utan att ersätta den med något annat.

Åtgärd: Ta aldrig bort fokusindikatorn utan att ersätta den. Använd CSS focus-visible för att visa en tydlig fokusindikator vid tangentbordsnavigering utan att den syns vid musklick.

8. Bilder av text

WCAG 1.4.5 – Bilder av text

Text bäddas in i bilder istället för att vara riktig HTML-text. Det gäller ofta banners, kampanjbilder och infografik. Bildens text går inte att zooma, kopieras eller läsas av skärmläsare (om alt-texten saknas).

Åtgärd: Använd HTML och CSS för att formatera text. Om bilder med text är nödvändiga (exempelvis logotyper), se till att en fullständig alt-text återger all text i bilden.

9. Automatiskt spelande ljud eller video

WCAG 1.4.2 – Styrning av ljud

Video eller ljud som spelas upp automatiskt när sidan laddas kan vara störande och desorienterade, särskilt för skärmläsaranvändare vars hjälpmedel överröstas.

Åtgärd: Spela aldrig upp ljud automatiskt. Om video startar automatiskt, se till att den är utan ljud och att det finns tydliga kontroller för att pausa, stoppa och justera volymen.

10. Sidspråk inte angivet

WCAG 3.1.1 – Sidans språk

HTML-elementets lang-attribut saknas eller är felaktigt (exempelvis lang="en" på en svenskspråkig sida). Utan korrekt språkattribut kan skärmläsare inte välja rätt uttal.

Åtgärd: Ange alltid lang="sv" på HTML-elementet för svenskspråkiga sidor. Om delar av sidan är på ett annat språk, ange lang-attribut på det elementet.

Sammanfattning

De flesta av dessa brister går att åtgärda utan stora tekniska insatser. Genom att fokusera på dessa tio punkter kan du eliminera en stor del av tillgänglighetsproblemen på din webbplats och ta ett betydande steg mot att uppfylla DOS-lagens krav.