1.1.1 Innehåll som inte är text A

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 blir uppläst av hjälpmedel, men syns inte visuellt. Alla bilder ska ha alt-attributet oavsett om de är dekorativa eller innehåller viktig information som ska bli uppläst.

Exempel

Illustration av en växt i en kruka.

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älja ”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 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 ett tomt alt-attribut:

alt="" eller alt

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 namn i koden som hjälpmedel kan läsa upp. Det gör att alla användare kan förstå vad knappen gör.

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