WCAG 1.1.1: Icke-textinnehåll

Vad den här regeln innebär

WCAG:s framgångskriterium 1.1.1 Icke-textinnehåll är ett krav på nivå A under principen Uppfattningsbar. Det anger att allt icke-textinnehåll som presenteras för användaren måste ha ett textalternativ som fyller samma funktion. ”Icke-textinnehåll” definieras brett: det omfattar rasterbilder (JPEG, PNG, GIF, WebP), vektorgrafik (SVG), bildbaserade knappar och formulärfält, bildkartor, canvas-element, ljudklipp, video, animationer, CAPTCHAs och dekorativa utsmyckningar.

Ett textalternativ kan ta flera former beroende på elementtyp: ett alt-attribut på ett <img>-element, ett aria-label eller aria-labelledby på ett SVG- eller rollbärande element, ett title-element inuti ett <object>, eller ett <figcaption> kopplat till en figur. Huvudkravet är att det alternativa textinnehållet förmedlar samma information eller funktion som det visuella innehållet självt — det är inte bara ett filnamn eller en generisk platshållare.

Kriteriet definierar flera specifika fall som avgör hur ett adekvat textalternativ ska se ut:

• Kontroller och inmatningar: Om icke-textinnehållet är en kontroll eller tar emot användarinmatning (till exempel en bildknapp eller en bild som används som länk), måste textalternativet beskriva dess syfte eller funktion, inte bara dess utseende.
• Tidsberoende media: Ljud- eller videoinnehåll som används som fristående presentation kräver åtminstone en beskrivande etikett som identifierar det; fullständiga utskrifter och undertexter behandlas i senare kriterier (1.2.x).
• Tester och sensoriska upplevelser: Om innehållet är ett test eller en övning som inte kan presenteras i text utan att förlora sitt syfte (till exempel ett visuellt pussel), behöver textalternativet bara identifiera och beskriva icke-textinnehållet.
• CAPTCHAs: Textalternativ måste beskriva syftet med CAPTCHA:n, och en alternativ form av CAPTCHA som använder en annan sensorisk modalitet måste tillhandahållas.
• Dekoration, formatering och osynligt innehåll: Om en bild är enbart dekorativ, används för avståndstagning eller inte presenteras för användare, ska den implementeras så att hjälpmedel kan ignorera den — vanligtvis via ett tomt alt=""-attribut eller role="presentation".

Ett godkänt resultat uppnås när varje meningsfullt icke-textelement antingen exponerar ett programmatiskt textalternativ som likvärdigt förmedlar dess syfte, eller uttryckligen markeras som dekorativt så att hjälpmedel kan hoppa över det. Ett underkänt resultat uppstår när en bild saknar alt-attribut helt, när alt-värdet är filnamnet (t.ex. alt="img_header_logo_v2.png"), när en SVG som används som meningsfullt innehåll varken har ett <title>-element eller en tillgänglig etikett, eller när en dekorativ bild felaktigt har beskrivande alt-text som skapar brus för skärmläsaranvändare.

Varför det är viktigt

Enligt Världshälsoorganisationen har cirka 2,2 miljarder människor världen över någon form av synnedsättning eller blindhet. Skärmläsaranvändare — som förlitar sig på syntetiskt tal eller uppdaterbara Braille-displayer för att ta del av digitalt innehåll — är helt beroende av textalternativ för att förstå bilder, ikoner, diagram och grafiska kontroller. Utan korrekt alt-text reduceras en produktsida på en e-handelssajt till en lista med priser utan visuellt sammanhang; en banks logotyptunga navigation blir en rad oetiketterade knappar; ett sjukhus symtomkontrolldiagram är osynligt för användaren som försöker göra en egen första bedömning.

Föreställ dig ett konkret scenario: en användare som är blind besöker en turkisk e-handelsplattform för att köpa en jacka. Produktkarusellen innehåller sex bilder som visar olika vinklar och färgvarianter av jackan. Om ingen av dessa bilder har meningsfull alt-text, meddelar användarens skärmläsare bara ”bild, bild, bild” — sex gånger. De kan inte avgöra vilken variant som är marinblå respektive svart, kan inte förstå vilken bild som visar bakfickan och kan helt avbryta köpet. En seende kollega med samma produktlänk slutför köpet på under två minuter. Denna klyfta är både ett tillgänglighetsfel och en affärsförlust.

Utöver blindhet gynnar detta kriterium också användare med kognitiva funktionsnedsättningar som förlitar sig på talsyntesverktyg som stöd vid läsning, användare med motoriska funktionsnedsättningar som navigerar med tangentbord och röst och behöver tydliga etiketter på interaktiva kontroller, samt användare med låg bandbredd där bilder kanske inte laddas — i dessa fall fungerar alt-texten som en funktionell reserv. Dessutom förbättrar väl utformad alt-text sökmotorindexering eftersom crawlers behandlar bilders alt-attribut som relevanta textsignaler, vilket direkt stödjer SEO-resultat.

Relaterade Axe-core-regler

Åtkomstmotorn axe-core upprätthåller WCAG 1.1.1 genom sju separata automatiserade regler. Att förstå vad varje regel kontrollerar — och var dess begränsningar ligger — är avgörande för en komplett teststrategi.

• image-alt: Kontrollerar att varje <img>-element har ett alt-attribut (som kan vara tomt för dekorativa bilder) eller ett tillgängligt namn via aria-label, aria-labelledby eller title. Den flaggar bilder som helt saknar alt-attribut, eftersom webbläsaren då exponerar filsökvägen som det tillgängliga namnet.
• input-image-alt: Kontrollerar att <input type="image">-element har ett icke-tomt alt-attribut. Bildinmatningar fungerar som skicka-knappar och måste förmedla sin funktion, inte bara sitt visuella utseende. Ett saknat eller tomt alt på en bildinmatning gör knappen i praktiken oanvändbar med en skärmläsare.
• area-alt: Kontrollerar att varje <area>-element i en bildkarta har ett icke-tomt textalternativ via alt, aria-label eller aria-labelledby. Bildkartor är ett äldre mönster som fortfarande används i vissa företagsapplikationer och offentliga portaler, och varje hotspot måste självständigt beskriva sin länkdestination eller funktion.
• object-alt: Kontrollerar att <object>-element har ett tillgängligt namn. <object>-elementet har historiskt använts för att bädda in Flash-innehåll, PDF:er eller annan media; utan en etikett har skärmläsare inget sätt att identifiera det inbäddade innehållet.
• svg-img-alt: Kontrollerar att inline-<svg>-element med role="img" har ett tillgängligt namn, vanligtvis tillhandahållet av ett underordnat <title>-element (med ett matchande aria-labelledby) eller ett aria-label-attribut på SVG-roten. Moderna användargränssnitt använder SVG i stor utsträckning för ikoner och illustrationer; den här regeln fångar oetiketterade SVG:er som bär betydelse.
• role-img-alt: Kontrollerar att alla element med role="img" — vilket kan tillämpas på icke-SVG-element som <div> eller <span> som används som bildbehållare — har ett tillgängligt namn. Detta mönster är vanligt i anpassade ikonsystem och implementationer med CSS-bakgrundsbilder där inget inbyggt bildelement används.
• image-redundant-alt: Flaggar situationer där en bilds alt-text duplicerar intilliggande synlig text, vanligtvis när en bild visas inuti en länk tillsammans med en textetikett. Även om det inte är ett hårt fel gör redundant alt-text att skärmläsare meddelar samma information två gånger, vilket försämrar lyssningsupplevelsen. Den här regeln kräver mänsklig bedömning för att lösas korrekt eftersom bara en person kan avgöra om dupliceringen verkligen är redundant eller avsiktligt tillagd.

Det är viktigt att notera att automatiserade verktyg, inklusive axe-core, inte kan utvärdera kvaliteten på alt-text — bara dess närvaro och grundläggande struktur. En regel kan godkänna en bild med alt="photo" eller alt="decorative border" även om ingen av dem är meningsfull. Manuell granskning krävs därför alltid tillsammans med automatiserad skanning för att bekräfta att alt-text korrekt beskriver innehållet och syftet med varje bild.

Hur man testar

1. Automatiserad skanning med axe DevTools eller Lighthouse: Installera webbläsartillägget axe DevTools (tillgängligt för Chrome och Firefox). Öppna sidan som ska testas, aktivera tillägget och kör en fullständig sidanalys. Filtrera resultaten efter regel-ID:na som listas ovan: image-alt, input-image-alt, area-alt, object-alt, svg-img-alt, role-img-alt och image-redundant-alt. För varje flaggat element markerar verktyget den felande noden i DOM:en och förklarar överträdelsen. Lighthouse (inbyggt i Chrome DevTools under Accessibility-granskningen) visar också image-alt-överträdelser med detaljer på elementnivå. Dokumentera alla överträdelser med deras elementselektorer och omgivande kontext för överlämning till utvecklare.
2. Manuell DOM-inspektion: Öppna webbläsarens DevTools-panel Elements och sök efter alla <img>, <input type="image">, <area>, <object> och <svg>-taggar. Kontrollera för varje att ett lämpligt alt-attribut eller ARIA-etikett finns och att dess värde är meningsfullt i sitt sammanhang. Var särskilt uppmärksam på bilder som laddas dynamiskt via JavaScript-ramverk som React eller Vue, som kanske inte visas i en statisk HTML-översikt.
3. Skärmläsartestning med NVDA och Firefox: Starta NVDA (gratis, Windows) och öppna sidan i Firefox. Navigera med tangenten G för att hoppa mellan grafik. NVDA meddelar varje bilds tillgängliga namn; lyssna efter meddelanden om filsökvägar, ”image” eller tomma meddelanden — alla dessa indikerar ett fel. För bildknappar och länkar, använd Tab-tangenten för att nå varje kontroll och verifiera att den talade etiketten förmedlar den åtgärd kontrollen utför.
4. Skärmläsartestning med VoiceOver och Safari (macOS/iOS): Aktivera VoiceOver (Command+F5 på macOS). Använd VO+Högerpil för att gå igenom innehållet element för element, eller öppna objektväljaren (VO+U) och välj Images från rotorn för att se en lista över alla bilder och deras etiketter på en gång. På iOS, svep åt höger genom sidan och lyssna på hur varje bild meddelas.
5. Skärmläsartestning med JAWS och Chrome: I JAWS, tryck på G för att navigera efter grafik. Varje bild ska ge en tydlig, meningsfull beskrivning. Använd JAWS virtuella visare (Insert+F1) för att se det beräknade tillgängliga namnet och rollen för valfritt element.
6. Verifiera hantering av dekorativa bilder: För bilder som du anser är dekorativa, bekräfta att de har alt="" och inget title-attribut eller ARIA-etikett som skulle exponera dem igen. Med en skärmläsare, navigera till dessa element och bekräfta att de helt hoppas över i läsordningen.

Hur man åtgärdar

Informativ bild utan alt — Felaktig

<!-- Image conveys product information but has no alt attribute -->
<img src='jacket-navy-front.jpg'>

Informativ bild utan alt — Korrekt

<!-- alt text describes the visual content and its purpose in context -->
<img src='jacket-navy-front.jpg' alt='Navy blue wool jacket, front view, with double-breasted buttons'>

Dekorativ bild felaktigt etiketterad — Felaktig

<!-- Decorative divider image exposes a descriptive alt that adds noise -->
<img src='divider-ornament.png' alt='Decorative ornamental divider with scrollwork pattern'>

Dekorativ bild korrekt dold för hjälpmedel — Korrekt

<!-- Empty alt tells screen readers to skip this image entirely -->
<img src='divider-ornament.png' alt=''>

SVG-ikon utan tillgängligt namn — Felaktig

<!-- SVG used as a meaningful icon has role="img" but no label -->
<svg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
  <path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z'/>
</svg>

SVG-ikon med tillgängligt namn — Korrekt

<!-- title element provides the accessible name; aria-labelledby associates it -->
<svg role='img' aria-labelledby='icon-account-title' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
  <title id='icon-account-title'>My Account</title>
  <path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z'/>
</svg>

Bildinmatningsknapp utan alt — Felaktig

<!-- Image submit button has no alt; screen reader announces only "image" -->
<input type='image' src='btn-search.png'>

Bildinmatningsknapp med beskrivande alt — Korrekt

<!-- alt describes the button's function, not its appearance -->
<input type='image' src='btn-search.png' alt='Search'>

Vanliga misstag

• Att använda filnamnet som alt-text: Att skriva alt="hero_banner_v3_final.jpg" exponerar filsökvägen för skärmläsare utan meningsfullt innehåll. Skriv alltid alt-text som beskriver vad bilden visar eller vilket syfte den fyller.
• Att sätta alt-text till ”image” eller ”photo”: Generiska värden som alt="image" eller alt="photo" klarar automatiska kontroller eftersom de inte är tomma, men de förmedlar ingen information. Skärmläsare meddelar redan elementets roll som ”image”, så att upprepa det ordet slösar användarens tid.
• Att glömma alt på dynamiskt injicerade bilder: Bilder som infogas i DOM:en via JavaScript (t.ex. en produktkarusell byggd med React) kan sakna alt-attribut i den initiala HTML-koden. Säkerställ att JavaScript-komponenten renderar alt-attributet samtidigt som den renderar src.
• Att tillämpa role="presentation" på meningsfulla bilder: Att använda role="presentation" eller role="none" på bilder som bär innehåll tar bort dem helt från tillgänglighetsträdet. Detta är endast lämpligt för rent dekorativa bilder; att använda det på informativa bilder orsakar ett fullständigt innehållsbortfall för skärmläsaranvändare.
• Att utelämna alt-attributet helt på CSS-bakgrundsbilder med role="img": När ett <div> stylas med en bakgrundsbild och ges role="img" glömmer utvecklare ibland att lägga till aria-label. Utan en etikett finns elementet i tillgänglighetsträdet som en bild utan namn — lika illa som ett saknat alt.
• Att skriva alt-text som beskriver utseende snarare än betydelse: För ett diagram beskriver alt="A blue bar chart" den visuella stilen men inte data. Alt-texten bör förmedla den viktigaste insikten, till exempel alt="Bar chart showing Q3 revenue grew 18% year-over-year".
• Duplicerad alt-text över flera bilder i en uppsättning: När en produktlista visar sex miniatyrbilder av samma artikel, och alla får samma alt-text (t.ex. alt="Running shoe"), misslyckas man med att skilja dem åt. Varje bild i en uppsättning bör beskriva sitt unika innehåll eller sin vinkel.
• Saknat alt på <area>-element i bildkartor: Utvecklare som använder bildkartor lägger ofta till alt-text på det överordnade <img>-elementet men glömmer att varje <area>-hotspot också kräver ett eget alt-attribut som beskriver just den länkdestinationen.
• Att använda tooltip-text som ersättning för alt-text: Attributet title ger en visuell tooltip och läses upp av vissa skärmläsare, men webbläsarstöd är inkonsekvent och det exponeras inte i alla tillgänglighetssammanhang. Det ska komplettera, inte ersätta, ett korrekt alt-attribut.
• Att inte testa SVG-ikoner som levereras via spritesheets eller <use>-element: SVG-sprites som refereras via <use href="#icon-id"> kanske inte exponerar sina interna <title> för alla skärmläsare på grund av shadow DOM-gränser. Testa alltid sprite-baserade ikoner med riktiga skärmläsare och komplettera med aria-label på det yttre <svg>-elementet vid behov.

Relation till Turkiets tillgänglighetsreglering

Turkiets presidentcirkulär 2025/10, publicerat i Officiella tidningen nr 32933 den 21 juni 2025, fastställer obligatoriska krav på digital tillgänglighet för ett brett spektrum av offentliga och privata aktörer verksamma i Turkiet. Cirkuläret hänvisar till WCAG 2.2 som sin tekniska standard, vilket gör alla framgångskriterier på nivå A — inklusive WCAG 1.1.1 Icke-textinnehåll — rättsligt bindande skyldigheter snarare än rekommendationer om bästa praxis.

De omfattade aktörerna inkluderar: alla offentliga institutioner och statliga organ, banker och finansiella institutioner, sjukhus och vårdgivare, telekommunikationsföretag med 200,000 eller fler abonnenter, e-handelsplattformar, resebyråer, privata transportföretag och privatskolor auktoriserade av Ministry of National Education (MoNE). För offentliga institutioner måste efterlevnad uppnås inom ett år från cirkulärets ikraftträdande. Privata aktörer ges ett tvåårigt genomförandefönster.

WCAG 1.1.1 är särskilt relevant i den turkiska digitala miljön eftersom många högtrafikerade sektorer som omfattas av cirkuläret — inklusive e-handelsmarknadsplatser, bankportaler och plattformar för offentliga tjänster — är starkt bildberoende. Produktfotografier på e-handelssajter, infografikbaserade offentliga meddelanden på myndighetsportaler, diagramtunga finansiella instrumentpaneler i bankapplikationer och formulärbaserade gränssnitt i sjukhusens patientportaler faller alla direkt inom detta kriteriums räckvidd.

Bristande efterlevnad av kraven på nivå A enligt cirkuläret utsätter omfattade aktörer för tillsyn och potentiella sanktioner. Eftersom WCAG 1.1.1 är ett av de mest frekvent överträdda och enklast testbara kriterierna — detekterbart både genom automatiserade verktyg och grundläggande genomgångar med skärmläsare — är det sannolikt att det kommer att spela en framträdande roll i efterlevnadsrevisioner. Organisationer som omfattas av cirkuläret bör behandla åtgärdande av alla image-alt-överträdelser som en omedelbar åtgärd med hög prioritet, inte en uppskjuten förbättring. Att implementera ett tillgänglighets-överläggs-SDK som Accsible kan hjälpa till att identifiera och delvis åtgärda saknade textalternativ i realtid, men en fullständig åtgärd i källkoden är fortfarande den mest robusta och hållbara vägen till efterlevnad.