Standarder · WCAG 2.2

SC 1.1.1 Nivå A WCAG 2.0

Innehåll utan text

Varje bild, ikon, diagram, ljudfil och annat innehåll utan text måste ha ett textalternativ som fyller samma syfte — så att skärmläsare, punktskrift och kontaktbrytare ger samma information som seende användare får.

Vad kriteriet kräver

Innehåll utan text — bilder, ikoner, diagram, animationer, CAPTCHA, inbäddade ljud, sensoriska upplevelser — måste ha ett textalternativ som förmedlar samma information eller funktion. Textalternativet är det hjälpmedelstek­niken renderar för användaren när originalet inte kan uppfattas.

De fyra kategorier som WCAG lyfter fram:

  • Informativa bilder behöver en alternativtext som beskriver den information de förmedlar.
  • Funktionella bilder (länkar, knappar) behöver en alternativtext som beskriver åtgärden, inte det visuella.
  • Dekorativa bilder får ett tomt alt-attribut (alt="") så att skärmläsare hoppar över dem.
  • Komplexa bilder (diagram, infografik) behöver en kort alternativtext plus en längre beskrivning i löptexten, i ett <details>-block eller via aria-describedby.

Hur man uppfyller det

  • Lägg till ett alt-attribut på varje <img>. Tomt om dekorativt, beskrivande om informativt.
  • Ge varje ikon-knapp utan synlig text ett tillgängligt namn via aria-label, synlig text eller ett SVG <title>-element.
  • Skriv en menings­sammanfattning som alternativtext för diagram och infografik, och lägg data i en tillgänglig tabell direkt före eller efter figuren.
  • För CAPTCHA: erbjud minst ett icke-visuellt alternativ (ljud-CAPTCHA, e-postverifiering, server­sidig hastighetsbegränsning).
  • För ljud som förmedlar information (en podcastförhandsvisning, ett UI-ljud) behövs ett textmotsvar.

Vanliga fel

  • alt="image" eller alt="bild på en person" — beskriver mediet, inte innehållet.
  • Ikon-knappar utan tillgängligt namn (<button><svg /></button>). Skärmläsaren meddelar enbart “knapp” utan vidare kontext.
  • Dekorativa bilder som saknar alt="" — skärmläsaren faller tillbaka på att läsa filnamnet.
  • <img>-taggar för diagram där diagramrubriken används som alternativtext och underliggande data inte finns någonstans på sidan.
  • CSS-bakgrundsbilder som bär betydelse, utan textlabel i koden.

Varför det spelar roll

Detta är grunden för skärmläsartillgänglighet. En webbplats som misslyckas med 1.1.1 är oanvändbar för blinda användare — varje bild blir en återvändsgränd. Det är också det vanligaste felet som axe och Lighthouse hittar, eftersom automatiserade verktyg kan flagga saknade alternativtexter men inte bedöma om den befintliga alternativtexten är menings­full.