Skip Links

TL;DR

Alt-Texte beschreiben Bilder für Screenreader-Nutzer und werden angezeigt, wenn Bilder nicht laden – sie sind Pflicht für jedes informative Bild.

Was sind Alternativtexte?

Alternativtexte (Alt-Texte, Alt-Attribute) sind Textbeschreibungen für Bilder. Sie werden von Screenreadern vorgelesen und erscheinen, wenn ein Bild nicht geladen werden kann.

HTML: <img src="bild.jpg" alt="Beschreibung des Bildes">

Regeln für gute Alt-Texte

• Kurz und prägnant: 1-2 Sätze maximum
• Beschreibe den Inhalt: Was ist zu sehen?
• Kontext beachten: Was ist für das Verständnis relevant?
• Keine "Bild von...": Screenreader kündigen Bilder an
• Keine Keywords: Alt-Text ist kein SEO-Hack

Wann alt="" (leer)?

Dekorative Bilder, die keinen Inhalt transportieren, bekommen ein leeres alt-Attribut. So werden sie von Screenreadern ignoriert:

• Hintergrundmuster
• Dekorative Icons neben Text
• Rein atmosphärische Bilder

Beispiele

• Schlecht: "Bild", "foto1.jpg", "image"
• Auch schlecht: "Foto einer Frau die lächelt im Büro am Schreibtisch mit Laptop"
• Gut: "Designerin arbeitet an einem Webprojekt"

Alt-Texte und SEO

Google kann Bilder lesen, nutzt aber Alt-Texte für Kontext. Gute Alt-Texte helfen bei der Bildersuche – aber schreibe sie für Menschen, nicht für Suchmaschinen.

Fazit

Jedes informative Bild braucht einen Alt-Text. Es ist wenig Aufwand mit großer Wirkung: Barrierefreiheit verbessert, Fallback bei Ladeproblemen, SEO-Bonus. Keine Ausreden.