Problem 1: Bilder ohne Alternativtext
WCAG 1.1.1 Nicht-Text-Inhalt · Stufe A
Was ist das Problem?
Wen betrifft es?
So beheben Sie es in WooCommerce
Medien, dann Mediathek, dann Bild öffnen, dann Feld „Alternativer Text“ ausfüllen
So funktioniert BarriereCheck
Vom Shop-Link bis zur fertigen Erklärung in drei Schritten – und ehrlich gesagt, was ein automatischer Test leisten kann und wo ein Mensch weiterprüfen muss.
In drei Schritten
Schritt 1: Adresse eingeben
Wir scannen bis zu 3 Seiten Ihres Shops – ohne Anmeldung. Das dauert meist wenige Minuten.
Schritt 2: Ergebnis verstehen
Jedes Problem in Klartext, mit Schweregrad und den betroffenen Stellen.
Beispiel:7 Probleme an 23 Stellen auf 3 SeitenKritisch 2 Hoch 3 Mittel 2 Schritt 3: Beheben und erklären
Eine Fix-Liste für Ihre Entwickler und Ihre Erklärung zur Barrierefreiheit nach § 14 BFSG.
Fix-Liste Erklärung § 14 BFSG
Was der automatische Test kann – und was nicht
Das findet der Scan
Typische technische Barrieren, zum Beispiel:
- Zu schwache Kontraste bei Texten
- Bilder ohne Alternativtext
- Formularfelder ohne Beschriftung
- Überschriften in falscher Reihenfolge
- Links und Buttons ohne erkennbaren Namen
Das braucht zusätzlich einen Menschen
Ein automatischer Scan findet erfahrungsgemäß nur einen Teil der Barrieren. Im Detail braucht es eine manuelle Prüfung:
- Bedienung nur per Tastatur – auch Warenkorb und Kasse
- Verständliche Ausgabe im Screenreader
- Ob Texte und Alternativtexte inhaltlich passen
Diese Punkte listet Ihr Report als Liste zur manuellen Prüfung auf.
Mehr dazu im Ratgeber: Automatischer Test oder Audit?
Beispiel mit erfundenen Daten
So sieht Ihr Ergebnis aus
Ein Beispiel mit erfundenen Daten: der vollständige Report für einen WooCommerce-Shop mit 24 geprüften Seiten. Oben sehen Sie, wo der Shop steht, darunter alle Probleme als Arbeitsliste – sortiert danach, was Sie zuerst angehen sollten.
Kritisch Produkt-, Kategorie- oder Bannerbilder haben keinen Alt-Text – häufig nach einem Produktimport. Blinde und sehbehinderte Menschen mit Screenreader. Sie hören nur „Bild“ oder den Dateinamen. Gilt auch für Produkt- und Galeriebilder. Ratgeber: Alt-Texte für Produktbilder Problem 2: Formularfelder ohne Beschriftung
WCAG 4.1.2 Name, Rolle, Wert · Stufe A
Kritisch Was ist das Problem?
Suchfeld, Newsletter-Anmeldung oder Kontaktformular haben nur einen Platzhaltertext, aber keine echte Beschriftung. Wen betrifft es?
Screenreader-Nutzer wissen nicht, was sie eingeben sollen. Und sobald man tippt, verschwindet der Platzhalter für alle. So beheben Sie es in WooCommerce
Häufig Formular-Plugins (Contact Form 7, WPForms) oder Newsletter-Widgets. Im Plugin für jedes Feld eine Beschriftung aktivieren statt nur Platzhaltertext. Ratgeber: Formulare und Kasse per Tastatur Problem 3: Text mit zu wenig Kontrast
WCAG 1.4.3 Kontrast (Minimum) · Stufe AA
Hoch Was ist das Problem?
Graue Preise, helle Buttons, Sale-Badges oder Links in der Fußzeile heben sich zu wenig vom Hintergrund ab. Wen betrifft es?
Menschen mit Sehschwäche, ältere Menschen und alle, die das Handy in der Sonne benutzen. So beheben Sie es in WooCommerce
Design → Customizer → Farben bzw. bei Block-Themes Design → Editor → Stile → Farben. Eigene Farben ggf. unter „Zusätzliches CSS“ prüfen. Ratgeber: Kontraste im Onlineshop
Der Scan ist kostenlos, den vollständigen Report zahlen Sie einmal. Alle Preise im Überblick
Wie steht Ihr Shop da?
Der Test ist kostenlos und dauert etwa 3 Minuten. Sie brauchen dafür nur die Adresse Ihres Shops.