Alt-Texte für Produktbilder richtig schreiben

Das Wichtigste in Kürze

• Ein Alt-Text beschreibt Inhalt oder Funktion eines Bildes, nicht sein Aussehen. Die Faustfrage lautet: Was würden Sie am Telefon sagen, damit Ihre Kundin dieselbe Entscheidung treffen kann?
• Dekorative Bilder bekommen ein leeres Alt-Attribut: alt="". Das ist etwas völlig anderes als ein fehlendes Attribut – ohne Attribut liest ein Screenreader oft den Dateinamen vor.
• Ist das Bild ein Link oder eine Schaltfläche, beschreibt der Text das Ziel oder die Aktion, nicht das Motiv.
• Steht Text im Bild – Sale-Banner, Rabattstörer, Gutscheincode –, gehört dieser Text in den Alt-Text.
• Fehlende Alternativtexte sind der Befund, den wir am häufigsten messen. Technisch trivial, in der Menge trotzdem der größte Posten, weil ihn keine Automatik erfinden kann.
• Ein Prüfwerkzeug sieht nur, ob ein Alt-Attribut da ist – nicht, ob der Text etwas taugt. Genau dort beginnt Redaktionsarbeit.

Was ein Alt-Text leistet – und was ein Scan davon sieht

Der Alternativtext ist der Text, der ein Bild ersetzt, wenn das Bild nicht ankommt. Er steht im Quelltext im Attribut alt und bleibt im Browser unsichtbar. Gebraucht wird er von blinden und stark sehbehinderten Kundinnen und Kunden, deren Screenreader ihn vorliest, von Menschen mit sehr langsamer Verbindung, bei denen Bilder gar nicht laden, und von Suchsystemen, die einordnen wollen, was auf dem Bild zu sehen ist.

Die Anforderung dahinter ist WCAG 1.1.1 „Nicht-Text-Inhalte“ (Stufe A) – die unterste Stufe, also Fundament und nicht Kür. In der EN 301 549, auf die die BFSG-Praxis technisch Bezug nimmt, ist es Abschnitt 9.1.1.1. Der Kern in einem Satz: Jeder Nicht-Text-Inhalt braucht eine Textalternative, die denselben Zweck erfüllt wie das Bild.

Fehlt das Attribut, behilft sich Vorlesesoftware oft mit dem Dateinamen. Aus einem Produktfoto wird dann „i-m-g-4-7-2-9-final-Punkt-j-p-g“ – mitten in der Produktbeschreibung, bei jedem Bild der Galerie erneut. Wer so einkauft, hört Buchstabenketten statt Argumente.

Das ist der Befund, den wir in unseren Prüfläufen am häufigsten messen. Er ist zugleich das beste Beispiel für die Grenze automatischer Prüfung: Ein Werkzeug sieht, ob ein Alt-Attribut vorhanden ist. Ob der Text etwas taugt, sieht es nicht. alt="Bild" besteht jeden automatischen Test und hilft niemandem. Deshalb ist dieser Artikel eine Anleitung für Menschen und nicht für Skripte.

Ob Ihr Angebot überhaupt in den Anwendungsbereich fällt, ist eine eigene Frage – die Einordnung dazu steht in Ist mein Onlineshop BFSG-pflichtig?. Für die Redaktionsarbeit an Bildern spielt sie keine Rolle: Gute Alt-Texte verkaufen auch dann besser, wenn niemand sie verlangt.

Fünf Bildtypen, fünf Regeln

Bevor Sie einen einzigen Text schreiben, klären Sie eine Frage: Welche Sorte Bild ist das? Fast alle Fehler entstehen dadurch, dass ein Bild in die falsche Schublade sortiert wird.

1. Informative Bilder: beschreiben, was man wissen muss

   Produktfotos, Detailaufnahmen, Anwendungsbilder, Karten. Der Text nennt, was für die Entscheidung zählt: Was ist das Produkt, welche Farbe, welche Ansicht, welches Material. Beschreiben Sie den Inhalt, nicht die Fotografie – „Vorderansicht“ ja, „warmes Gegenlicht, unscharfer Hintergrund“ nein.

2. Dekorative Bilder: leeres Attribut, nicht gar keins

   Stimmungsbilder hinter einer Überschrift, Zierlinien, Verläufe, Muster im Kategoriekopf. Sie tragen keine Information, die nicht schon im Text steht. Solche Bilder bekommen alt="" – zwei Anführungszeichen ohne Leerzeichen dazwischen. Der Screenreader überspringt sie dann stillschweigend.

   Lassen Sie das Attribut dagegen ganz weg, entsteht genau der Befund, den Sie vermeiden wollten. „Dekorativ“ ist keine Ausrede fürs Weglassen, sondern eine bewusste Auszeichnung.

3. Bilder als Link oder Schaltfläche: das Ziel beschreiben

   Steckt das Bild in einem Link oder ist es eine Schaltfläche, ist der Alt-Text der Name dieses Bedienelements. Er beantwortet: Wohin komme ich, was passiert? Ein Lupensymbol heißt alt="Suchen", nicht alt="Lupe". Das Logo in der Kopfzeile heißt alt="Mustershop – zur Startseite". Dasselbe gilt für grafische Schaltflächen vom Typ <input type="image">: Der Text beschreibt die Aktion, nicht die Grafik.

4. Bilder mit Text: der Bildtext gehört in den Alt-Text

   Sale-Banner, Rabattstörer, Gutscheincodes, in eine Grafik gesetzte Versprechen wie „Versandkostenfrei ab 50 Euro“. Wer das Bild nicht sieht, erfährt sonst nichts von der Aktion – auch keine Suchmaschine. Alles, was im Bild steht, muss auch im Text stehen; ist das Banner verlinkt, zusätzlich das Ziel.

5. Komplexe Grafiken: kurzer Alt-Text plus Langbeschreibung

   Größentabellen, Pflegesymbol-Übersichten, Infografiken zum Retourenablauf, Diagramme. In einen Satz passt das nicht. Der Alt-Text benennt, worum es geht („Größentabelle Damen-Oberteile“); die vollständige Information steht sichtbar im Umfeld – als echte Tabelle, als Aufzählung oder in einem aufklappbaren Abschnitt.

   Besser noch: solche Inhalte gar nicht erst als Bild ausliefern. Eine echte Tabelle ist durchsuchbar, vergrößerbar, kopierbar und übersetzbar. Ein Bild ist nichts davon.

Vorher und nachher: Beispiele aus dem Shop

Die folgenden Fälle begegnen uns in Shops regelmäßig. Lesen Sie sie als Muster, nicht als Textbausteine zum Kopieren: Ihr Sortiment hat eigene Merkmale, auf die es ankommt. Als Beispielartikel dient durchgehend ein Strickpullover.

Außerhalb der Produktgalerie liegen die Bilder, die am häufigsten übersehen werden: Sie kommen aus der Vorlage und nicht aus der Redaktion – und wirken dafür auf jeder einzelnen Seite.

Zwei Zeilen scheinen sich zu widersprechen: Dieselbe Sterne-Grafik bekommt einmal einen Text und einmal alt="". Das ist kein Widerspruch, sondern die wichtigste Regel überhaupt – der richtige Alt-Text hängt vom Kontext ab, nicht vom Bild. Steht die Information schon daneben, wäre der Alt-Text eine Dopplung. Steht sie nicht da, muss der Alt-Text sie liefern.

Die Fehler, die wir immer wieder sehen

Diese zehn Muster erklären den Großteil der schlechten Alt-Texte. Neun davon übersteht ein automatischer Test unbeanstandet – ein weiterer Grund, warum ein grüner Haken beim Alt-Text wenig aussagt.

• alt="Bild", alt="Produktfoto", alt="Grafik". Der Bildcharakter wird ohnehin angesagt. Diese Texte füllen das Pflichtfeld und sonst nichts.
• Der Dateiname als Alt-Text. alt="IMG_4729_final_v2.jpg" entsteht, wenn ein Import das Feld automatisch befüllt. Das ist schlechter als ein leeres Feld: Es kostet Vorlesezeit und sagt nichts.
• Keyword-Stuffing. „Pullover Herren Pullover grün günstig kaufen Strick Winter Onlineshop“ ist als gesprochener Satz eine Zumutung – und für die Bildersuche seit Jahren kein Vorteil. Der Text schadet beiden Seiten gleichzeitig.
• „Bild von …“ oder „Foto von …“ als Auftakt. Reine Wiederholung. Beginnen Sie direkt mit dem Inhalt.
• Ein Alt-Text für alle Varianten. Zwölf Farben, zwölfmal derselbe Satz: Die Auswahl wird unbedienbar, obwohl jedes Bild ein Attribut hat.
• Alt-Text auf Dekoration. Jede beschriebene Zierlinie verlängert den Vorlesefluss, ohne etwas beizutragen. Weniger ist hier tatsächlich mehr.
• Fehlendes und leeres Attribut verwechseln. <img src="deko.jpg"> ist ein Befund, <img src="deko.jpg" alt=""> ist erledigt. Optisch kein Unterschied, technisch das Gegenteil.
• Das falsche Feld im Backend. Redaktionssysteme bieten Titel, Beschriftung, Beschreibung und Alternativtext an. Nur das Feld „Alternativtext“ landet im alt-Attribut. Wo es in den gängigen Systemen sitzt, steht in BFSG in Shopware, WordPress und WooCommerce.
• title statt alt. Das Titel-Attribut erscheint als Tooltip bei Mausbedienung. Mit Tastatur oder auf dem Smartphone ist es oft gar nicht erreichbar – ein Ersatz für den Alt-Text ist es nicht.
• Text als Bild. Ganze Absätze, Tabellen oder Gutscheincodes als Grafik. Ein Alt-Text repariert das nur notdürftig: Der Inhalt bleibt unkopierbar, unscharf beim Vergrößern und für Übersetzungen unsichtbar.

Praxisregeln für die Redaktion

Wer täglich Artikel einpflegt, braucht keine Norm, sondern eine Handvoll Regeln, die im Kopf bleiben. Diese fünf reichen für den Alltag.

1. Inhalt vor Länge – Faustregel rund 125 Zeichen

   Als Orientierung haben sich etwa 125 Zeichen eingebürgert, also ein bis zwei knappe Sätze. Die Zahl ist eine Faustregel, keine Grenze: Wenn ein Detail die Kaufentscheidung trägt, darf es hinein. Brauchen Sie deutlich mehr, ist es kein Alt-Text mehr, sondern ein Fall für eine sichtbare Langbeschreibung.

2. Der Kontext entscheidet, nicht das Motiv

   Dasselbe Foto braucht auf der Produktseite, im Blogbeitrag und im Newsletter drei verschiedene Texte. Auf der Produktseite zählt der Artikel, im Ratgeber vielleicht die gezeigte Handbewegung. Fragen Sie deshalb nie „Was ist auf dem Bild?“, sondern „Warum steht dieses Bild an dieser Stelle?“.

3. Schreiben Sie einen Satz, keine Stichwortkette

   „Pullover. Grün. Wolle. Herren.“ wird als vier Sätze mit vier Pausen vorgelesen. Ein zusammenhängender Satz ist schneller erfasst. Vermeiden Sie Abkürzungen, die gesprochen unverständlich sind, und schreiben Sie Maße aus – „1,78 m groß“ statt „178“.

4. Alt-Texte in der Sprache der Seite

   Vorlesesoftware richtet sich nach der Sprachauszeichnung der Seite. Ein englischer Alt-Text auf einer deutschen Seite wird deutsch ausgesprochen und ist dann kaum zu verstehen. In mehrsprachigen Shops gehört der Alt-Text deshalb in jede Sprachversion übersetzt – ein Punkt, den Übersetzungs-Plugins gern auslassen.

5. Nichts doppeln, was daneben schon steht

   Bildunterschrift, Produktname im selben Link, Bewertungszahl im Fließtext: Was sichtbar danebensteht, muss der Alt-Text nicht wiederholen. In diesen Fällen ist alt="" die richtige, bewusste Entscheidung – und keine Nachlässigkeit.

Ein Test für den Zweifelsfall: Lesen Sie den Absatz laut vor und ersetzen Sie das Bild durch Ihren Alt-Text. Ergibt der Text einen sinnvollen Ablauf, passt er. Stolpern Sie, ist er zu lang, zu knapp oder an dieser Stelle überflüssig.

Tausende Produktbilder ohne Alt-Text: womit anfangen?

Der typische Fall in unseren Berichten ist nicht das eine vergessene Bild, sondern der gewachsene Bestand: mehrere tausend Artikel, je drei bis acht Bilder, das Feld seit Jahren leer. Niemand schreibt das an einem Nachmittag. Die gute Nachricht: Sie müssen es auch nicht der Reihe nach abarbeiten.

Reihenfolge nach Wirkung

1. Zuerst alle Bilder, die Links oder Schaltflächen sind

   Ohne Namen ist ein Bedienelement nicht benutzbar – das ist eine andere Schwere als ein unbeschriebenes Foto. Betroffen sind Logo, Warenkorb- und Suchsymbol, Social-Links, verlinkte Banner. Das sind meist eine Handvoll Stellen in der Vorlage: einmal korrigiert, auf allen Seiten erledigt.

2. Dann alles, was aus der Vorlage kommt

   Zahlungsart-Icons, Siegel, Symbolgrafiken, Platzhalterbilder. Auch das ist eine einmalige Korrektur mit shopweiter Wirkung – und sie reduziert die Zahl der Befunde oft stärker als jede Produktpflege.

3. Dekoration als Dekoration kennzeichnen

   Stimmungsbilder, Verläufe, Trenner bekommen alt="". Das ist ohne Texterei zu erledigen, häufig sogar in einem Durchgang je Vorlage, und nimmt einen erheblichen Teil der Restmenge weg.

4. Das erste Bild jeder Produktdetailseite

   Das Hauptbild trägt die Kaufentscheidung. Zweit- und Drittansichten sind wichtig, aber nachrangig. Kategoriebilder sind übrigens häufig reine Dekoration, wenn der Kategoriename direkt daneben steht – prüfen, bevor Sie tausend Texte schreiben, die niemand braucht.

5. Den Rest nach Umsatz und Zugriffen

   Bestseller und meistbesuchte Kategorien zuerst, der lange Rest läuft im Tagesgeschäft mit. Wichtiger als das Aufholen ist die Regel für die Zukunft: Kein neues Produkt geht ohne Alt-Text online. Sonst füllen Sie einen Eimer mit Loch.

Was das Produktdatenfeld automatisch beisteuern kann

Ein großer Teil des Altbestands lässt sich aus vorhandenen Daten erzeugen. Wenn Produktname, Farbe, Material und Bildrolle im PIM oder in der Artikelverwaltung gepflegt sind, liefert ein Muster brauchbare Texte: „Produktname in Farbe, Ansicht“ – etwa „Strickpullover Marius in Dunkelgrün, Vorderansicht“. Für Standard-Produktfotos trägt das erstaunlich weit und ist der einzige realistische Weg, einen vierstelligen Bestand zu erschließen.

Bedingung ist die Datenqualität. Ein Muster, das „Artikel 4711 in Farbe –“ erzeugt, ist keine Verbesserung, sondern nur ein bestandener Test. Prüfen Sie das Ergebnis an einer Stichprobe quer durch die Warengruppen, bevor Sie es über den ganzen Katalog laufen lassen.

Und dann die Grenze, an der das Muster endet: Detail- und Zoomaufnahmen, Modelfotos, Anwendungsbilder, alles mit Text im Bild, alles Verlinkte, Grafiken und Tabellen. Dort steckt genau die Information, die nicht im Datensatz steht. Wer beides trennt, macht aus einem unlösbaren Berg zwei lösbare Aufgaben: eine technische mit Muster, eine redaktionelle mit Liste. Warum das gleichzeitig der Posten ist, an dem Sie mit eigener Redaktionsarbeit am meisten sparen, steht in Was kostet die BFSG-Umsetzung wirklich?.

Was ausdrücklich nicht funktioniert: das Feld irgendwie befüllen, damit der Scan grün wird. Automatisch erzeugte Bildbeschreibungen sind ein Hilfsmittel für den Entwurf, kein Ergebnis – sie kennen weder Ihre Artikelbezeichnung noch den Grund, warum dieses Foto an dieser Stelle steht. Was online geht, muss jemand gelesen haben.

Alt-Texte und SEO: was wirklich zusammenhängt

Alt-Texte sind einer der wenigen Punkte, an denen Barrierefreiheit und Suchmaschinenoptimierung dasselbe wollen. Suchsysteme lesen den Alt-Text, um einzuordnen, was ein Bild zeigt; für die Bildersuche ist er die wichtigste Textangabe überhaupt. Ein Shop, der seine Produktbilder ordentlich beschreibt, gewinnt an beiden Enden.

Die Reihenfolge sollte trotzdem klar sein: Der Text wird für Menschen geschrieben, die das Bild nicht sehen. Wer ihn für Suchmaschinen schreibt, verliert beide Seiten – die Kundin, weil sie eine Wortkette vorgelesen bekommt, und die Sichtbarkeit, weil überladene Attribute längst kein Rankingvorteil mehr sind.

Praktisch heißt das: Das Keyword darf vorkommen, wenn es die Sache beschreibt. „Strickpullover“ steht ohnehin im Text, weil es das Produkt ist. Was nicht hineingehört, sind Zusätze wie „günstig kaufen“ oder „Onlineshop“, die nichts über das Bild aussagen. Ein sprechender Dateiname hilft zusätzlich – strickpullover-marius-dunkelgruen.jpg statt IMG_4729.jpg –, ersetzt den Alt-Text aber nicht.

Was Alt-Texte nicht leisten

Alt-Texte sind ein Quick Win: schnell erklärt, ohne Entwicklungsaufwand umsetzbar, im Prüfbericht sofort sichtbar. Sie sind aber ein Kriterium von vielen. Ein Shop, in dem jedes Bild einen guten Alt-Text hat, kann trotzdem unbenutzbar sein – wenn der Tastaturfokus unsichtbar bleibt, Formularfelder ohne Beschriftung ausgeliefert werden, Kontraste zu schwach sind oder der Checkout mit der Tastatur nicht zu Ende zu bringen ist. Alternativtexte allein machen eine Website nicht barrierefrei.

Die Grenze der Automatik gilt hier in beide Richtungen. Ein Scan meldet zuverlässig, wo das Attribut fehlt – das ist maschinell prüfbar. Ob „Strickpullover Marius in Dunkelgrün, Vorderansicht“ das Foto wirklich trifft, kann er nicht beurteilen; ob ein leeres Attribut an dieser Stelle die richtige Entscheidung oder eine verlorene Information ist, ebenso wenig. Automatisierte Prüfung deckt die maschinell prüfbaren Kriterien ab; eine vollständige Konformitätsbewertung erfordert zusätzlich manuelle Prüfung. Beim Alternativtext ist dieser manuelle Anteil kein Nachklapp, sondern die Arbeit selbst.

Dieser Artikel ist eine technische Einordnung und keine Rechtsberatung. Ob und wie das BFSG Ihr Angebot erfasst, beurteilt eine Anwältin oder ein Anwalt; ein technischer Prüfbericht liefert dafür die belastbare Grundlage.

Häufige Fragen

Dieser Artikel ist eine technische Einordnung und keine Rechtsberatung. Quellen: WCAG 2.1, Erfolgskriterium 1.1.1 Nicht-Text-Inhalte (Stufe A); EN 301 549, Abschnitt 9.1.1.1; Gesetz zur Stärkung der Barrierefreiheit von Produkten und Dienstleistungen (BFSG), insbesondere §§ 3 und 14; Barrierefreiheitsstärkungsgesetz-Verordnung (BFSGV). Die Beispiele sind anonymisierte Konstellationen aus eigenen Prüfläufen.