Alternativtexte schreiben

TL;DRTL;DR too long; didn't read. Wörtlich übersetzt "zu lang; nicht gelesen". Überschrift für eine kurze Zusammenfassung eines längeren Artikels oder Beitrags.

Für barrierefreie Bilder braucht es immer dann einen AlternativtextAlt-Text Alternativtext: Textliche Beschreibung eines Bildes für Menschen, die es nicht sehen können., wenn das Bild für den Inhalt oder die Navigation relevant ist. Schreibe prägnante, kontextbezogene und sachliche Alt-Texte (max. 80–100 Zeichen). Navigationselemente wie Pfeile oder Menü-Icons brauchen eine Funktion als Alt-TextAlt-Text Alternativtext: Textliche Beschreibung eines Bildes für Menschen, die es nicht sehen können. („Nächstes Bild“, „Menü öffnen“). Ist ein Bild nur dekorativ, bleibt die Beschreibung leer. Beschreibe keine Dateinamen, keine reinen Layoutgrafiken, keine Redundanz.

Was ist ein Alternativtext eigentlich?

Alternativtexte sind unsichtbare Bildbeschreibungen im HTML-Code, die ScreenreaderScreenreader Software, die Texte am Bildschirm laut vorliest oder als Braille ausgibt. auslesen. Sie ersetzen das Bild durch eine sinnvolle Beschreibung, mit der auch blinde oder sehbehinderte Nutzer*innen den Informationsgehalt erfassen.

Eine Bildunterschrift ist NICHT dasselbe! Eine Bildunterschrift ergänzt den Text; der Alt-Text beschreibt das Bild für diejenigen, die es nicht sehen.

Alt-Texte und SEOSEO Search Engine Optimization: Maßnahmen zur Verbesserung der Sichtbarkeit in Suchmaschinen.

Zusätzlich sind Alternativtexte enorm wichtig für Suchmaschinen – nicht nur aufgrund der zusätzlichen Textinhalte, die sonst vielleicht fehlen. Sie ermöglichen auch, dass deine Bilder in der Bildersuche erscheinen – und häufig nicht nur dort, sondern auch zwischen den „normalen“ Suchergebnissen, als Bilder-Block auf der ersten Seite.

So schreibst du gute Alternativtexte

  • Kontext ist alles: Was soll das Bild vermitteln? Beschreibe den Kern der Information im Zusammenhang der Seite.
  • Kurz & knackig: Maximal 80–100 Zeichen, damit die Info in Screenreadern und Braillezeilen passt und schnell verständlich ist.
  • Sachlich & klar: Nur was zu sehen ist, nicht wie es wirkt – und schon gar nicht interpretieren oder werten.
  • Keine Redundanzen: Wörter wie „Bild von…“ oder Namen der Bilddatei kannst du dir sparen – das weiß der Screenreader schon.
  • Einfache SpracheEinfache Sprache Verständliche, klar strukturierte Alltagssprache. Nicht ganz so streng geregelt wie Leichte Sprache.: Schreib klar und verständlich. Komplexe Satzkonstruktionen stören, unnötige Fremdwörter auch.
  • Text im Bild? Muss in den Alt-Text! Sonst bleibt er blinden Menschen verborgen

Der Kern eines guten Alt-Textes ist Inhalt. Beschreibe, was auf dem Bild zu sehen ist und vor allem: Welche Informationen vermittelt es?

Beispiel: Ein Bild zeigt eine Katze, die auf einem Sofa schläft.

  • Schlechter Alt-Text: <img src="katze.jpg" alt="Katze"> (Zu allgemein)
  • Besserer Alt-Text: <img src="katze.jpg" alt="Schlafende Katze auf einem bequemen, grauen Sofa"> (Gibt mehr Kontext)
  • Optimaler Alt-Text: <img src="katze.jpg" alt="Katze Max schläft friedlich auf dem Sofa, nachdem sie den ganzen Tag Mäuse gejagt hat"> (Vermittelt die Information, die der Text drumherum unterstützt)

Wenn das Bild weggelassen würde, fehlt dann eine wichtige Information? Wenn ja, muss diese Information in den Alt-Text.

Produktbeschreibungen

Für Shop-Websites dürfte der Nutzen sinnvoller Beschreibungstexte noch schwerer wiegen, denn oft sind Produktdetails nur Bildern zu entnehmen, teilweise sogar Abmessungen und Packungsinhalte nur abfotografiert oder grafisch dargestellt. All das entgeht dann sowohl den Suchmaschinen als auch potentiellen Kunden – die dann woanders kaufen, nur weil dort die Beschreibungen in Textform vorliegen.

Hier sollte allerdings darauf geachtet werden, Informationen, die zusätzlich als „echter“ Text dargestellt werden, nicht nochmal zusätzlich in die Alt-Tags der Bilder zu setzen, um doppelte Texte für Screenreader zu vermeiden.

Alt-Texte für Navigation & Icons

Navigationselemente (Pfeile, Icons, „Hamburger-Menü“) brauchen immer eine Funktion als Alt-Text:

  • Pfeil nach rechts: alt="Nächste Seite" oder besser noch eine ausführliche Beschreibung, zu welchem Inhalt auf der folgenden Seite verlinkt wird – am besten für alle Nutzer sichtbar.
  • Hamburger-Menü: alt="Menü öffnen"
  • Schließen-Icon: alt="Dialog schließen"

Schreibe immer, was das Element macht, nicht wie es aussieht!

Wann bleibt das Alt-Attribut leer?

  • Dekorative Bilder: Wenn ein Bild nur zur Gestaltung beiträgt und keine Zusatzinformation liefert, wird das Alt-Attribut leer gesetzt (alt="") oder mit role="presentation" markiert.
  • Beispiel: Trennlinien, Hintergrundgrafiken, rein dekorative Muster.

Sonderfall: Komplexe Grafiken

Bei Infografiken, Diagrammen oder Karten reicht ein Alt-Text nicht aus. Dann:

  1. Kurzer Alt-Text („Umsatzentwicklung 2024 als Liniendiagramm“)
  2. Längere Beschreibung im Text oder per aria-describedby

➡️ Details gehören also nicht in den Alt-Text, sondern an anderer Stelle auf der Seite.

Keine Panik vor KI – aber Kontext prüfen!

KI-Generatoren können Alt-Text-Vorschläge machen, aber: Die Bedeutung im Kontext erkennt nur ein Mensch. Ein Apfel in der Hand der Rentnerin? Je nach Kontext kann das Gesundheit, Sortenvielfalt oder Greifhilfe bedeuten.