Alt-Text: Die Stimme, die Bilder zum Sprechen bringt

Alt-Text ist wie ein Übersetzer für Bilder, denn er macht sie für alle verständlich. Er hilft Suchmaschinen, weil er Inhalte erklärt, und er unterstützt Sehbehinderte, weil Screenreader ihn vorlesen. Ohne ihn bleiben Websites stumm – und verlieren Reichweite sowie Nutzer.

Beispiel:

<img src="größenvergleich.jpg" 
alt="Alt-Text Beispiel: Die blau-weiße Erde und der braune Mond
sind direkt nebeneinander abgebildet. Schwarzer Hintergrund.">

Was ist Alt-Text – und warum braucht man ihn?

Alt-Text ist ein kurzer Satz, der Bilder beschreibt. Er steckt im Code, wenn das Bild nicht lädt, oder wird von Screenreadern genutzt. Maximal 125 Zeichen lang, aber er hat riesige Wirkung. Denn Google liebt klare Infos, und Barrierefreiheit wird immer wichtiger.

Beispiel:

Schlecht: „Blume“
Gut: „Rote Tulpe mit Tauperlen im Morgensonne“

So schreiben Sie perfekten Alt-Text – Schritt für Schritt

Seien Sie konkret, als würden Sie einem Kind das Bild erklären.
Nutzen Sie Keywords, aber stopfen Sie sie nicht künstlich ein.
Vermeiden Sie „Bild von“, weil Screenreader das automatisch sagen.
Fokussieren Sie den Zweck: Ein Logo braucht den Firmennamen, während ein Produkt Details wie Farbe oder Größe braucht.

Beispiel-Update:

Noch besser: „Frau mit roter Brille liest Buch im Strandkorb“ – denn so sieht der Nutzer das Bild im Kopf.

Häufige Fehler – und wie Sie sie fixen

Zu kurz: „Essen“ sagt nichts. Besser: „Gegrillter Lachs mit Zitrone und Kräuterdip auf Holztisch“.
Zu lang: „Braune Holztür mit blauer Klinke, gelber Hauswand und Topfpflanzen daneben“ → Kürzen Sie aufs Wesentliche.
Irrelevant: Beschreiben Sie keine Pixel oder Hintergründe, wenn sie nichts zum Inhalt beitragen.
Vergesslich: Bilder in Slidern oder Buttons brauchen auch Alt-Texte!

Tipp: Stellen Sie sich vor, Sie müssen das Bild per SMS beschreiben. Was schreiben Sie? – Und dann streichen Sie alles Unwichtige.

Alt-Text und SEO: So gewinnen Sie doppelt

Suchmaschinen „sehen“ keine Bilder, sondern lesen Alt-Texte. Deshalb hilft guter Alt-Text beim Ranking, wenn er Keywords enthält. Aber übertreiben Sie nicht: „Günstige Sneaker Berlin Sale Online Shop“ wirkt wie Spam. Besser: „Rote Laufschuhe mit Discount-Preis im Berliner Online-Shop“.

Extra-Tipp: Nutzen Sie Tools wie Yoast SEO, um Alt-Texte auf Keyword-Optimierung zu prüfen. Denn sie zeigen, ob Ihre Beschreibungen natürlich klingen.

Alt-Text und KI: Fluch oder Segen?

KI-Tools wie DALL·E oder ChatGPT generieren Alt-Texte automatisch. Aber Vorsicht: Sie übersehen oft Details oder Kontext. Beispiel: Ein KI-Text nennt „Menschen im Park“, obwohl das Bild einen Hochzeitsfotografen zeigt.

Trotzdem hilft KI als Startpunkt. Nutzen Sie sie für Ideen, aber passen Sie die Texte manuell an. Tools wie „Alt Text Generator“ von AccessibilityChecker.org liefern Basis-Texte, die Sie dann verfeinern.

Best Practices: So wird Alt-Text Ihr Superheld

Priorisieren Sie: Produktbilder und Infografiken zuerst – denn sie sind inhaltlich wichtig.
Emotionen einbauen: „Strahlendes Kind mit Eiscreme“ wirkt lebendiger als „Kind mit Eis“.
Testen Sie: Nutzen Sie Screenreader wie NVDA, um zu hören, wie Ihre Texte klingen.
Leer lassen, wenn nötig: Dekorative Bilder (z. B. Trennlinien) brauchen alt=””, damit Screenreader sie ignorieren.

Achtung: Captions oder Bildunterschriften ersetzen keinen Alt-Text! Jedes Medium braucht eigene Infos.

Fazit: Kleine Texte, große Wirkung

Alt-Texte im Webdesign sind wie ein Freund, der Blinden Bilder beschreibt und Google sagt, was auf Ihrer Seite wichtig ist. Schreiben Sie klar, bleiben Sie natürlich, und denken Sie an beide Zielgruppen. So machen Sie das Web bunter und gerechter – und das in nur 30 Sekunden pro Bild!