Innehåll som inte är text

Personer som inte kan se bilder, kan fortfarande ta del av text med hjälp av skärmläsare eller punktdisplay. Dessa verktyg kan dock inte tolka bilder, ljud eller video, och de behöver därför beskrivas i text.

Bilder

Bilder kan beskrivas med hjälp av ett alt-attribut i HTML-koden. Alt-texten kan bli uppläst av hjälpmedel, men alt-text går inte att se. Alla bilder ska ha alt-attributet.

Exempel

För att beskriva denna bild använder vi alt-attributet och det kan se ut såhär:

alt=”Illustration av en växt i en kruka.”

För att se hur det ser ut i koden går det att högerklicka på bilden och välj ”inspektera”. Då visas HTML-koden och det går att se att bilden har en alt-text.

Dekorativa bilder

Vissa bilder förmedlar inte någon information, utan är enbart dekorativa. Sådana bilder behöver inte beskrivas med en text, däremot ska de ändå markeras som dekorativa så att användaren inte behöver undra över vad bilden innehåller. För att markera en bild som dekorativ använder man helt enkelt ett tomt alt-attribut.

Viktigt att tänka på vid alt-text

Alt-texten ska innehålla det som syns på bilden, ta inte med information om sådant som inte visuellt finns med i bilden.
Alt-texten ska inte vara en upprepning av bildtexten.
Dekorativa bilder ska markeras med alt=”” eller bara alt.
Alt-texten ska vara beskrivande.
Alt-texten bör hållas kort. Bilder som förmedlar information kan ibland behöva en längre alt-text, till exempel diagram.
Alt-texten bör inte innehålla begrepp som ”Bild på”, ”En bild som visar” ”foto taget av”.

Ikoner

Ibland kan knappar bestå av ikoner, istället för text. Eftersom ikonerna inte förmedlas till alla användare är det viktigt att de har maskinläsbara namn i koden så att alla användare kan förstå vad knappen gör.

Testa riktlinjen

Kontrollera att alla bilder har en alt-text och att ikoner och övrigt innehåll som inte är text finns tillgängliga som textalternativ. Det enklaste sättet att testa sin webbplats på är att gå igenom den med en skärmläsare och lyssna på vad som läses upp.

Läs mer om riktlinje 1.1.1 på W3Cs webbplats.