1.1.1 Nicht-Text-Inhalte - A

WCAG-Definition

Alle Nicht-Text-Inhalte, die einem Benutzer präsentiert werden, haben eine textliche Alternative, die denselben Zweck erfüllt, außer:

  • Wenn sie rein dekorativ sind
  • Wenn sie Teil der Benutzereingabe sind
  • Wenn sie nicht geändert werden können

Was zählt als "Non-text Content"?

  • Bilder und Icons: <img>, SVGs, Hintergrundbilder
  • Grafiken und Diagramme: Multimedia- oder interaktive Inhalte
  • Emojis, ASCII-Art, Leetspeak: Symbolische oder kreative Formen
  • Formulare mit visueller Kennzeichnung: z. B. Bild-Buttons

Ausreichende Techniken

H37: alt-Attribut bei <img>

<img src="hund.jpg" alt="Ein Labrador-Welpe liegt auf einer Wiese.">
// alt wird von Screenreadern statt des Bildes vorgelesen.
// Muss den Zweck oder Inhalt des Bildes beschreiben.

H67: Leeres alt-Attribut für dekorative Bilder

<img src="trennlinie.svg" alt="">
// Das Bild ist rein dekorativ, soll vom Screenreader ignoriert werden.

G94: Funktionale Bilder beschreiben den Zweck

<a href="/kontakt">
  <img src="mail-icon.svg" alt="Zur Kontaktseite">
</a>

// Kein Bildinhalt, sondern Ziel der Aktion (Kontaktseite) ist relevant.

H36: alt-Attribut bei input type="image"

<input type="image" src="senden.png" alt="Absenden">
// Ohne alt ist das kein nutzbarer Button für Screenreader.

G95: Verwendung von aria-label oder aria-labelledby bei Nicht-Bild-Inhalten (z. B. SVG, <canvas>)

<canvas aria-label="Diagramm: Umsatzentwicklung 2024"></canvas>

H53: <object> mit Fallback-Inhalt

<object data="karte.svg" type="image/svg+xml">
<p>Die Karte zeigt den Standort der Filiale am Hauptbahnhof.</p>
</object>

G143: Alternativen für CAPTCHAs bereitstellen

<img src="captcha.jpg" alt="Geben Sie die 5 Zeichen ein: 5mTx8">
<p>Alternativ: <a href="captcha-audio.mp3">Audio-CAPTCHA</a></p>

Beratungstechniken (Advisory Techniques)

  • G73    Bereitstellung einer langen Beschreibung für komplexe Bilder (z. B. Diagramme, Karten)
  • G68    Verwendung von Textlinks statt nur Icons, z. B. 🏠 Startseite
  • G148    Beschreibung von ASCII-Art und Leetspeak mit <abbr> oder aria-label
  • G207    Bild-Text-Kombination in einem Link zusammenfassen (<a> um Bild + Text)

Fehler (Misserfolge)

  • F3    Bild ohne alt-Attribut oder mit bedeutungslosem Inhalt
  • F30    Wichtiges Bild ohne ausreichende textliche Beschreibung
  • F38    input type="image" ohne sinnvollen alt-Text
  • F65    Bild enthält Text, aber alt enthält nicht denselben Text
  • F67    Verwendung dekorativer Bilder ohne alt="" – wird unnötig vorgelesen
  • F72    CAPTCHA ohne Audio-Alternative