Ein Alt-Text (Alternativtext) ist eine kurze Textbeschreibung eines Bildes, die im HTML-Attribut alt hinterlegt wird: <img src="team.jpg" alt="Renato Jagarcic am Schreibtisch bei der Prüfung einer Website">. Screenreader lesen den Alt-Text vor, Browser zeigen ihn an, wenn das Bild nicht geladen werden kann, und Suchmaschinen nutzen ihn, um Bildinhalte zu verstehen.
Warum sind Alt-Texte so wichtig?
Blinde und stark sehbehinderte Menschen erfahren nur über den Alt-Text, was ein Bild zeigt oder bewirkt. Das WCAG-Erfolgskriterium 1.1.1 „Nicht-Text-Inhalt“ (Stufe A) verlangt für alle informativen Bilder eine gleichwertige Textalternative. Fehlende oder nichtssagende Alt-Texte gehören zu den häufigsten Barrieren im Web – und sie sind auch nach dem BFSG relevant.
So schreiben Sie gute Alt-Texte
- Zweck statt Aussehen: Beschreiben Sie, welche Information das Bild im Kontext vermittelt.
- Kurz und präzise: Meist genügen ein bis zwei Sätze, Richtwert unter 150 Zeichen.
- Kein „Bild von …“: Screenreader kündigen Bilder bereits als solche an.
- Verlinkte Bilder: Der Alt-Text beschreibt das Linkziel, z. B. „Zur Startseite“ beim Logo.
- Dekorative Bilder: Leeres Attribut
alt=""setzen, damit Screenreader sie überspringen (siehe dekoratives Bild). - Komplexe Grafiken: Diagramme brauchen zusätzlich eine ausführliche Beschreibung im Text.
- Text in Bildern: Den enthaltenen Text vollständig in den Alt-Text übernehmen.
Häufige Fragen zum Alt-Text
Wie lang darf ein Alt-Text sein?
Es gibt keine feste Grenze, aber kurze Alt-Texte bis etwa 150 Zeichen sind am nutzerfreundlichsten. Längere Erklärungen gehören in den sichtbaren Text oder eine Bildbeschreibung.
Hilft der Alt-Text bei SEO?
Ja. Suchmaschinen und KI-Systeme nutzen Alt-Texte, um Bilder zu verstehen. Sie sollten aber für Menschen geschrieben werden – Keyword-Stuffing schadet der Barrierefreiheit.
Verwandte Begriffe: Textalternative, Dekoratives Bild, Nicht-Text-Inhalte, Screenreader