Alt-Texte · WCAG 1.1.1
Alt-Texte für Produktbilder: Regeln und Beispiele für Onlineshops
Fehlende Alternativtexte sind der häufigste Fund im BFSG-Schnellcheck. Gute Alt-Texte helfen blinden Kundinnen und Kunden beim Kaufen – und Suchmaschinen beim Verstehen deiner Produkte.
Erst messen, dann reparieren. Der kostenlose Schnellcheck zeigt in Sekunden, was im HTML deines Shops fehlt. Das Umsetzungspaket (29 €) liefert den Reparatur-Code zu jedem Fund, den Generator für die Erklärung zur Barrierefreiheit und die Prüfliste für alles, was kein Automat findet.
Shop kostenlos prüfenUmsetzungspaket kaufenPrüfen lassen (59 €)Vier Regeln
- Beschreiben, was für den Kauf zählt: Farbe, Material, Ausführung, Ansicht.
- Nicht „Bild von …“ schreiben – das sagt der Screenreader selbst.
- Keine Keyword-Listen. Ein natürlicher Satz hilft Menschen und Suchmaschinen mehr.
- Jede Ansicht einzeln: Vorderseite, Rückseite, Detail, Getragen.
Beispiele
| Produkt | Schwach | Gut |
|---|---|---|
| Strickpullover | pullover_blau_01.jpg | Rollkragenpullover aus Merinowolle in Marineblau, Vorderansicht |
| Esstisch | Tisch | Esstisch aus geölter Eiche mit schwarzen Metallbeinen, 180 × 90 cm, in einem hellen Wohnraum |
| Kaffee | Kaffee kaufen bester Kaffee Bohnen | Kaffeebohnen in brauner Papiertüte mit Ventil, 500 g, Etikett „Espresso kräftig“ |
| Kopfhörer | Produktbild | Kabellose Over-Ear-Kopfhörer in Weiß, seitlich, mit Bedientasten an der rechten Ohrmuschel |
| Größentabelle (Bild) | Tabelle | Besser: Tabelle als echten Text anbieten; im alt kurz „Größentabelle, Inhalt siehe darunter“ |
So trägst du sie ein
- Shopify: Produkt → Medien → Bild → Alt-Text
- WooCommerce: Mediathek → Alternativtext
- Shopware: Inhalte → Medien → Datei → Alt-Text
Häufige Fragen
Wie lang soll ein Alt-Text sein?
So kurz wie möglich, so lang wie nötig – meist ein Satz mit 5 bis 15 Wörtern. Was schon im Produkttitel direkt daneben steht, muss nicht wiederholt werden.
Wann bleibt alt leer?
Bei reinen Schmuckbildern ohne Information (Trennlinien, Hintergrundmuster) und wenn das Bild denselben Link wie ein daneben stehender Text hat. Dann ein leeres alt-Attribut (alt mit leeren Anführungszeichen) setzen – das Attribut muss trotzdem da sein.
Erst messen, dann reparieren. Der kostenlose Schnellcheck zeigt in Sekunden, was im HTML deines Shops fehlt. Das Umsetzungspaket (29 €) liefert den Reparatur-Code zu jedem Fund, den Generator für die Erklärung zur Barrierefreiheit und die Prüfliste für alles, was kein Automat findet.
Shop kostenlos prüfenUmsetzungspaket kaufenPrüfen lassen (59 €)