Barrierefreiheit im Onlineshop prüfen: Tools, Kosten und Grenzen

Wie Sie die Barrierefreiheit Ihres Shops prüfen: axe, WAVE, Lighthouse, Screenreader-Tests, typische Kosten für Audits und was automatische Tests übersehen.

Wer wissen will, ob sein Onlineshop die Anforderungen des Barrierefreiheitsstärkungsgesetzes (BFSG) erfüllt, steht vor einer Fülle von Werkzeugen, Agenturangeboten und Versprechen. Manche Tools liefern in Sekunden eine Punktzahl, manche Audits kosten mehrere tausend Euro. Beides hat seine Berechtigung, aber beides beantwortet unterschiedliche Fragen.

Dieser Artikel erklärt, was automatisierte Tests leisten und wo ihre Grenzen liegen, welche kostenlosen Werkzeuge sich bewährt haben, welche Tests Sie selbst durchführen können und womit Sie bei einer professionellen Prüfung rechnen sollten. Er ist eine technische Einordnung und keine Rechtsberatung.

Automatisierte und manuelle Prüfung: der Unterschied

Automatisierte Tests prüfen den Code einer Seite gegen feste Regeln. Sie erkennen zuverlässig, ob ein Bild ein alt-Attribut hat, ob ein Formularfeld beschriftet ist, ob ein Kontrast rechnerisch zu gering ist, ob die Seitensprache angegeben ist oder ob ARIA-Attribute fehlerhaft verwendet werden. Sie sind schnell, wiederholbar und günstig.

Was sie nicht beurteilen können, ist die Bedeutung. Ein Tool sieht, dass ein Alt-Text vorhanden ist, aber nicht, ob „IMG_4711“ das Produkt beschreibt. Es sieht, dass ein Button existiert, aber nicht, ob die Reihenfolge beim Tabben sinnvoll ist oder ob eine Fehlermeldung verständlich ist.

Wie viel automatisierte Tests finden, hängt von Studie und Zählweise ab. In einem bekannten Test der britischen Regierungsdigitalagentur GDS aus dem Jahr 2017 fand selbst das beste einzelne Tool nur rund 40 Prozent der absichtlich eingebauten Barrieren; alle zehn getesteten Tools zusammen kamen auf 71 Prozent. Deque, der Entwickler der Prüfbibliothek axe, kommt bei einer Zählung nach Fundstellen auf gut die Hälfte. Als Faustregel gilt: Ein automatischer Test deckt etwa 30 bis 40 Prozent der möglichen Barrieren ab, und zwar vor allem die häufigen und leicht messbaren.

Die wichtigsten kostenlosen Werkzeuge

Diese Werkzeuge prüfen in der Regel eine Seite nach der anderen. Für einen Shop mit Startseite, Kategorien, Produktseiten, Warenkorb und Rechtsseiten bedeutet das einiges an Handarbeit und Interpretation.

Hier setzt unser eigenes Werkzeug an, der BFSG-Check. Er prüft mehrere Seiten Ihres Shops automatisch mit axe-core gegen WCAG 2.1 und 2.2 AA und ergänzt eigene Prüfungen, die Standardregeln nicht abdecken: ob der Tastaturfokus sichtbar ist, ob die Seite bei 400 % Zoom und 320 Pixel Breite ohne seitliches Scrollen funktioniert, ob ein Sprunglink vorhanden ist und ob die Informationen zur Barrierefreiheit verlinkt sind. Der Schnellcheck mit drei Seiten ist kostenlos, der Vollbericht mit bis zu 20 Seiten kostet 39 Euro netto. Auch dieses Werkzeug ist ein automatischer Test und hat die oben beschriebenen Grenzen.

Tests, die Sie selbst durchführen können

Einige der wichtigsten manuellen Prüfungen brauchen keine Fachkenntnisse, sondern nur eine halbe Stunde Zeit.

Tastaturtest

Legen Sie die Maus zur Seite und kaufen Sie ein Produkt nur mit der Tastatur. Tab springt vorwärts, Umschalt+Tab zurück, Enter und Leertaste lösen aus, Pfeiltasten bewegen sich in Menüs und Auswahllisten, Escape schließt Dialoge. Prüfen Sie dabei:

• Sehen Sie jederzeit, wo der Fokus ist?
• Erreichen Sie alle Menüpunkte, Filter und Varianten?
• Können Sie Popups und den Warenkorb-Drawer öffnen und wieder verlassen?
• Ist die Reihenfolge logisch, oder springt der Fokus quer über die Seite?

Zoom- und Reflow-Test

Stellen Sie das Browserfenster auf 1280 Pixel Breite und zoomen Sie auf 400 %. Das entspricht einer Breite von 320 Pixeln. Alle Inhalte müssen lesbar und bedienbar bleiben, ohne dass Sie seitlich scrollen müssen. Prüfen Sie zusätzlich, ob sich die Schrift auf 200 % vergrößern lässt, ohne dass Texte abgeschnitten werden.

Screenreader-Kurztest

Unter Windows installieren Sie den kostenlosen Screenreader NVDA. Auf dem Mac starten Sie VoiceOver mit Befehl+F5, auf dem iPhone finden Sie es unter Einstellungen > Bedienungshilfen. Navigieren Sie auf einer Produktseite mit Tab und, bei NVDA, mit der Taste H von Überschrift zu Überschrift. Fragen Sie sich:

• Wird der Produktname als Überschrift angesagt?
• Werden Preis, Variante und Lagerstatus verständlich vorgelesen?
• Haben alle Buttons eine sinnvolle Beschriftung statt „Button“?
• Erfahren Sie, dass ein Produkt im Warenkorb gelandet ist?

Inhaltsprüfung

Lesen Sie Alt-Texte, Linktexte und Fehlermeldungen kritisch. „Hier klicken“, „mehr“ und „Bild1.jpg“ sind typische Funde, die kein Tool als Fehler meldet.

Was kostet eine professionelle Prüfung?

Die Spanne ist groß, weil Umfang und Tiefe sehr unterschiedlich sind. Als grobe Orientierung:

Die Kosten hängen vor allem davon ab, wie viele unterschiedliche Seitentypen geprüft werden, wie komplex Funktionen wie Produktkonfiguratoren oder Filter sind, ob ein Nachtest nach der Behebung enthalten ist und ob Menschen mit Behinderungen in die Tests einbezogen werden.

Ein Tipp für die Planung: Prüfen Sie Vorlagen, nicht einzelne Seiten. Ein Shop mit 5.000 Produkten hat meist nur eine Produktseitenvorlage. Ein Fehler darin betrifft alle Produkte, und eine Korrektur behebt ihn überall.

So kombinieren Sie automatisierte und manuelle Tests

Ein sinnvoller Ablauf für die meisten Shops sieht so aus:

1. Automatisch scannen. Verschaffen Sie sich einen Überblick über alle Seitentypen und beheben Sie die messbaren Fehler zuerst. Sie sind meist schnell erledigt und machen oft einen großen Teil der Fundstellen aus.
2. Vorlagen korrigieren. Beheben Sie systematische Fehler im Theme, statt einzelne Seiten zu flicken.
3. Kaufprozess manuell testen. Gehen Sie Navigation, Produktauswahl, Warenkorb und Checkout mit Tastatur, Zoom und Screenreader durch.
4. Experten gezielt einsetzen. Lassen Sie komplexe oder kritische Bereiche professionell prüfen, wenn Ihr Budget es zulässt.
5. Regelmäßig wiederholen. Prüfen Sie nach Theme-Updates, neuen Apps und größeren Kampagnen erneut.
6. Dokumentieren. Halten Sie fest, was wann geprüft und behoben wurde. Diese Angaben brauchen Sie auch für Ihre Informationen zur Barrierefreiheit.

Der erste Schritt ist auch aus einem anderen Grund sinnvoll: Die Marktüberwachungsstelle der Länder (MLBF) setzt laut ihrer veröffentlichten Strategie bei webbasierten Dienstleistungen auf automatisierte Vorprüfungen. Fehler, die ein Tool findet, fallen also auch der Behörde zuerst auf. Ebenso sind sie das, was in Abmahnungen typischerweise beanstandet wird.

Typische Fehlinterpretationen

„Lighthouse zeigt 100 Punkte, also sind wir barrierefrei.“ Lighthouse prüft nur einen Teil der Regeln und nur die geladene Seite. Ein Shop mit 100 Punkten kann trotzdem ein unbedienbares Menü haben.

„WAVE zeigt keine Fehler mehr.“ WAVE unterscheidet zwischen Fehlern und Hinweisen. Die Hinweise sind oft genau die Stellen, die ein Mensch prüfen muss.

„Das Tool meldet einen Kontrastfehler, der gar keiner ist.“ Bei Text auf Bildern oder Farbverläufen können Tools den Kontrast nicht sicher berechnen. Solche Meldungen prüfen Sie mit einem Kontrastrechner selbst.

„Wir haben die Startseite getestet.“ Die meisten Barrieren im Kaufprozess liegen auf Produktseiten, im Warenkorb und in Formularen.

„Das Overlay-Plugin hat die Fehler behoben.“ Overlays ändern nicht den Code Ihres Themes. Warum das wichtig ist, erklären wir in Accessibility-Overlays und das BFSG.

Häufige Fragen

Welches kostenlose Tool eignet sich für den Einstieg?

Für einzelne Seiten sind axe DevTools und WAVE ein guter Start. Wenn Sie mehrere Seiten Ihres Shops auf einmal prüfen und deutsche Erklärungen mit Lösungen für Ihr Shopsystem möchten, nutzen Sie den kostenlosen Schnellcheck von BFSG-Check.

Kann ein automatischer Test die BFSG-Konformität bestätigen?

Nein. Ein automatischer Test kann zeigen, dass es Barrieren gibt, aber nicht beweisen, dass keine mehr vorhanden sind. Dafür braucht es zusätzlich manuelle Prüfungen.

Wie oft sollte ich meinen Shop prüfen?

Automatisch nach jeder größeren Änderung und mindestens einmal im Quartal. Manuell mindestens einmal im Jahr und nach jedem Relaunch, Theme-Wechsel oder Umbau des Checkouts.

Brauche ich ein Zertifikat?

Nein. Für Onlineshops sieht das BFSG keine Zertifizierung vor. Ein Prüfbericht ist trotzdem wertvoll, weil er dokumentiert, was Sie geprüft und behoben haben.

Nächster Schritt

Prüfen Sie drei Seiten Ihres Shops in 30 Sekunden kostenlos: Jetzt kostenlosen BFSG-Check starten. Wenn Sie die Ergebnisse nicht selbst umsetzen möchten, behebt Codext als Shopify Premier Partner die Barrieren direkt in Ihrem Shopify-Theme.

Dieser Artikel ist eine technische Einordnung und keine Rechtsberatung.