Kostenlos prüfenGratis prüfen

Stufe A · WCAG 2.0

1.1.1 Nicht-Text-Inhalt

Jedes Bild, Icon, Diagramm und Bedienelement, das kein Text ist, braucht eine Textalternative mit demselben Zweck. Reine Dekoration braucht eine leere Alternative, damit Hilfsmittel sie überspringen.

Teilweise automatisch Manche Verstöße sind erkennbar, der Rest braucht Bewertung.

Kostenlosen Scan anfordern

Woran es in der Praxis scheitert

Eine Produktgalerie, in der jede Datei als „IMG_4417.jpg“ vorgelesen wird. Ein Löschen-Button, der nur aus einem Icon besteht. Ein Umsatzdiagramm, dessen einzige Beschreibung „Diagramm“ lautet.

Wie man es repariert

Schreiben Sie, wozu das Bild an dieser Stelle dient, nicht was allgemein darauf zu sehen ist. Ein Produktfoto braucht das Produkt, ein verlinktes Logo das Ziel, ein Zierstrich alt="".

Auf einen Blick

Stufe
Stufe A — das Minimum. Ein Verstoß hier macht etwas meist unmöglich, nicht bloß mühsam.
Prinzip
Wahrnehmbar
Richtlinie
1.1 Textalternativen
Neu in
WCAG 2.0
EN 301 549
9.1.1.1
Englische Bezeichnung
Non-text Content
Automatische Prüfung
Teilweise automatisch

Offizielle Definition beim W3C lesen

So prüfen Sie es von Hand

  1. Listen Sie jedes Bild, Icon und Diagramm der Seite mit seiner Textalternative auf – der Bereich „Barrierefreiheit“ in den Entwicklertools des Browsers oder die Grafikliste eines Screenreaders zeigt, was tatsächlich angesagt wird.
  2. Fragen Sie bei jedem: Würde die Alternative die Aufgabe des Bildes erfüllen, wenn das Bild fehlte? Ein verlinktes Bild nennt das Linkziel, ein Produktfoto das Produkt.
  3. Prüfen Sie jeden Button und Link, der nur aus einem Icon besteht: Jeder braucht einen Namen – aus sichtbarem Text, aria-label oder visuell verborgenem Text.
  4. Achten Sie darauf, dass Dekoration stumm bleibt: alt="" oder ein CSS-Hintergrund – nicht „Bild“, nicht der Dateiname.
  5. Bei Diagrammen und Infografiken: Steht die Information auch als Text auf der Seite – als Zusammenfassung oder Tabelle?

Im Code

Nicht erfüllt
<img src="IMG_4417.jpg">

<button class="icon-button">
  <svg viewBox="0 0 24 24"><path d="…"/></svg>
</button>
Erfüllt
<img src="leinenhemd-marine.jpg" alt="Leinenhemd in Marineblau, Vorderansicht">

<button class="icon-button" aria-label="Aus dem Warenkorb entfernen">
  <svg viewBox="0 0 24 24" aria-hidden="true"><path d="…"/></svg>
</button>

<img src="trenner.svg" alt="">

Teilweise automatisch

Wie weit eine automatische Prüfung kommt

Ein Werkzeug findet hier einen Teil der Verstöße und sieht den Rest nicht. Ein sauberes automatisches Ergebnis heißt: die vorhandenen Prüfungen haben nichts gefunden — nicht, dass das Kriterium erfüllt ist. Genau diese Lücke lässt einen grünen Scan wie eine barrierefreie Website aussehen, und genau dort arbeiten der Tastatur-Agent, die Agenten in Entwicklung und ein Mensch weiter.

Eine fehlende Alternative wird automatisch gefunden. Ob die Alternative passt, ist eine Bewertung — deshalb schreibt unser Alt-Text-Vorschlag einen aus dem Bild samt Seite und bewertet seine eigene Antwort nach denselben Regeln, die ein Mensch anlegen würde — zum Annehmen oder Ablehnen durch eine Person.

Regeln, die dieses Kriterium prüfen

  • aria-meter-nameARIA-meter Knoten müssen einen zugänglichen Namen (accessible name) besitzen.
  • aria-progressbar-nameARIA-progressbar Knoten müssen einen zugänglichen Namen (accessible name) besitzen.
  • image-altBild ohne Alternativtext
  • input-image-altBild-Button ohne Alternativtext
  • object-alt<object>-Elemente müssen einen Alternativtext besitzen.
  • role-img-altElement mit role="img" ohne Namen
  • svg-img-altSVG-Grafik ohne Textalternative

Die Regel-IDs stammen aus axe-core (Version 4.14.0), der Open-Source-Engine, auf der unser Scan läuft, und von unserem Tastatur-Agenten – so heißen sie auch in einem Bericht oder im CI-Log. Eine unterstrichene ID hat hier eine eigene Seite.

Alle Regeln erklärt

Wo es besonders zählt

Leitfäden, in denen dieses Kriterium zu den ersten Prüfpunkten gehört.

Weiterlesen

  • Alternativtext

    Textalternative für ein Bild, die dessen Inhalt oder Funktion wiedergibt; dekorative Bilder erhalten ein leeres alt-Attribut (WCAG 1.1.1).

  • image-alt

    Die axe-Regel image-alt meldet Bilder ohne Textalternative. Wann Sie beschreiben, wann alt="" richtig ist – mit Codebeispiel und manuellem Test.

  • input-image-alt

    Die axe-Regel input-image-alt meldet ohne Textalternative. Benennen Sie die Aktion, nicht das Bild – mit Codebeispiel.

  • role-img-alt

    Die axe-Regel role-img-alt meldet Elemente mit role="img" ohne zugänglichen Namen. aria-label ergänzen oder Rolle entfernen – mit Codebeispiel.

  • svg-img-alt

    Die axe-Regel svg-img-alt meldet SVG mit role="img" ohne Namen. title oder aria-label ergänzen, Dekoration verbergen – mit Codebeispiel.

Finden Sie heraus, welche Kriterien Ihre Website verfehlt

Wir prüfen bis zu 100 Seiten gegen WCAG 2.2 AA, schicken den Tastatur-Agenten durch die Seite, die Sie benennen, und senden Ihnen den Bericht per E-Mail — einmal, kostenlos, ohne Bedingungen.

Kostenlosen Scan anfordern So testet der Agent

Bericht innerhalb eines Werktags.