Konzepte

Alternativtext

Auch: alternative text, alt attribute, alt

Die Textalternative für Nicht-Text-Inhalte. Screenreader lesen den Alternativtext anstelle des Bildes vor; bei einem Ladefehler sehen sehende Nutzer ihn im Bild. Rein dekorative Bilder erhalten `alt=""` — das Attribut darf nicht fehlen.

Alternativtext — kurz für „alternative text“ — ist die textuelle Beschreibung eines Nicht-Text-Bildes, eingebettet über das HTML-Attribut alt. Er ist das meistdiskutierte Barrierefreiheitsmerkmal im Web und dasjenige mit dem konstantesten Fehlermuster: Entwickler lassen ihn entweder ganz weg oder setzen generische Platzhalter ein, die nichts aussagen.

Was Alternativtext tatsächlich leistet

Drei Zielgruppen konsumieren Alternativtext:

  1. Screenreader-Nutzer. Der Screenreader liest den Alternativtext anstelle des Bildes vor. Wenn das Bild eine Information vermittelt (etwa „das Diagramm zeigt, dass sich die Klagezahlen von 2022 bis 2025 verdoppelt haben“), muss diese Information im Alternativtext oder in einer angrenzenden Bildunterschrift enthalten sein.
  2. Sehende Nutzer bei defekten Bildern. Wenn ein Bild nicht lädt, erscheint der Alternativtext an seiner Stelle — ein kleiner, aber echter Rückfallanker.
  3. Suchmaschinen. Alternativtext ist eines der wenigen rankingwirksamen Signale dafür, was ein Bild tatsächlich zeigt.

Der Entscheidungsbaum

Für jedes ausgelieferte Bild braucht es eine explizite Antwort auf die Frage „Welche Art von Bild ist das?“:

  • Funktionsbild — ein Symbol, das als einziger visueller Hinweis für eine Schaltfläche oder einen Link dient. Der Alternativtext beschreibt die Aktion, nicht das Symbol: alt="Menü öffnen", nicht alt="Hamburger-Symbol". Dem Nutzer ist es gleichgültig, wie es aussieht; ihn interessiert, was ein Antippen bewirkt.
  • Informatives Bild — ein Foto, Diagramm, Screenshot oder eine Illustration, die Inhalt vermitteln. Der Alternativtext beschreibt die vermittelte Information auf dem richtigen Detailniveau. Ein Mitarbeiterfoto auf einer „Über uns“-Seite: alt = „Dr. Maria Müller, Forschungsleiterin.“ Ein Statistikdiagramm: alt = die zentrale Aussage, wobei die zugrunde liegenden Daten entweder in einer Bildunterschrift oder in einer benachbarten Tabelle stehen.
  • Dekoratives Bild — Muster, Trennelemente, abstrakte Fotos als gestalterisches Beiwerk. alt="" (leer, aber das Attribut muss vorhanden sein) weist Screenreader an, das Bild zu überspringen.
  • Komplexes Bild — Diagramme, Infografiken, dichte Grafiken. Kurzer Alternativtext für die wesentliche Aussage plus eine ausführlichere Beschreibung in der Nähe (aria-describedby auf einen Absatz oder ein angrenzend auffaltbares „Vollständige Beschreibung“-Element).

Was in der Praxis schiefläuft

Drei Fehlermuster erklären die meisten Alternativtext-Fehler:

  • Vollständig fehlend. <img src="..."> ohne jegliches alt-Attribut. Screenreader lesen dann den Dateinamen des Bildes vor — fast immer bedeutungsloser Zeichensalat.
  • Dateiname oder generischer Textalt="DSC_0042.jpg" oder alt="Bild". Weniger schlimm als das Weglassen, aber verwirrender als hilfreich.
  • Überdetaillierter dekorativer Inhalt. Ein rein ästhetisches Trennelement mit alt="Abstraktes orange-rotes Schmuckelement am oberen Seitenrand" zwingt den Screenreader dazu, es vorzulesen — ohne dem Nutzer irgendeinen Mehrwert zu bieten.

KI-generierter Alternativtext

Die meisten modernen Bild-Upload-Pipelines schlagen heute automatisch Alternativtext über ein Vision-Modell vor. Das ist als erster Entwurf genuinen Nutzen, aber zwei Vorbehalte gelten:

  1. Das Modell kann sicher falsch liegen — besonders bei Diagrammen, Schaubildern und kulturspezifischen Inhalten. Jeder Vorschlag sollte vor der Veröffentlichung manuell geprüft werden.
  2. Generierter Alternativtext sollte einen vorhandenen, redaktionell erstellten Alternativtext nicht stillschweigend überschreiben. Viele Accessibility-Overlay-Produkte versagen hier — sie ersetzen sorgfältig verfasste redaktionelle Alternativtexte durch nichtssagende Standardbeschreibungen.