Bilder sind im E-Commerce ein wichtiger Bestandteil der Produktdarstellung. Doch nicht alle Kund:innen können visuelle Inhalte gleichermaßen wahrnehmen. Ein Alternativtext, häufig auch Alt-Text genannt, beschreibt die wesentlichen Informationen eines Bildes in Textform. Damit verbessert er die Zugänglichkeit deines Onlineshops und kann Suchmaschinen dabei helfen, Bildinhalte besser einzuordnen.
Was ist ein Alternativtext für das Bild?
Ein Alternativtext für das Bild ist eine kurze textliche Beschreibung seines Inhalts oder seiner Funktion. Screenreader können diesen Text vorlesen und so blinden oder sehbehinderten Menschen vermitteln, welche relevante Information das Bild enthält. Kann ein Bild nicht geladen werden, kann der Alternativtext ebenfalls an seiner Stelle erscheinen.
Warum sind Alt-Texte im E-Commerce wichtig?
In einem Onlineshop vermitteln Bilder häufig Informationen, die für eine Kaufentscheidung relevant sind: Farbe, Form, Material, Ausstattung oder bestimmte Produktdetails sind teilweise erst auf einem Foto erkennbar.
Ein passender Alt-Text hilft Kund:innen, die einen Screenreader verwenden, diese Informationen ebenfalls zu erfassen. Shopify weist deshalb darauf hin, dass Alt-Texte eine wichtige Funktion für die Zugänglichkeit von Produkt- und Theme-Bildern erfüllen.
Daneben spielen Alt-Texte bei der Bilder-SEO eine Rolle. Suchmaschinen können den Alternativtext nutzen, um Inhalt und Kontext eines Bildes besser einzuordnen. Shopify empfiehlt deshalb, relevante Keywords dort natürlich zu verwenden, sofern sie tatsächlich zum Bild passen.
Alt-Texte können damit mehrere Aufgaben erfüllen:
- Sie machen relevante Bildinformationen für Screenreader zugänglich.
- Sie liefern eine Textalternative, wenn ein Bild nicht dargestellt werden kann.
- Sie helfen Suchmaschinen dabei, Bilder inhaltlich einzuordnen.
- Sie ergänzen weitere Maßnahmen der Suchmaschinenoptimierung für Onlineshops.
So schreibst du einen guten Alternativtext
Ein guter Alt-Text beschreibt nicht einfach alles, was auf einem Bild zu sehen ist. Entscheidend ist, welche Funktion das Bild in seinem jeweiligen Kontext erfüllt. Derselbe Bildinhalt kann deshalb auf zwei verschiedenen Seiten unterschiedliche Alternativtexte benötigen.
1. Bestimme zuerst die Funktion des Bildes
Frage dich vor dem Schreiben: Welche Information würde fehlen, wenn das Bild nicht vorhanden wäre?
Bei einem Produktfoto können beispielsweise Farbe, Schnitt oder ein besonderes Detail wichtig sein. Bei einem Screenshot geht es möglicherweise um eine bestimmte Einstellung. Bei einem Diagramm kann die Kernaussage entscheidender sein als jeder einzelne dargestellte Wert.
Die Antwort auf diese Frage bildet die Grundlage deines Alt-Texts.
2. Beschreibe die wesentlichen Informationen konkret
Verwende klare Begriffe statt allgemeiner Beschreibungen. Ein Alt-Text wie „Schuhe“ vermittelt deutlich weniger Information als „Weiße Laufschuhe mit schwarzer Sohle und blauen Schnürsenkeln“.
Welche Details wichtig sind, hängt vom Produkt und vom Kontext ab. Bei Mode können Farbe, Schnitt und Muster relevant sein. Bei Möbeln spielen Form, Material oder sichtbare Funktionen eine größere Rolle.
Gerade bei Produktfotos sollte der Alternativtext die visuellen Merkmale ergänzen, die Kund:innen für die Einschätzung eines Artikels benötigen.
3. Halte den Alternativtext so kurz wie möglich
Ein Alt-Text muss nicht jedes Detail eines Bildes wiedergeben. Lange Beschreibungen können die Nutzung mit einem Screenreader unnötig erschweren.
Shopify empfiehlt für Medien kurze und beschreibende Texte von ungefähr 125 Zeichen oder weniger. Technisch können in Shopify bis zu 512 Zeichen hinterlegt werden.
Die Länge ist allerdings kein Selbstzweck. Ein einfaches Produktfoto lässt sich oft in wenigen Wörtern beschreiben. Eine komplexe Infografik benötigt dagegen möglicherweise zusätzlich eine ausführlichere Erklärung im Fließtext.
4. Verzichte auf Einleitungen wie „Bild von“
Formulierungen wie „Bild von“, „Foto von“ oder „Auf dem Bild sieht man“ sind normalerweise nicht nötig. Screenreader erkennen bereits, dass es sich um ein Bild handelt. Entsprechende Einleitungen liefern daher meist keine zusätzliche Information.
Statt:
„Bild von einer schwarzen Lederhandtasche mit goldenem Verschluss.“
reicht beispielsweise:
„Schwarze Lederhandtasche mit goldenem Verschluss.“
5. Berücksichtige relevanten Text im Bild
Enthält ein Bild Text, der für das Verständnis wichtig ist, sollte diese Information auch ohne visuelle Wahrnehmung verfügbar sein.
Das betrifft beispielsweise Grafiken mit Zahlen, Screenshots einer Benutzeroberfläche oder Produktbilder mit eingeblendeten Maßen. Bei umfangreichen Informationen ist es häufig sinnvoller, die Inhalte zusätzlich im normalen Seitentext wiederzugeben, statt einen sehr langen Alt-Text zu erstellen.
Auch bei der Wahl der richtigen Bildgröße für deine Website solltest du deshalb berücksichtigen, ob Texte und Details auf unterschiedlichen Geräten sinnvoll dargestellt werden.
6. Verwende Keywords nur, wenn sie zum Bild passen
Alt-Texte sind kein Platz für eine Aneinanderreihung von Keywords. Beschreibe zuerst das Bild für deine Besucher. Passt ein relevantes Keyword natürlich in die Beschreibung, kannst du es verwenden.
Shopify empfiehlt ausdrücklich lesbare Formulierungen, die erklären, was tatsächlich zu sehen ist. Keywords sollten nicht willkürlich eingebaut werden.
Für die allgemeine Optimierung deiner Website kannst du Alt-Texte deshalb als einen Teil einer umfassenderen SEO-Checkliste betrachten.
Welche Bilder brauchen welchen Alternativtext?
Nicht jedes Bild erfüllt dieselbe Aufgabe. Für die Formulierung deines Alt-Texts hilft es, zwischen verschiedenen Bildtypen zu unterscheiden.
Informative Bilder
Informative Bilder vermitteln Inhalte, die ohne das Bild verloren gingen. Dazu gehören Produktfotos, Screenshots oder erklärende Illustrationen.
Der Alt-Text sollte die entscheidende Information wiedergeben.
Beispiel: „Beiger Wollmantel mit breitem Revers und zwei schwarzen Knöpfen.“
Funktionale Bilder
Manche Bilder erfüllen gleichzeitig eine Funktion, beispielsweise ein Icon als Schaltfläche oder ein verlinktes Logo.
Hier ist die Funktion wichtiger als das Aussehen. Statt „Lupe“ ist beispielsweise „Suche“ oder „Suche öffnen“ hilfreicher. Bei einem verlinkten Bild sollte deutlich werden, wohin die Aktion führt.
Dekorative Bilder
Ein Bild ist dekorativ, wenn beim Entfernen keine relevante Information verloren geht. In HTML wird dafür üblicherweise ein leeres Alt-Attribut alt="" verwendet, damit Screenreader das Element überspringen können.
Für Onlineshops lohnt es sich ohnehin zu prüfen, ob rein dekorative Bilder notwendig sind. Bilder sollten möglichst einen tatsächlichen Mehrwert bieten.
Komplexe Grafiken und Diagramme
Bei einem Diagramm reicht es selten aus, jeden einzelnen Datenpunkt in den Alt-Text zu schreiben. Beschreibe stattdessen Thema und zentrale Aussage kurz und stelle wichtige Details zusätzlich als normalen Text oder Tabelle bereit.
Beispiele für Alt-Texte bei Produktbildern
Wie konkret ein Alternativtext sein sollte, zeigt sich besonders gut an typischen E-Commerce-Bildern:
- Produktfoto: „Grüne Trinkflasche aus Edelstahl mit schwarzem Schraubverschluss.“
- Mode: „Knöchellanges schwarzes Kleid mit langen Ärmeln und V-Ausschnitt.“
- Detailaufnahme: „Nahaufnahme des seitlichen Reißverschlusses der braunen Ledertasche.“
- Variantenbild: „Sneaker Modell Lina in Dunkelblau mit weißer Gummisohle.“
- Anwendungssituation: „Schwarzer Wanderrucksack mit geöffnetem Hauptfach auf einem Felsen.“
Bei mehreren Bildern desselben Produkts solltest du nicht für jedes Foto denselben Alt-Text verwenden. Beschreibe stattdessen, was die jeweilige Aufnahme zusätzlich zeigt. Eine Detailaufnahme kann beispielsweise Verschluss, Materialstruktur oder Innenaufteilung erklären.
Auch bei besonderen Darstellungsformen wie der 3D Produktfotografie sollte die Textalternative vermitteln, welche relevanten Produktinformationen visuell dargestellt werden.
Können KI-Tools Alt-Texte automatisch erstellen?
KI kann die Erstellung von Alt-Texten beschleunigen. Moderne Systeme können Motive, Farben, Gegenstände und teilweise auch Text in Bildern erkennen. Shopify kann im Medien-Editor ebenfalls automatisch erzeugte Alt-Texte für Bilder vorschlagen. Du kannst diese Vorschläge übernehmen, bearbeiten oder durch einen eigenen Text ersetzen.
Automatisch erzeugte Beschreibungen solltest du trotzdem kontrollieren. Ein KI-System kennt nicht zwangsläufig den Kontext, in dem ein Bild auf deiner Seite verwendet wird. Es kann außerdem Details falsch interpretieren oder wichtige Produktmerkmale übersehen.
Das gilt insbesondere für:
- komplexe Infografiken,
- Produktvarianten mit kleinen Unterschieden,
- eingeblendete Maße oder technischen Daten,
- ungewöhnliche Perspektiven,
- Bilder, deren Aussage stark vom umgebenden Text abhängt.
Wenn du Produktbilder mit KI erstellst, sollte deshalb auch die anschließende Bildbeschreibung redaktionell geprüft werden.
Fazit: Gute Alt-Texte orientieren sich am Zweck des Bildes
Ein guter Alternativtext beschreibt nicht möglichst viele Details, sondern vermittelt die Informationen, die ein Bild an seiner konkreten Stelle erfüllen soll. Für deinen Onlineshop bedeutet das vor allem: Beschreibe Produktmerkmale verständlich, berücksichtige den Seitenkontext und halte den Text möglichst prägnant.
Alt-Texte sind damit ein wichtiger Bestandteil der Barrierefreiheit und zugänglicher Produktseiten. Gleichzeitig ergänzen sie technische sowie inhaltliche Maßnahmen der Bildoptimierung. Besonders bei vielen Produktbildern lohnt sich ein einheitlicher redaktioneller Prozess, bei dem auch automatisch erzeugte Beschreibungen vor der Veröffentlichung geprüft werden.
