Alt-Text

Was ist Alt-Text?

Alt-Text (Alternativtext) ist die Beschreibung, die Sie im alt-Attribut eines <img>-Tags angeben, zum Beispiel <img src="boot.jpg" alt="Brauner Lederstiefel von der Seite gesehen">. Screenreader lesen diesen Text für Benutzer mit Sehbehinderungen laut vor, und er wird als Fallback angezeigt, falls das Bild nicht geladen werden kann. Gleichzeitig nutzt Google den Alt-Text als Signal dafür, was das Bild darstellt.

Warum ist Alt-Text wichtig?

Für einen Online-Shop löst Alt-Text zwei Probleme auf einmal: Barrierefreiheit und SEO. Ein beschreibender Alt-Text macht Produktbilder für Kunden verständlich, die mit einem Screenreader navigieren, und eine gute Barrierefreiheit von Bildern ist für viele Shops nach dem European Accessibility Act gesetzlich vorgeschrieben. Es hilft Google auch, Ihre Bilder zu verstehen und zu indexieren, was zusätzlichen Traffic über die Google-Bildersuche bringen kann. Rein dekorative Bilder sollten ein leeres Alt-Attribut (alt="") verwenden, damit Screenreader sie überspringen, anstatt einen Dateinamen anzukündigen.

Häufige Anwendungsfälle

• Produktbilder: Beschreiben Sie das Produkt konkret („roter Wollpullover mit Rollkragen“) statt nur „Pullover“ oder die Produkt-SKU anzugeben.
• Dekorative Bilder: Verwenden Sie alt="" für Hintergründe und Ornamente, damit assistierende Technologien sie ignorieren.
• Als Links oder Buttons verwendete Bilder: Der Alt-Text fungiert als Linktext und sollte beschreiben, wohin der Link führt.
• Infografiken und Text in Bildern: Geben Sie den wichtigen Text wieder, damit die Kernaussage für Screenreader und Google nicht verloren geht.

Shopify-Perspektive

In Shopify bearbeiten Sie den Alt-Text unter den Medien des jeweiligen Produkts (klicken Sie auf das Bild und wählen Sie „Alt-Text bearbeiten“). Das Theme rendert diesen normalerweise mit {{ image.alt }} in Liquid. Shopify füllt aussagekräftige Alt-Texte nicht automatisch aus; viele Themes greifen stattdessen auf den Produkttitel zurück, was selten eine genaue Beschreibung darstellt. Halten Sie den Text kurz (idealerweise unter ca. 125 Zeichen), beschreiben Sie das Bild auf natürliche Weise und vermeiden Sie Keyword-Stuffing. Erwägen Sie, Bilder für eine höhere Ladegeschwindigkeit im WebP-Format zu speichern – der Alt-Text wird unabhängig vom Dateiformat übernommen.