Overlay-Widgets für Barrierefreiheit: Was sie können und was nicht

Ein Overlay legt sich über Ihre Seite, ohne den Shop selbst zu verändern. Es läuft im Browser der Besucher und besteht meist aus zwei Teilen:

• einer Werkzeugleiste mit Einstellungen wie größerer Schrift, höherem Kontrast, Lesehilfe oder angehaltenen Animationen
• einer automatischen „Reparatur“, die beim Laden der Seite versucht, fehlende Alt-Texte, Beschriftungen und Rollen nachzutragen – oft mit KI

Die Werkzeugleiste doppelt, was Browser und Betriebssystem längst können: zoomen, Kontraste erhöhen, vorlesen. Wer darauf angewiesen ist, hat seine Hilfsmittel schon eingerichtet – für jede Website, nicht nur für Ihre.

Die automatische Reparatur stößt an Grenzen, die auch eine KI nicht überwindet:

• Sie rät. Ob ein Bild ein „Leinenkleid in Salbeigrün“ zeigt oder nur Dekoration ist, weiß nur, wer den Shop kennt.
• Sie kommt nicht überall mit. Was erst nach dem Laden passiert, erfasst sie oft nicht zuverlässig – etwa ein Warenkorb, der sich öffnet, ein Filter oder eine Fehlermeldung im Formular.
• Sie ändert nichts am Code. Wird das Skript blockiert oder fällt es aus, sind alle Barrieren wieder da.
• Sie kann Hilfsprogramme stören. Manche Overlays verändern die Seite so, dass Screenreader sie anders vorlesen, als ihre Nutzer es gewohnt sind.

Gerade Menschen, die geübt mit Screenreadern arbeiten, berichten häufig, dass Seiten mit Overlay schwerer zu bedienen sind als ohne. Manche installieren eigens Browser-Erweiterungen, die Overlays blockieren.

Dazu kommt der Datenschutz: Ein Overlay kann erkennen, ob jemand Hilfsmittel nutzt – und damit Rückschlüsse auf eine Behinderung erlauben. Prüfen Sie vor dem Einbinden genau, welche Daten ein Anbieter erhebt und wo er sie verarbeitet.

In den USA hat die Handelsbehörde FTC 2025 einen Overlay-Anbieter verpflichtet, eine Million US-Dollar zu zahlen. Der Vorwurf: Er habe irreführend damit geworben, sein Produkt mache jede Website konform mit den WCAG. Die Pressemitteilung der FTC (englisch) beschreibt den Fall.

Für deutsche Shops ist das ein US-Fall ohne direkte Wirkung. Er zeigt aber, wie solche Versprechen einzuordnen sind: Ein Skript kann Barrierefreiheit nicht per Knopfdruck herstellen.

1. 1

   Schritt 1: Barrieren finden

   Ein automatischer Test zeigt, wo im Code die Probleme sitzen – mit Seite und Stelle.

2. 2

   Schritt 2: An der Quelle beheben

   Alt-Texte im Shop-Backend eintragen, Farben im Theme anpassen, Beschriftungen ergänzen. Vieles davon geht ohne Entwickler, zum Beispiel Alt-Texte für Produktbilder und Kontraste.

3. 3

   Schritt 3: Von Menschen prüfen lassen

   Bedienung per Tastatur und mit Screenreader testen – selbst oder durch Fachleute, am besten zusammen mit Menschen, die diese Hilfsmittel täglich nutzen.

4. 4

   Schritt 4: Ehrlich informieren

   Schreiben Sie, was geprüft wurde und was noch offen ist, statt „100 % barrierefrei“ zu versprechen.