# Abbildungen müssen einen Alternativtext besitzen

<https://www.fixreports.com/de/issues/image-alt>

WCAG 1.1.1 Nicht-Text-Inhalt · Stufe A

Bildern fehlt eine Textalternative, daher wissen Screenreader-Nutzer nicht, was sie zeigen.

## Was diese Regel prüft
Stellt sicher, dass <img>-Elemente einen Alternativtext oder eine ARIA-Rolle mit dem Wert none oder presentation besitzen.

## Warum das wichtig ist
WCAG 1.1.1 verlangt eine Textalternative für bedeutungstragende Bilder. Ohne sie können Screenreader-Nutzer nicht erkennen, welches Produkt ein Foto zeigt.

## So beheben Sie es
### Auf jeder Website
1. Ergänzen Sie im Alternativtext jedes Bildes in Ihrem CMS oder Template eine kurze, konkrete Beschreibung.
2. Beschreiben Sie, was für Kunden wichtig ist: Produktname, Farbe und gezeigte Ansicht (zum Beispiel „Canvas-Tasche in Oliv, Vorderansicht“).
3. Dekorative Bilder sollten ein leeres alt-Attribut haben (alt=""), damit Screenreader sie überspringen.

### In Shopify
1. Öffnen Sie im Shopify-Adminbereich Produkte > [Produkt] > Medien, klicken Sie auf jedes Bild und füllen Sie „Alt-Text“ aus. Für Bilder in Abschnitten öffnen Sie Onlineshop > Themes > Anpassen und legen den Alt-Text des Bildes in den Abschnittseinstellungen fest.
2. Beschreiben Sie, was für Kunden wichtig ist: Produktname, Farbe und gezeigte Ansicht (zum Beispiel „Canvas-Tasche in Oliv, Vorderansicht“).
3. Dekorative Bilder sollten ein leeres alt-Attribut haben (alt=""), damit Screenreader sie überspringen.

### In WooCommerce und WordPress
1. Öffnen Sie in WordPress Medien > Mediathek, wählen Sie jedes Bild aus und füllen Sie „Alternativer Text“ aus. Bilder der Produktgalerie verwenden dasselbe Feld.
2. Beschreiben Sie, was für Kunden wichtig ist: Produktname, Farbe und gezeigte Ansicht (zum Beispiel „Canvas-Tasche in Oliv, Vorderansicht“).
3. Dekorative Bilder sollten ein leeres alt-Attribut haben (alt=""), damit Screenreader sie überspringen.

## So prüfen Sie die Korrektur
- Scannen Sie die betroffenen Seiten erneut.
- Hören Sie sich mit einem Screenreader (VoiceOver: Cmd+F5 auf dem Mac) an, wie die Produktbilder angesagt werden.

## Quellen
- Dokumentation der axe-core-Regel (Deque): https://dequeuniversity.com/rules/axe/4.13/image-alt
- Erläuterungen zu WCAG 1.1.1 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/non-text-content