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
- Ergänzen Sie im Alternativtext jedes Bildes in Ihrem CMS oder Template eine kurze, konkrete Beschreibung.
- Beschreiben Sie, was für Kunden wichtig ist: Produktname, Farbe und gezeigte Ansicht (zum Beispiel „Canvas-Tasche in Oliv, Vorderansicht“).
- Dekorative Bilder sollten ein leeres alt-Attribut haben (alt=""), damit Screenreader sie überspringen.
In Shopify
- Ö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.
- Beschreiben Sie, was für Kunden wichtig ist: Produktname, Farbe und gezeigte Ansicht (zum Beispiel „Canvas-Tasche in Oliv, Vorderansicht“).
- Dekorative Bilder sollten ein leeres alt-Attribut haben (alt=""), damit Screenreader sie überspringen.
In WooCommerce und WordPress
- Ö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.
- Beschreiben Sie, was für Kunden wichtig ist: Produktname, Farbe und gezeigte Ansicht (zum Beispiel „Canvas-Tasche in Oliv, Vorderansicht“).
- 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.
So findet FixReports das Problem
Unser Scan führt die axe-core-Regel image-alt in einem echten Chrome-Browser auf jeder getesteten Seite aus und meldet jedes fehlerhafte Element mit seiner Seite, seinem Markup und, wo zutreffend, einem Screenshot.
Ein automatisierter Test bestätigt, dass genau dieses Problem vorliegt. Ob der Rest der Seite barrierefrei ist, kann er nicht beurteilen: Manche Barrieren zeigen sich erst, wenn ein Mensch die Seite prüft.