Comic mit Frau Am Monitor und sehbhindertem Mann mit Grafiken zu barrierefreien WordPress im Hintergrund. KI-generiert

Overlay-Tools für Barrierefreiheit? – keine gute Idee

Beitragsdatum:

Letztes Update am:

Autor:

hgg

Kategorien: , , ,

Geschätzte Lesezeit:

13–20 Minuten

Warum Overlay-Tools keine Lösung für Barrierefreiheit sind – Praxisbeispiele

In den letzten Jahren haben sich sogenannte Overlay-Tools verbreitet, die Websites automatisiert barrierefrei machen sollen. Sie versprechen eine schnelle Lösung durch zusätzliche Skripte, die Inhalte anpassen, ohne in den Quellcode einzugreifen. Doch diese Methoden sind höchst problematisch und bieten keinen nachhaltigen Schutz für Menschen mit Behinderungen. Warum das so ist und wie man das Thema Barrierefreiheit besser angeht, beschreiben wir in diesem Beitrag.

Wir beschäftigen uns mit barrierefreien Websites schon seit langer Zeit und haben dazu auch entsprechende Schulungen besucht und im Rahmen von Ausbildungen Zertifikate erworben. Das Thema ist für uns schon aufgrund der familiären Situation wichtig.

Bei Recherchen zum Thema sehen wir immer wieder Hinweise auf Overlay-Tools, die verwendet bzw. angepriesen werden.

Was sind Overlay-Tools

Bei Websites, die Overlay-Tools verwenden, befinden sich in der Regel Icons in ähnlicher Form auf der Website – mal links am Rand, mal rechts am Rand:

KI generiertes Icon als Piktogramm (Accessibility-Menschen-Icon)
KI generiertes Icon als Piktogramm (Accessibility-Menschen-Icon)

Wenn man bei einer Website mit einem Overlay-Tool auf das Icon klickt, dann können weitere Dinge wie Schriftgröße, Kontrastmodus, etc. eingestellt werden.

Der BIK BITV-Test ist Deutschlands bekanntestes Verfahren für die umfassende, zuverlässige Prüfung u. a. der Barrierefreiheit von Websites und öffentlich einsehbar. Auf der Website BIK BITV-Test ist folgende Aussage zur Konformität von Overlay-Tools veröffentlicht worden:

BIK entschließt sich zu folgender Festlegung:
BIK Prüfstellen können für Websites, die ein Overlay-Tool nutzen, derzeit keine sichere Aussage zur Konformität gemäß EN / WCAG machen.
Entsprechend können BIK Prüfergebnisse von Websites, die ein Overlay-Tool nutzen, nicht veröffentlicht werden.
Die Verwendung eines BIK Prüfzeichens ist auf Websites, die ein Overlay-Tool nutzen, nicht möglich.

Quelle: https://bitvtest.de/test-methodik/web/beschreibung-des-pruefverfahrens#c761

Wenn man aktuell bei Google oder auch KI/AI als Suchbegriff „Barrierefreiheit“ eingibt, dann erhält man zuerst „gesponsorte Ergebnisse“ (also Werbung) mit verheißungsvollen Texten wie „Jede Website einfach & schnell barrierefrei machen“. In der Regel werden in dem Zusammenhang sogenannte Overlay-Tools genannt.

Ein Overlay-Tool ist eine Software. Sie ändert den Quellcode einer Webseite und soll dadurch die Barrierefreiheit verbessern. Die Anpassungen im Quellcode erfolgen dabei im Browser selbst. Dadurch können vom Nutzenden individuelle Einstellungen zur Zugänglichkeit und Barrierefreiheit der Webseite vorgenommen werden. Die Änderungen überdecken dabei die Originaldarstellung der Inhalte. Daher kommt auch die englische Bezeichnung „Overlay“ für Überlagerung.

Quelle: https://www.lf-barrierefreiheit-st.de/digitales/webseiten/overlay-tools

Overlay-Tools beeinflussen an sich nur das visuelle Erscheinungsbild, ohne die zugrundeliegende semantische Struktur zu verbessern. Das kann zu Problemen wie fehlender Bildschirmreader-Kompatibilität führen oder dazu, dass Tastatur-Nutzerinnen und -Nutzer per Mausklick auf der Website weiterhin auf Barrieren stoßen.

Beispiel:
Ein Overlay-Tool ändert nur die Farbkontraste, ohne die zugrunde liegende HTML-Struktur zu verbessern. Nutzer mit Screenreader könnten den Inhalt trotzdem nicht vollständig erfassen, weil die ARIA-Attribute fehlen oder falsch sind. Abgesehen davon: wie soll eine sehbehinderte Person überhaupt das Overlay-Tool erkennen und dementsprechend eine Auswahl treffen?
Hier zeigt eine Überprüfung mit einem Tool wie axe DevTools, silktide oder WAVE schnell, ob die semantischen Tags korrekt gesetzt sind oder schwer zugänglich bleiben.​

Ein weiterer wichtiger Aspekt:
Personen, die auf assistive Techniken angewiesen sind, haben ihre Browsereinstellungen entsprechend geändert. Wenn jetzt ein Overlay-Tool ins Spiel kommt, kann dieses zu Problemen führen.

Automatisierte Überprüfung mit Silktide und wave

Im folgenden Beispiel einer Website, die wir kürzlich im Rahmen eines Relaunchs barrierefrei erstellt haben, zeige ich, wie man diese beiden Tools einsetzt:

Anwendung von Silktide
Anwendung von Silktide
Grundsätzlicher Test mit den Accessibility tools von Silktide
Grundsätzlicher Test mit den Accessibility tools von Silktide
Beispiel für die Anwendung von Wave - web accessibility evaluation tool
Beispiel für die Anwendung von Wave – web accessibility evaluation tool

Gerade bei der Anwendung von wave wird deutlich, dass man viele Hinweise erhält, wo es noch Probleme geben könnte. Diese Dinge müssen dann manuell geprüft werden.

Nachfolgend zwei Beispiele, die deutlich machen, dass Overlay-Tools semantische Probleme nicht beheben:

  • Eine barrierefreie Navigation sollte als echte HTML-Liste (<ul> oder <ol>) mit einzelnen Listenelementen (<li>) aufgebaut sein. Fehlt diese Struktur und die Navigationspunkte sind z.B. wie in diesem Fall in <div>-Elementen oder ohne Listen umschlossen, erkennen Screenreader und Hilfsmittel nicht klar, dass es sich um eine Navigation handelt. Abgesehen davon enthält die Navigation mehrfach den Link „Informationen“. Das erschwert die Orientierung für Screenreader-Nutzer. Aktuell wird die semantische Struktur nicht von Overlay-Tools behoben.
  • Bilder werden nicht kontextbezogen benannt und enthalten keinen ALT-Text, so dass der Screen-Reader nur „Link“ vorliest. Aktuell können fehlende ALT-Texte nicht durch Overlay-Tools sinnvoll ergänzt werden.

In beiden Fällen (und ich könnte noch mehr Beispiele nennen) ist eine Korrektur durch ein Overlay-Tool nicht möglich und aktuell höchstens mit KI-Mitteln bei Bildern vorstellbar.

Eine Website, die als BITV-konform bezeichnet wird, erfüllt in der Regel die Anforderungen der WCAG 2.2 auf Konformitätsniveau AA. Derzeit basiert die BITV 2.0 rechtlich noch auf WCAG 2.1; eine Integration der WCAG 2.2 in die BITV ist in Arbeit und wird voraussichtlich bis 2025/2026 erfolgen.

Wer jetzt denkt, dass Overlays nur von verzweifelten Firmen eingesetzt werden, den muss ich enttäuschen. Bei einer wirklich kurzen Recherche habe ich auf Anhieb Websites verschiedener Städte und Versicherungen gefunden, die Overlays verwenden.

Für Laien mögen diese Funktionen vorteilhaft erscheinen, aber ihr praktischer Wert wird weitgehend überbewertet, denn wer diese Funktionen benötigt, hat sie in aller Regel bereits auf dem eigenen Computer. Entweder als mitgelieferte Funktion im Browser oder Betriebssystem oder als zusätzliche Software, mit der nicht nur das Web, sondern jegliche Software bedient werden kann.

Quelle: https://overlayfactsheet.com/de/

Das Barrierefreiheitsstärkungsgesetz (BFSG) und die EU-Richtlinie 2019/882 (European Accessibility Act, EAA) sind die zentralen gesetzlichen Grundlagen in Deutschland und Europa. Sie verpflichten öffentliche Stellen sowie private B2C-Anbieter (z. B. E-Commerce, Banken, Apps) zur Barrierefreiheit von Websites und digitalen Diensten ab 28. Juni 2025.

Wichtige gesetzliche Quellen (Gesetzgeber und offizielle Stellen):

  • EU-Richtlinie 2019/882 (EAA): Setzt europaweite Mindeststandards für barrierefreie Webseiten, Online-Shops und Apps.
  • Barrierefreiheitsstärkungsgesetz (BFSG): Deutsche Umsetzung der EAA, seit 28. Juni 2025 gültig (BGBl. 2021 I S. 2970).gesetze-im-internet+1
  • Verordnung zum BFSG (BFSGV): Regelt technische Details, Fristen und Übergangsregelungen (z. B. bis 2030/2040 für Terminals).
  • Weitere Regelungen: TMG (Telemediengesetz), BGG (Bundesgleichstellungsgesetz), BITV 2.0 (für öffentlichen Sektor), DIN EN 301 549 (EU-ICT-Standard).

Verpflichtete: Behörden, Kommunen sowie Unternehmen mit Online-Verkauf/-Diensten an Verbraucher (Ausnahmen: Kleinstunternehmen <10 Mitarbeiter/<2 Mio. € Umsatz). Bußgelder bis 100.000 € möglich.

Zusammengefasst: Die EU (Richtlinie 2019/882) wird in Deutschland durch BFSG und BFSGV umgesetzt. Offizielle Infos bei der Bundesfachstelle Barrierefreiheit oder in den Gesetzestexten.

Warum eine Überprüfung anhand der WCAG 2.2 notwendig ist

Barrierefreiheit ist keine oberflächliche Zusatzfunktion, sondern eine technische und inhaltliche Qualitätssicherung. Die WCAG 2.2 legt klare, überprüfbare Kriterien fest, die unabhängig von Sichtweisen oder automatischen Tools gelten. Eine Website ist nur dann wirklich barrierefrei, wenn sie diese Kernanforderungen erfüllt:

  • Wahrnehmbarkeit: Texte, Farben und Inhalte müssen stets zugänglich sein (z. B. Farbabstimmungen mit z. B. Silktide prüfen).
  • Bedienbarkeit: Nutzerinnen und Nutzer müssen die Seite vollständig mit Tastatur oder assistiven Technologien steuern können.
  • Verständlichkeit: Inhalte und Interaktionen sollten klar und konsistent gestaltet sein.
  • Robustheit: Der Quellcode muss kompatibel mit Screenreadern, Braille-Displays und weiteren Hilfsmitteln sein.

Beispiel:
Wenn eine Schaltfläche nur auf der visuellen Gestaltung basiert, aber keine semantische Bedeutung hat, identifizieren Tools wie WAVE oder Silktide diese Barriere und machen deutlich, wo noch Verbesserungen notwendig sind.​ Diese Verbesserungen sollten dann auch tatsächlich, d. h. durch (manuelle) Verbesserungen der Website umgesetzt werden.

Werkzeuge für die praktische Überprüfung der digitalen Barrierefreiheit

Die nachfolgenden bereits genannten automatisierten Prüfwerkzeuge sind wertvolle Hilfsmittel, ersetzen aber keine manuelle Überprüfung. Sie liefern erste Hinweise auf mögliche Probleme.

  • WAVE: Bietet eine visuelle Rückmeldung direkt auf der Website, die Fehlstellen in der Struktur sichtbar macht.
  • Sitebrunch: sitebrunch ist ein zentraler Website-Hub für Barrierefreiheit, Performance und Teamarbeit. Das kostenpflichtige Tool führt automatische WCAG 2.2 Audits und Kick-off-Checks durch, erstellt Live-Heatmaps für Nutzerverhalten und bietet ein Accessibility Center mit geführten manuellen Prüfungen nach EN 301 549. Sehr hilfreich sind die Erläuterungen sowie Videos mit weiteren Erklärungen bei jedem Schritt. Eine Besonderheit besteht darin, dass man nach Abschluss rechtskonforme Barrierefreiheitserklärungen generieren kann.
    Außerdem kann mit Sitebrunch die vorgeschriebene Dokumentation erstellt werden.
  • Silktide: Erlaubt eine individuelle Testung nach verschiedenen WCAG-Levels und kann auch Farbsimulationen oder Screenreader-Emulationen durchführen. Diese Erweiterung setzen wir hauptsächlich neben WAVE ein.
  • axe DevTools: Sehr präzise, lässt sich in Chrome integrieren und ermöglicht auch das Testen komplexer Interaktionen.
  • A11y quick check ist eine Chrome-Erweiterung, die entwickelt wurde, um Webseiten schnell und einfach auf Barrierefreiheitsmängel (Accessibility Issues) zu überprüfen. Sie bietet einen Überblick über potenzielle Verstöße gegen die WCAG-Richtlinien (Web Content Accessibility Guidelines) und bewährte Codierungspraktiken
  • Siteimprove Accessibility Checker: Dieses Tool bewertet die Barrierefreiheit von Webseiten und bietet detaillierte Informationen zur Einhaltung der WCAG-Richtlinien (Web Content Accessibility Guidelines).

Mit axe DevTools, silktide oder WAVE kannst du schnell erkennen, ob Alt-Attribute bei Bildern fehlen, ob die Tastaturfokus-Reihenfolge stimmt oder ob Kontraste nicht ausreichen. Sie sind ideal für schnelle, wiederkehrende Checks, z. B. vor einem Relaunch oder bei größeren Änderungen.

Beispiel eines Barrierefreiheitsmonitoring mit sitebrunch
Beispiel eines Barrierefreiheitsmonitoring mit sitebrunch

Konkrete Prüfstrategien für Barrierefreiheit

Nach der ersten Überprüfung einer Website auf Barrierefreiheit mit den genannten Tools folgt eine weitere manuelle Überprüfung exemplarischer Inhalte (Seiten oder Beiträge). Diese Überprüfung orientiert sich an den WCAG 2.2-Richtlinien und der Website Accessibility Conformance Evaluation Methodology (WCAG-EM):

  1. Bewertungsumfang definieren: Auswahl repräsentativer Seitenbereiche und Funktionen, die getestet werden sollen.
  2. Konformitätsstufe festlegen: Üblicherweise wird die Konformitätsstufe AA angestrebt, die die Mindestanforderungen für zahlreiche öffentliche und private Webseiten umfasst. AAA ist ein Ziel, das aktuell nur mit sehr viel mehr Aufwand erreicht werden kann.
  3. Browser- und Assistenztechnologien festlegen: Testläufe sollten mit gängigen Browsern und Hilfsmitteln wie Screenreadern (für Windows NVDA, JAWS und für Apple VoiceOver), Tastatursteuerung und mobilen Endgeräten erfolgen.
  4. Manuelle und automatisierte Prüfung kombinieren:
    • Einsatz von Tools wie WAVE, silktide oder axe zur Erkennung technischer Probleme.
    • Manuelle Überprüfung durch Experten, etwa für verständliche Sprache und Navigationslogik.
    • Nutzer-Tests mit Menschen mit Behinderungen zur praktischen Einsatzbewertung.
  5. Prozesse und Interaktionen testen: Prüfung aller Interaktionsschritte, z. B. bei Formularen, Bestellvorgängen oder dynamischen Inhalten, inklusive Fehlerbehandlung.
  6. Dokumentation und Nachbesserung: Ergebnisse sammeln, dokumentieren und Maßnahmen zur Fehlerbehebung planen.

Diese strukturierte Herangehensweise stellt sicher, dass eine Website nicht nur oberflächlich barrierefrei wirkt, sondern die Anforderungen der WCAG 2.2 tatsächlich erfüllt. Overlay-Tools verschleiern oft bestehende Probleme.

Info-Symbol

Info

Tipp: Prüft in den AGB der Anbieter von Overlays, ob die Barrierefreiheit einer Website mit einem Overlay garantiert wird.

Öffentliche Stellen sind verpflichtet, für ihre Websites und mobilen Anwendungen jeweils eine detaillierte, klar verständliche und vollständige Erklärung zur Barrierefreiheit zu erstellen und auf ihrer Website bzw. im App-Store zu veröffentlichen.

Quelle: https://www.barrierefreiheit-dienstekonsolidierung.bund.de/Webs/PB/DE/barrierefreie_it/uebergreifende-anforderungen-web-und-app/erklaerung-zur-barrierefreiheit/erklaerung-zur-barrierefreiheit-node.html

  • Aktuell sind Overlay-Tools nicht in der Lage, einen Webauftritt, der Barrieren aufweist, vollständig barrierefrei darzustellen.
  • Durch den Einsatz solcher Tools können weitere Barrieren im Webauftritt entstehen.
  • Overlay-Tools können eine schon vorhandene Barrierefreiheit verbessern, indem z. B. zusätzliche Kriterien der Konformitätsstufe AAA der WCAG erfüllt werden.

Quelle: https://www.bfit-bund.de/DE/Publikation/einschaetzung-overlaytools.html

Den zuletzt genannten Aspekt halte ich für fragwürdig.

Overlay-Tools wirken auf den ersten Blick hilfreich – doch sie schaffen keine echte Barrierefreiheit und können bestehende Probleme sogar verschärfen.

…

Die eingesetzten Skripte verändern lediglich die Oberfläche, nicht aber den Quellcode der Website und damit auch nicht deren strukturelle Zugänglichkeit. Zahlreiche Fachstellen, Behindertenverbände und internationale Organisationen warnen deshalb: Overlay-Tools überdecken Barrieren, sie beheben sie nicht – und sind keine nachhaltige Lösung.

Quelle: https://www.digitale-barrierefreiheit.org/kb/overlay-tools

Noch problematischer ist das irreführende Marketing einiger Overlay-Anbieter. Sie versprechen, dass die Einbindung ihres Produkts den Websites ihrer Kunden sofortige Konformität mit Gesetzen und Standards verschafft.

Die Unwirksamkeit von Overlays ist unter Experten für Barrierefreiheit allgemein anerkannt. Dies zeigt die WebAIM-Umfrage unter Fachleuten für Web-Barrierefreiheit

Quelle: https://overlayfactsheet.com/de/

Glossar wichtiger Begriffe

  • WCAG 2.2 (Web Content Accessibility Guidelines): International anerkannte Richtlinien des W3C, die festlegen, wie Webinhalte barrierefrei gestaltet werden müssen.​
  • Overlays oder Overlay-Tools: Zusätzliche Skripte, die Webseiten „unten draufgesetzt“ werden, um Barrierefreiheit zu suggerieren, ohne den Quellcode zu ändern (keine nachhaltige Lösung)
  • ARIA (Accessible Rich Internet Applications): Technische Attribute, die Webinhalte semantisch ergänzen und Hilfstechnologien unterstützen. ARIA fügt unsichtbare Informationen für assistive Technologien hinzu. Mehr Infos dazu auf der folgenden Seite.
  • Tastaturfokus: Sichtbarer Fokuspunkt bei interaktiven Elementen bei Tastaturbedienung (WCAG 2.2 Erfolgskriterium).​
  • Konformitätsstufen A, AA, AAA: Schweregrade von Barrierefreiheitsanforderungen, AA gilt als Standard für gesetzliche Compliance.​
  • Screenreader: Software zur Vorlesung von Webinhalten (z. B. NVDA, JAWS)
  • Prüfwerkzeuge: Automatisierte Tools wie WAVE, axe, Silktide zur Barrierefreiheitserkennung.​

Aus unserer Erfahrung mit der Konzeption, Umsetzung und dem Relaunch barrierefreier Websites auf Basis von WordPress wissen wir, dass es sehr aufwendig – und in der Praxis kaum vollständig möglich – ist, eine Website zu erstellen, die für alle Menschen mit Einschränkungen in jeder Situation zu 100 % barrierefrei ist. Trotz größter Sorgfalt kann es daher vorkommen, dass einzelne Funktionen oder Inhalte für bestimmte Nutzergruppen noch Hürden enthalten. Unser Anspruch ist es jedoch, jede Website bestmöglich barrierefrei zu gestalten und sie kontinuierlich weiter zu verbessern.

Das ist uns besonders beim WordCamp Leipzig 2025 bewusst geworden, wo es Vorträge zu dem Thema Barrierefreiheit gab:

Fazit

Die Verwirklichung einer barrierefreien Website mit einem Overlay-Tool ist höchst problematisch. Wenn man eine barrierefreie Website erstellen möchte, ist eine umfangreiche Analyse notwendig. Dazu gibt es einige Tools, die helfen können, die Barrierefreiheit einer Website zu testen, aber letztendlich ist auf jeden Fall eine manuelle Überprüfung sehr wichtig. Diese zeitaufwendige Prozedur erklärt auch, warum die Erstellung einer barrierefreien Website wesentlich kostenintensiver ist. Habt ihr euch schon mit dem Thema beschäftigt? – Wir freuen uns über eure Kommentare.

Weitere Beiträge zum Thema (Block Neueste Beiträge)

Wir freuen uns über eine Kontaktaufnahme

Icon Telefon

02722-6577725

Icon Mail

info@haurand.com

Was hältst du davon?

Wir hoffen, dieser Beitrag hat dir gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

Newsletter: Wenn du über unsere neuesten Beiträge und Neuigkeiten rund um WordPress informiert werden möchtest, kannst du dich gerne bei unserem kostenlosen Newsletter anmelden. Hier die bisher versendeten Newsletter

Blog: Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörtern.

Fediverse Reaktionen

Kategorien:

, , ,

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert