Alt-Text richtig schreiben

Wenn klar ist, was Alt-Text ist, kommt die eigentliche Arbeit: ihn gut zu formulieren. Die gute Nachricht — das folgt ein paar klaren Prinzipien, die Sie in Minuten verinnerlichen. Diese Anleitung ist Teil unseres Alt-Text-&-SEO-Guides und zeigt Schritt für Schritt, wie aus einem Bild ein treffender Alt-Text wird.

1. Das Grundprinzip: die Leitfrage

Bevor Sie an Regeln denken, hilft eine einzige Frage, die fast jeden Alt-Text richtig macht:

Diese Frage zwingt Sie, über den Zweck des Bildes nachzudenken statt nur über sein Aussehen. Ein Produktfoto soll das Produkt verkaufen → beschreiben Sie das Produkt. Ein Foto in einem Ratgeber soll eine Handlung zeigen → beschreiben Sie die Handlung. Ein dekoratives Muster trägt nichts bei → es braucht keine Beschreibung. Aus dem Zweck ergibt sich der Text fast von selbst.

2. Schritt 1: Welche Art von Bild ist es?

Der wichtigste Schritt kommt vor dem ersten Wort: Ordnen Sie das Bild einer von vier Kategorien zu. Diese Logik stammt aus den offiziellen W3C-Empfehlungen und beantwortet die meisten Zweifelsfälle automatisch.

1. Informativ — das Bild vermittelt Information (Produktfoto, Foto im Artikel, Diagramm). → Beschreibenden Alt-Text schreiben.
2. Funktional — das Bild ist ein Link oder Button (Lupe = Suche, Logo, das zur Startseite führt). → Die Aktion bzw. das Ziel beschreiben, nicht das Aussehen: alt="Suche".
3. Dekorativ — das Bild trägt nichts zur Information bei (Trennlinie, Hintergrund, Ornament). → Leeres alt="".
4. Komplex — das Bild enthält viele Daten (Infografik, ausführliches Diagramm). → Kurze Kernaussage im Alt-Text, Details daneben im Text/Tabelle.

Schon diese Einordnung verhindert die häufigsten Fehler — etwa dekorative Bilder zu beschreiben oder funktionale Bilder bloß optisch zu erfassen.

Die Einordnung an einem Beispiel

Stellen Sie sich eine Seite mit vier Bildern vor — so würde die Einordnung aussehen:

• Produktfoto der Stiefelette → informativ → alt="Rote Lederstiefelette mit Blockabsatz, Seitenansicht"
• Lupen-Icon in der Suchleiste → funktional → alt="Suche"
• Geschwungene Trennlinie zwischen Absätzen → dekorativ → alt=""
• Infografik zu Materialeigenschaften → komplex → kurzer Alt-Text + Details als Text/Tabelle

Vier Bilder, vier unterschiedliche Behandlungen — alle ergeben sich automatisch aus der Kategorie. Wenn Sie unsicher sind, beginnen Sie also nie mit dem Schreiben, sondern mit der Einordnung.

3. Schritt 2: Die Regeln für beschreibende Alt-Texte

Für informative Bilder — die Mehrzahl im Web — gelten diese Regeln:

Beschreiben Sie Inhalt und Funktion, nicht das Format

Was ist zu sehen, und warum steht es hier? „AVIF-Datei eines Schuhs“ ist wertlos. „Rote Lederstiefelette, Seitenansicht“ trifft den Inhalt.

Das Wichtigste zuerst

Screenreader-Nutzer hören den Anfang zuerst und brechen oft ab; abgeschnittene Texte behalten ebenfalls nur den Anfang. Stellen Sie das zentrale Detail nach vorn: „Rote Stiefelette …“ statt „Seitenansicht eines Schuhs in der Farbe Rot …“.

Kurz halten — in der Regel unter 125 Zeichen

Das ist lang genug für eine präzise Beschreibung und kurz genug, dass gängige Screenreader nicht abschneiden. Reicht der Platz nicht, ist das ein Zeichen, dass Details woanders hingehören (siehe komplexe Bilder).

Kein „Bild von“ oder „Foto von“

Screenreader kündigen bereits an, dass es sich um ein Bild handelt. „Bild von einer roten Stiefelette“ verschwendet die ersten, wichtigsten Worte.

Natürliche Sprache — ein Keyword, wenn es passt

Bauen Sie Ihr Hauptkeyword höchstens einmal natürlich ein. Eine Keyword-Kette („schuh stiefel rot kaufen günstig“) ist für Google ein Spam-Signal und für Screenreader eine Qual.

Kontext entscheidet

Dasselbe Bild kann je nach Seite anderen Alt-Text verdienen — dazu gleich mehr.

Schreibstil & Ton

Alt-Text ist sachliche Beschreibung, keine Werbung. Verzichten Sie auf Superlative und Marketing-Floskeln („wunderschöne, hochwertige Premium-Stiefelette“) und bleiben Sie konkret und neutral. Der beste Alt-Text klingt fast langweilig — genau das wollen Screenreader-Nutzer und Suchmaschinen. Schreiben Sie in der Sprache der Seite (deutscher Alt-Text auf der deutschen Seite) und vermeiden Sie Abkürzungen, die vorgelesen seltsam klingen.

4. Länge & Detailtiefe richtig dosieren

„Unter 125 Zeichen“ ist eine Faustregel, kein starres Limit. Das Prinzip dahinter: so viel wie nötig, so wenig wie möglich.

• Einfaches Bild (Produktfoto, Porträt): ein präziser Satz.
• Bild mit Text (Banner, Grafik mit Aussage): den wichtigen Text mit aufnehmen — alt="Gutschein: 15 % mit Code FRISCH15".
• Komplexe Grafik (Diagramm): kurze Kernaussage im Alt-Text, vollständige Daten im Fließtext oder — besser — in einer echten HTML-Tabelle.

Warum die Tabelle besser ist: Text, der in einer Bilddatei „eingesperrt“ ist, kann weder von Screenreadern gelesen noch von Google indexiert werden. Eine Tabelle daneben löst beides zugleich.

5. Wie der Kontext den Alt-Text verändert

Ein und dasselbe Foto kann auf verschiedenen Seiten unterschiedlichen Alt-Text verdienen — weil der Zweck ein anderer ist. Beispiel: ein Foto einer Läuferin, die ihren Schuh bindet.

Beide sind korrekt — sie betonen nur den jeweils relevanten Aspekt. Fragen Sie sich daher immer: Worum geht es auf dieser Seite?

6. Vorher/Nachher: Alt-Texte verbessern

Am schnellsten lernt man am konkreten Fall. Vier typische schwache Alt-Texte — und wie man sie repariert:

Das Muster ist immer dasselbe: vom Dateinamen oder der Stichwortliste hin zu einem konkreten, natürlichen Satz mit dem Wichtigsten zuerst.

7. Spezialfälle

Produktbilder

Nennen Sie Produktart und die unterscheidenden Merkmale, nach denen Kunden suchen: Farbe, Material, Variante, Perspektive. Reihenfolge: das Kaufentscheidende zuerst. „Lederstiefelette, rot, Blockabsatz, Seitenansicht“ ist robuster als „Seitenansicht eines roten Schuhs“. Jede Variante und jede Galerie-Ansicht bekommt einen eigenen Text. Mehr dazu im Leitfaden Alt-Text für E-Commerce.

Logos

Benennen Sie die Identität, statt das Aussehen zu beschreiben: alt="AutoAlt.ai Logo". Ein verlinktes Logo (z. B. zur Startseite) bleibt funktional — der Alt-Text nennt weiterhin die Marke, nicht „Startseite“.

Icons & buttons

Beschreiben Sie die Aktion, nicht die Form: alt="Warenkorb", alt="Suche", alt="Menü". Hat ein Icon daneben sichtbaren Text mit gleicher Bedeutung, kann das Icon dekorativ (alt="") sein, um Doppelungen zu vermeiden.

Diagramme & Infografiken

Kurze Kernaussage als Alt-Text, Details daneben: alt="Balkendiagramm: organischer Traffic +40 % nach Einführung von Alt-Texten" — die einzelnen Werte dann im Text oder einer Tabelle.

Bilder mit eingebettetem Text

Enthält ein Bild wichtigen Text, muss dieser in den Alt-Text. Besser noch: wichtigen Text gar nicht als Bild rendern, sondern als echten HTML-Text.

Verlinkte Bilder

Ist ein Bild gleichzeitig ein Link und gibt es keinen begleitenden Linktext, muss der Alt-Text das Ziel der Funktion beschreiben — nicht nur das Motiv. Ein Produktbild, das zur Produktseite führt, beschreibt das Produkt (das ist zugleich das Ziel). Ein Pfeil-Icon, das zur nächsten Seite führt, bekommt alt="Nächste Seite", nicht alt="Pfeil".

Dekorative Bilder

Leeres alt="". Keine Beschreibung, kein Leerzeichen zwischen den Anführungszeichen, und das Attribut keinesfalls weglassen.

Abstrakte oder unklare Bilder

Manche Bilder zeigen nichts Konkretes — ein abstraktes Muster, eine Stimmungsaufnahme, ein Farbverlauf. Fragen Sie auch hier nach dem Zweck: Trägt das Bild Bedeutung für die Seite (etwa als symbolische Illustration eines Themas), beschreiben Sie diese Bedeutung knapp. Ist es reine Optik, ist es dekorativ → alt="". Im Zweifel gilt: Beschreiben Sie, was ein sehender Nutzer als Aussage des Bildes verstehen würde, nicht jede visuelle Einzelheit.

8. Häufige Zweifelsfälle

• Mehrere fast gleiche Bilder (Galerie): jede Ansicht beschreibt ihren Unterschied — „Detail der Sohle“, „von hinten getragen“ — statt überall denselben Text.
• Screenshot: beschreiben Sie, was der Screenshot zeigt („Dashboard mit Umsatzkurve und Filterleiste“), nicht das Wort „Screenshot“.
• Dekorativ, aber stimmungstragend (z. B. ein Hero-Foto): trägt es Bedeutung für die Seite, kurz beschreiben; ist es reines Füllmaterial, alt="".
• Bild neben gleichlautendem Text: wenn die Bildunterschrift bereits alles sagt, kann der Alt-Text knapper sein oder das Bild dekorativ behandelt werden — Doppelungen vermeiden.
• Emoji oder Symbol als Bild: beschreiben Sie die Bedeutung, nicht das Zeichen.

9. Ein wiederholbarer Workflow

Bei vielen Bildern brauchen Sie keinen Geistesblitz pro Bild, sondern einen Ablauf, den auch ein Team gleich umsetzt:

1. Einordnen: informativ, funktional, dekorativ oder komplex?
2. Zweck klären: Worum geht es auf dieser Seite?
3. Beschreiben: ein natürlicher Satz, Wichtigstes zuerst, unter ~125 Zeichen.
4. Prüfen: die drei Fragen — Nichts Wichtiges verpasst? Kern am Anfang? Klingt es vorgelesen natürlich?
5. Konsistent halten: Namens- und Stilkonvention im Team, damit Qualität nicht auseinanderdriftet.

Ein letzter Tipp für Teams: Legen Sie zwei, drei Musterbeispiele für typische Bildtypen Ihres Shops fest und dokumentieren Sie sie. So schreiben alle Beteiligten im selben Stil, und neue Mitarbeitende sind in Minuten eingearbeitet — das hält die Qualität über den gesamten Katalog konstant.

10. Häufige Fehler beim Schreiben

• • Keyword-Stuffing — aneinandergereihte Suchbegriffe statt eines Satzes.
  • Dateiname als Alt-Text — alt="IMG_4821" hilft niemandem.
  • Identischer Text auf vielen Bildern — gibt Google keinen Grund, eines zu ranken.
  • Dekoratives beschreiben oder umgekehrt Informatives auf alt="" setzen.
  • Roman schreiben — alles über ein, zwei Sätze gehört in Bildunterschrift oder Fließtext.
  • Format/Auflösung nennen — „PNG, 1200×800“ interessiert niemanden.

  Viele Beispiele für gelungene Alt-Texte nach Bildtyp und Branche sammelt der Leitfaden Alt-Text Beispiele.

11. Häufige Fragen