WCAG 1.1.1: Nicht-Text-Inhalte

Alles, was kein Text ist – Bilder, Icons, Diagramme, Audio-Buttons, CAPTCHAs – braucht eine Textalternative, die denselben Zweck erfüllt. Rein dekorative Elemente werden stattdessen so ausgezeichnet, dass assistive Technologien sie ignorieren. (Englisch: Non-text Content.)

Was verlangt das Kriterium?

Für jeden Nicht-Text-Inhalt gilt eine von drei Regeln:

1. Informativ (Foto, Diagramm, Icon mit Bedeutung): Textalternative, die die Information oder Funktion transportiert – beim Bild das alt-Attribut.
2. Funktional (Bild als Button oder Link): Der Text beschreibt die Funktion („Suchen“), nicht das Aussehen („Lupe“).
3. Dekorativ (Zierbild, Trenner, Hintergrund): leeres alt="" bzw. CSS-Hintergrund, damit Screenreader es überspringen.

Sonderfälle: Bei Audio und Video reicht an dieser Stelle eine beschreibende Bezeichnung (die Alternativen regeln die 1.2.x-Kriterien); CAPTCHAs brauchen einen Alternativweg über einen anderen Sinneskanal.

Wen betrifft es besonders?

Blinde und sehbehinderte Menschen, deren Screenreader ohne Alt-Text nur „Grafik“ ansagen kann – außerdem Nutzer mit abgeschalteten Bildern und nebenbei Suchmaschinen, die Bilder über Text verstehen.

Richtig & falsch im Code

<!-- Falsch: kein alt – der Screenreader liest den Dateinamen vor -->
<img src="team-0234-final-v2.jpg" />

<!-- Falsch: Deko-Bild mit überflüssigem alt – erzeugt Lärm -->
<img src="zierlinie.svg" alt="Dekorative Linie" />

<!-- Richtig: informatives Bild mit Aussage -->
<img src="umsatz-2025.svg" alt="Umsatz 2025: 4,2 Mio. Euro, plus 12 % zum Vorjahr" />

<!-- Richtig: dekoratives Bild wird ignoriert -->
<img src="zierlinie.svg" alt="" />

<!-- Richtig: funktionales Icon – benannt nach der Funktion -->
<button>
  <svg aria-hidden="true" focusable="false"><!-- Lupen-Pfad --></svg>
  <span class="visually-hidden">Suchen</span>
</button>

Wie man gute Alternativtexte formuliert, behandelt ausführlich Alt-Texte richtig schreiben; für Icons und SVGs gibt es eigene Muster, für Diagramme strukturierte Alternativen bis zur Datentabelle.

So testest du es

1. Automatisch: axe oder WAVE finden fehlende alt-Attribute zuverlässig – aber nicht, ob der Text sinnvoll ist.
2. Manuell: Mit NVDA oder VoiceOver über die Bilder navigieren: Wird die Information verständlich angesagt? Wird Deko übersprungen?
3. Redaktionstest: Bilder im Browser abschalten – geht Information verloren?

Verwandte Themen

• Alt-Texte richtig schreiben – die Formulierungs-Anleitung
• Icons & SVGs und barrierefreie Diagramme
• Bild-SEO – dieselbe Arbeit, zweiter Gewinn