WCAG 1.1.1: Nicht-textueller Inhalt

Was diese Regel bedeutet

Das WCAG-Erfolgskriterium 1.1.1 Nicht-Text-Inhalt ist eine Anforderung der Stufe A unter dem Prinzip „Wahrnehmbar“. Es besagt, dass alle Nicht-Text-Inhalte, die den Nutzerinnen und Nutzern präsentiert werden, eine Textalternative haben müssen, die denselben Zweck erfüllt. „Nicht-Text-Inhalt“ ist weit gefasst definiert: Er umfasst Rasterbilder (JPEG, PNG, GIF, WebP), Vektorgrafiken (SVG), bildbasierte Schaltflächen und Formulareingaben, Image Maps, Canvas-Elemente, Audioclips, Videos, Animationen, CAPTCHAs und dekorative Verzierungen.

Eine Textalternative kann je nach Elementtyp verschiedene Formen annehmen: ein alt-Attribut an einem <img>-Element, ein aria-label oder aria-labelledby an einem SVG oder einem Element mit Rolle, ein title-Element innerhalb eines <object> oder ein <figcaption>, das einer Figur zugeordnet ist. Die zentrale Anforderung ist, dass der Alternativtext dieselben Informationen oder dieselbe Funktion vermittelt wie der visuelle Inhalt selbst – er ist nicht einfach ein Dateiname oder ein generischer Platzhalter.

Das Kriterium definiert mehrere spezifische Fälle, die bestimmen, wie eine angemessene Textalternative aussieht:

• Steuerelemente und Eingaben: Wenn der Nicht-Text-Inhalt ein Steuerelement ist oder Benutzereingaben akzeptiert (z. B. eine Bildschaltfläche oder ein Bild, das als Link verwendet wird), muss die Textalternative seinen Zweck oder seine Funktion beschreiben, nicht nur sein Aussehen.
• Zeitbasierte Medien: Nur-Audio- oder Nur-Video-Inhalte, die als eigenständige Präsentation verwendet werden, erfordern mindestens eine beschreibende Kennzeichnung, die sie identifiziert; vollständige Transkripte und Untertitel werden in späteren Kriterien (1.2.x) behandelt.
• Tests und sensorische Erfahrungen: Wenn der Inhalt ein Test oder eine Übung ist, die nicht in Textform präsentiert werden kann, ohne ihren Zweck zu vereiteln (z. B. ein visuelles Puzzle), muss die Textalternative den Nicht-Text-Inhalt nur identifizieren und beschreiben.
• CAPTCHAs: Textalternativen müssen den Zweck des CAPTCHA beschreiben, und es muss eine alternative Form von CAPTCHA mit einer anderen sensorischen Modalität bereitgestellt werden.
• Dekoration, Formatierung und unsichtbare Inhalte: Wenn ein Bild rein dekorativ ist, für Abstände verwendet wird oder den Nutzerinnen und Nutzern nicht präsentiert wird, sollte es so implementiert werden, dass es von unterstützender Technologie ignoriert werden kann – typischerweise über ein leeres alt=""-Attribut oder role="presentation".

Ein Pass wird erreicht, wenn jedes bedeutungsvolle Nicht-Text-Element entweder eine programmatisch verfügbare Textalternative bereitstellt, die seinen Zweck gleichwertig vermittelt, oder ausdrücklich als dekorativ gekennzeichnet ist, sodass unterstützende Technologien es überspringen können. Ein Fail tritt auf, wenn ein Bild überhaupt kein alt-Attribut hat, wenn der alt-Wert der Dateiname ist (z. B. alt="img_header_logo_v2.png"), wenn ein SVG, das als bedeutungsvoller Inhalt verwendet wird, weder ein <title>-Element noch eine zugängliche Kennzeichnung hat oder wenn ein dekoratives Bild fälschlicherweise beschreibenden Alternativtext hat, der für Screenreader-Nutzende Rauschen erzeugt.

Warum das wichtig ist

Laut Weltgesundheitsorganisation haben weltweit etwa 2,2 Milliarden Menschen eine Form von Sehbeeinträchtigung oder Blindheit. Screenreader-Nutzende – die sich auf synthetische Sprache oder Braillezeilen verlassen, um digitale Inhalte zu konsumieren – sind vollständig auf Textalternativen angewiesen, um Bilder, Symbole, Diagramme und grafische Steuerelemente zu verstehen. Ohne aussagekräftigen Alternativtext reduziert sich eine Produktseite auf einer E-Commerce-Website auf eine Liste von Preisen ohne visuellen Kontext; eine mit Logos versehene Navigation einer Bank wird zu einer Reihe unbeschrifteter Schaltflächen; ein Symptomprüfungsdiagramm eines Krankenhauses ist für die Person, die eine Ersteinschätzung vornehmen möchte, unsichtbar.

Betrachten wir ein konkretes Szenario: Eine blinde Person besucht eine türkische E-Commerce-Plattform, um eine Jacke zu kaufen. Das Produktkarussell enthält sechs Bilder, die verschiedene Ansichten und Farbvarianten der Jacke zeigen. Wenn keines dieser Bilder aussagekräftigen Alternativtext hat, kündigt der Screenreader nur „Bild, Bild, Bild“ an – sechsmal. Die Person kann nicht erkennen, welche Variante marineblau und welche schwarz ist, kann nicht verstehen, welches Bild die Gesäßtasche zeigt, und bricht den Kauf möglicherweise ganz ab. Eine sehende Kollegin mit demselben Produktlink schließt den Kauf in weniger als zwei Minuten ab. Diese Lücke ist sowohl ein Barrierefreiheitsversagen als auch ein geschäftlicher Verlust.

Über Blindheit hinaus kommt dieses Kriterium auch Menschen mit kognitiven Beeinträchtigungen zugute, die Text-to-Speech-Werkzeuge zur Unterstützung beim Lesen nutzen, Menschen mit motorischen Beeinträchtigungen, die per Tastatur und Sprache navigieren und klare Beschriftungen für interaktive Steuerelemente benötigen, sowie Nutzerinnen und Nutzern mit geringer Bandbreite, bei denen Bilder möglicherweise nicht geladen werden – in diesen Fällen dient der Alternativtext als funktionaler Fallback. Zusätzlich verbessert gut formulierter Alternativtext die Indexierung durch Suchmaschinen, da Crawler Bild-alt-Attribute als relevante Textsignale behandeln und so direkt SEO-Ergebnisse unterstützen.

Verwandte Axe-core-Regeln

Die axe-core-Barrierefreiheits-Engine setzt WCAG 1.1.1 durch sieben unterschiedliche automatisierte Regeln durch. Zu verstehen, was jede Regel prüft – und wo ihre Grenzen liegen – ist für eine vollständige Teststrategie entscheidend.

• image-alt: Prüft, ob jedes <img>-Element ein alt-Attribut hat (das für dekorative Bilder leer sein darf) oder einen zugänglichen Namen über aria-label, aria-labelledby oder title erhält. Sie markiert Bilder, die überhaupt kein alt-Attribut haben, da der Browser dann den Dateipfad als zugänglichen Namen exponiert.
• input-image-alt: Prüft, ob <input type="image">-Elemente ein nicht leeres alt-Attribut haben. Bild-Eingaben fungieren als Senden-Schaltflächen und müssen ihre Funktion vermitteln, nicht nur ihr visuelles Erscheinungsbild. Ein fehlendes oder leeres alt bei einer Bild-Eingabe macht die Schaltfläche für Screenreader faktisch unbenutzbar.
• area-alt: Prüft, ob jedes <area>-Element innerhalb einer Image Map eine nicht leere Textalternative über alt, aria-label oder aria-labelledby hat. Image Maps sind ein Legacy-Muster, das in einigen Unternehmensanwendungen und Portalen des öffentlichen Sektors noch verwendet wird, und jeder Hotspot muss sein Linkziel oder seine Funktion eigenständig beschreiben.
• object-alt: Prüft, ob <object>-Elemente einen zugänglichen Namen haben. Das <object>-Element wurde historisch verwendet, um Flash-Inhalte, PDFs oder andere Medien einzubetten; ohne Kennzeichnung haben Screenreader keine Möglichkeit, den eingebetteten Inhalt zu identifizieren.
• svg-img-alt: Prüft, ob Inline-<svg>-Elemente mit role="img" einen zugänglichen Namen haben, der typischerweise durch ein untergeordnetes <title>-Element (mit passendem aria-labelledby) oder ein aria-label-Attribut auf der SVG-Wurzel bereitgestellt wird. Moderne UIs verwenden SVG intensiv für Symbole und Illustrationen; diese Regel erfasst unbeschriftete SVGs, die Bedeutung tragen.
• role-img-alt: Prüft, ob jedes Element mit role="img" – das auch auf Nicht-SVG-Elemente wie <div> oder <span> angewendet werden kann, die als Bildcontainer dienen – einen zugänglichen Namen hat. Dieses Muster ist in benutzerdefinierten Icon-Systemen und Implementierungen mit CSS-Hintergrundbildern üblich, bei denen kein natives Bildelement verwendet wird.
• image-redundant-alt: Markiert Situationen, in denen der Alternativtext eines Bildes sichtbaren, angrenzenden Text dupliziert, typischerweise wenn ein Bild innerhalb eines Ankers zusammen mit einer Textbeschriftung erscheint. Obwohl dies kein harter Fehler ist, führt redundanter Alternativtext dazu, dass Screenreader dieselben Informationen zweimal ansagen, was das Hörerlebnis verschlechtert. Für die korrekte Behebung ist hier menschliches Urteil erforderlich, da nur eine Person entscheiden kann, ob die Duplizierung tatsächlich redundant oder bewusst ergänzend ist.

Es ist wichtig zu beachten, dass automatisierte Werkzeuge, einschließlich axe-core, die Qualität von Alternativtext nicht bewerten können – nur seine Existenz und grundlegende Struktur. Eine Regel kann für ein Bild mit alt="photo" oder alt="decorative border" bestehen, obwohl keiner dieser Texte aussagekräftig ist. Eine manuelle Überprüfung ist daher immer zusätzlich zu automatisierten Scans erforderlich, um zu bestätigen, dass der Alternativtext den Inhalt und Zweck jedes Bildes korrekt beschreibt.

Wie man testet

1. Automatischer Scan mit axe DevTools oder Lighthouse: Installieren Sie die Browsererweiterung axe DevTools (verfügbar für Chrome und Firefox). Öffnen Sie die zu testende Seite, aktivieren Sie die Erweiterung und führen Sie eine Analyse der gesamten Seite durch. Filtern Sie die Ergebnisse nach den oben aufgeführten Regel-IDs: image-alt, input-image-alt, area-alt, object-alt, svg-img-alt, role-img-alt und image-redundant-alt. Für jedes markierte Element hebt das Tool den betreffenden Knoten im DOM hervor und erklärt den Verstoß. Lighthouse (in Chrome DevTools unter dem Accessibility-Audit integriert) zeigt ebenfalls image-alt-Verstöße mit Details auf Elementebene an. Protokollieren Sie alle Verstöße mit ihren Element-Selektoren und dem umgebenden Kontext für die Übergabe an die Entwicklung.
2. Manuelle DOM-Inspektion: Öffnen Sie das Elements-Panel der Browser-DevTools und suchen Sie nach allen <img>-, <input type="image">-, <area>-, <object>- und <svg>-Tags. Überprüfen Sie bei jedem, ob ein geeignetes alt-Attribut oder eine ARIA-Kennzeichnung vorhanden ist und ob ihr Wert im Kontext sinnvoll ist. Achten Sie besonders auf Bilder, die dynamisch über JavaScript-Frameworks wie React oder Vue geladen werden und in einem statischen HTML-Snapshot möglicherweise nicht erscheinen.
3. Screenreader-Tests mit NVDA und Firefox: Starten Sie NVDA (kostenlos, Windows) und öffnen Sie die Seite in Firefox. Navigieren Sie mit der Taste G, um zwischen Grafiken zu springen. NVDA kündigt den zugänglichen Namen jedes Bildes an; achten Sie auf Ansagen von Dateipfaden, „Bild“ oder leere Ansagen – all dies weist auf einen Fehler hin. Verwenden Sie für Bildschaltflächen und Links die Tab-Taste, um jedes Steuerelement zu erreichen, und prüfen Sie, ob die gesprochene Beschriftung die Aktion vermittelt, die das Steuerelement ausführt.
4. Screenreader-Tests mit VoiceOver und Safari (macOS/iOS): Aktivieren Sie VoiceOver (Command+F5 auf macOS). Verwenden Sie VO+Pfeil rechts, um Element für Element durch den Inhalt zu gehen, oder öffnen Sie den Elementwähler (VO+U) und wählen Sie im Rotor „Images“, um eine Liste aller Bilder und ihrer Beschriftungen auf einmal zu sehen. Wischen Sie auf iOS nach rechts durch die Seite und hören Sie, wie jedes Bild angekündigt wird.
5. Screenreader-Tests mit JAWS und Chrome: Drücken Sie in JAWS die Taste G, um nach Grafiken zu navigieren. Jedes Bild sollte eine klare, aussagekräftige Beschreibung liefern. Verwenden Sie den virtuellen JAWS-Viewer (Einfügen+F1), um den berechneten zugänglichen Namen und die Rolle für jedes fragliche Element anzuzeigen.
6. Behandlung dekorativer Bilder überprüfen: Bestätigen Sie bei Bildern, die Sie für dekorativ halten, dass sie alt="" und kein title-Attribut oder ARIA-Label haben, das sie erneut exponieren würde. Navigieren Sie mit einem Screenreader zu diesen Elementen und vergewissern Sie sich, dass sie in der Lesereihenfolge vollständig übersprungen werden.

Wie man behebt

Informatives Bild ohne alt – Falsch

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

Informatives Bild ohne alt – Richtig

<!-- 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'>

Dekoratives Bild falsch beschriftet – Falsch

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

Dekoratives Bild korrekt vor unterstützender Technologie verborgen – Richtig

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

SVG-Icon ohne zugänglichen Namen – Falsch

<!-- 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-Icon mit zugänglichem Namen – Richtig

<!-- 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>

Bild-Eingabeschaltfläche ohne alt – Falsch

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

Bild-Eingabeschaltfläche mit beschreibendem alt – Richtig

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

Häufige Fehler

• Verwendung des Dateinamens als Alternativtext: alt="hero_banner_v3_final.jpg" gibt den Dateipfad für Screenreader ohne sinnvollen Inhalt aus. Schreiben Sie immer Alternativtext, der beschreibt, was das Bild zeigt oder welchem Zweck es dient.
• Setzen des Alternativtexts auf „image“ oder „photo“: Generische Werte wie alt="image" oder alt="photo" bestehen automatisierte Prüfungen, weil sie nicht leer sind, vermitteln aber keine Informationen. Screenreader geben die Elementrolle bereits als „Bild“ aus, sodass die Wiederholung dieses Wortes die Zeit der Nutzenden verschwendet.
• Vergessen von alt bei dynamisch eingefügten Bildern: Bilder, die über JavaScript in das DOM eingefügt werden (z. B. ein mit React erstelltes Produktkarussell), können im initialen HTML keine alt-Attribute haben. Stellen Sie sicher, dass die JavaScript-Komponente das alt-Attribut gleichzeitig mit dem src rendert.
• Anwenden von role="presentation" auf bedeutungsvolle Bilder: Die Verwendung von role="presentation" oder role="none" bei Bildern mit Inhalt entfernt sie vollständig aus dem Accessibility-Tree. Dies ist nur für rein dekorative Bilder angemessen; bei informativen Bildern führt es zu einem vollständigen Inhaltsverlust für Screenreader-Nutzende.
• Weglassen des alt-Attributs bei CSS-Hintergrundbildern mit role="img": Wenn ein <div> mit einem Hintergrundbild versehen und mit role="img" ausgezeichnet wird, vergessen Entwickelnde manchmal, ein aria-label hinzuzufügen. Ohne Kennzeichnung befindet sich das Element als Bild ohne Namen im Accessibility-Tree – ebenso problematisch wie ein fehlendes alt.
• Alternativtext, der das Aussehen statt die Bedeutung beschreibt: Für ein Diagramm beschreibt alt="A blue bar chart" den visuellen Stil, aber nicht die Daten. Der Alternativtext sollte die zentrale Aussage vermitteln, etwa alt="Bar chart showing Q3 revenue grew 18% year-over-year".
• Doppelter Alternativtext über mehrere Bilder in einer Gruppe hinweg: Wenn eine Produktliste sechs Vorschaubilder desselben Artikels zeigt, führt die Zuweisung desselben Alternativtexts zu allen (z. B. alt="Running shoe") dazu, dass sie nicht unterscheidbar sind. Jedes Bild in einer Gruppe sollte seinen einzigartigen Inhalt oder Blickwinkel beschreiben.
• Fehlendes alt bei <area>-Elementen in Image Maps: Entwickelnde, die Image Maps verwenden, fügen häufig Alternativtext zum übergeordneten <img> hinzu, vergessen aber, dass jeder <area>-Hotspot ebenfalls ein eigenes alt-Attribut benötigt, das dieses spezifische Linkziel beschreibt.
• Verwendung von Tooltip-Text als Ersatz für Alternativtext: Das title-Attribut erzeugt einen visuellen Tooltip und wird von einigen Screenreadern vorgelesen, aber die Browserunterstützung ist uneinheitlich und es wird nicht in allen Barrierefreiheitskontexten exponiert. Es sollte einen ordentlichen alt-Text ergänzen, nicht ersetzen.
• Unterlassene Tests von SVG-Icons, die über Spritesheets oder <use>-Elemente ausgeliefert werden: SVG-Sprites, auf die über <use href="#icon-id"> verwiesen wird, geben ihre internen <title>-Elemente aufgrund von Shadow-DOM-Grenzen möglicherweise nicht für alle Screenreader frei. Testen Sie Sprite-basierte Icons immer mit realen Screenreadern und ergänzen Sie bei Bedarf ein aria-label am äußeren <svg>-Element.

Bezug zu den Barrierefreiheitsvorschriften der Türkei

Die Präsidialverfügung 2025/10 der Türkei, veröffentlicht im Amtsblatt Nr. 32933 am 21. Juni 2025, legt verbindliche Anforderungen an die digitale Barrierefreiheit für eine breite Palette öffentlicher und privater Einrichtungen fest, die in der Türkei tätig sind. Die Verfügung verweist auf WCAG 2.2 als technischen Standard und macht damit alle Erfolgskriterien der Stufe A – einschließlich WCAG 1.1.1 Nicht-Text-Inhalt – zu rechtlich durchsetzbaren Verpflichtungen statt zu Best-Practice-Empfehlungen.

Zu den erfassten Einrichtungen gehören: alle öffentlichen Institutionen und Regierungsstellen, Banken und Finanzinstitute, Krankenhäuser und Gesundheitsdienstleister, Telekommunikationsunternehmen mit 200.000 oder mehr Abonnentinnen und Abonnenten, E-Commerce-Plattformen, Reisebüros, private Transportunternehmen und Privatschulen, die vom Ministerium für Nationale Bildung (MoNE) autorisiert sind. Für öffentliche Institutionen muss die Konformität innerhalb eines Jahres nach Inkrafttreten der Verfügung erreicht werden. Privaten Unternehmen wird ein Umsetzungszeitraum von zwei Jahren eingeräumt.

WCAG 1.1.1 ist in der türkischen digitalen Landschaft besonders relevant, da viele stark frequentierte Sektoren, die von der Verfügung erfasst werden – darunter E-Commerce-Marktplätze, Bankportale und Plattformen für staatliche Dienstleistungen – stark bildabhängig sind. Produktfotos auf E-Commerce-Seiten, infografikbasierte öffentliche Bekanntmachungen auf Regierungsportalen, diagrammreiche Finanz-Dashboards in Bankanwendungen und formularbasierte Oberflächen in Patientenportalen von Krankenhäusern fallen alle eindeutig in den Anwendungsbereich dieses Kriteriums.

Nichtkonformität mit Anforderungen der Stufe A im Rahmen der Verfügung setzt die erfassten Einrichtungen einer behördlichen Prüfung und möglichen Sanktionen aus. Da WCAG 1.1.1 zu den am häufigsten verletzten und am einfachsten zu testenden Kriterien gehört – erkennbar sowohl durch automatisierte Werkzeuge als auch durch einfache Screenreader-Durchgänge – wird es voraussichtlich eine prominente Rolle in Compliance-Audits spielen. Organisationen, die der Verfügung unterliegen, sollten die Behebung aller image-alt-Verstöße als sofortige, hoch priorisierte Maßnahme behandeln, nicht als aufgeschobene Verbesserung. Die Implementierung eines Accessibility-Overlay-SDK wie Accsible kann dabei helfen, fehlende Textalternativen in Echtzeit sichtbar zu machen und teilweise zu beheben, aber eine vollständige Behebung auf Quellcode-Ebene bleibt der robusteste und dauerhafteste Weg zur Konformität.