Barrierefreie Pop-ups – Wann Pop-ups zur Barriere werden und wie man es vermeidet
Pop-ups gehören zu den häufigsten digitalen Barrieren auf Websites und Online-Shops. Ob Cookie-Banner, Newsletter-Anmeldung, Werbungs-Modal oder Warenkorb-Benachrichtigung – Pop-ups aller Art erscheinen unangekündigt, unterbrechen den Fokus und stellen neue Entscheidungsaufgaben. Für Menschen mit Behinderungen sind schlecht umgesetzte Pop-ups oft unüberwindbare Hindernisse: Screenreader-Nutzer verlieren den Fokus, Tastaturnutzer können im Hintergrund gefangen sein, autistische Nutzer werden durch Unvorhersehbarkeit überfordert.
Pop-ups sind jedoch nicht grundsätzlich verboten – sie müssen nur korrekt umgesetzt werden. Mit der richtigen technischen Implementierung und Rücksicht auf WCAG-Anforderungen können Pop-ups für alle Nutzerinnen und Nutzer zugänglich sein. In vielen Fällen ist sogar eine vollständige Barrierefreiheit mit wenigen gezielten Maßnahmen erreichbar.
Seit dem 28. Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz (BFSG) Unternehmen zur Einhaltung von WCAG 2.1 Level AA – das schließt alle Pop-ups, Modals und Overlays auf Ihrer Website ausdrücklich ein.
Barrierefreie Pop-ups auf einen Blick
- ARIA-Rolle: dialog oder alertdialog – programmatisch korrekt ausgezeichnet
- Fokusmanagement: Fokus geht beim Öffnen ins Pop-up, beim Schließen zurück zum Auslöser
- Tastaturbedienbar: Schließen per Escape-Taste und sichtbarer Schließen-Schaltfläche
- Kein Zeitlimit: Pop-ups dürfen nicht automatisch schließen ohne Nutzerinteraktion
- Rechtslage: BFSG verpflichtet seit 28. Juni 2025 – gilt auch für Cookie-Banner und Werbung
Arten von Pop-ups und ihre Barrierefreiheitsrisiken
Nicht alle Pop-ups sind gleich – je nach Art und Kontext gibt es unterschiedliche Barrierefreiheitsrisiken. Am häufigsten problematisch sind Pop-ups, die automatisch erscheinen, keinen sichtbaren Schließen-Button haben oder den Tastaturfokus nicht korrekt verwalten. In Online-Shops treten Pop-ups besonders häufig als Warenkorbbenachrichtigungen, Exit-Intent-Overlays oder Werbungsmodals auf.
- Cookie-Banner: Häufigste Art – müssen per Tastatur bedienbar und von Screenreadern lesbar sein
- Newsletter-Pop-ups: Erscheinen oft nach Zeitverzögerung – Fokusmanagement und Escape-Taste kritisch
- Werbungs-Modals: Werbung als Pop-up muss dieselben Anforderungen erfüllen wie funktionale Dialoge
- Warenkorb-Benachrichtigungen: Kurze Toast-Nachrichten brauchen ARIA-Live-Regionen statt Modal-Rolle
- Exit-Intent-Overlays: Ausgelöst durch Mausbewegung – für Tastaturnutzer oft gar nicht erreichbar oder schließbar
Warum Pop-ups für verschiedene Nutzergruppen problematisch sind
Pop-ups betreffen unterschiedliche Nutzergruppen auf sehr verschiedene Weisen. Was für einen sehenden Mausnutzer eine kurze Unterbrechung ist, kann für andere Nutzerinnen und Nutzer die gesamte Seitennutzung unmöglich machen. Besonders in Fällen wo Pop-ups den Tastaturfokus nicht korrekt verwalten, entstehen sogenannte Tastaturfallen.
- Screenreader-Nutzer: Pop-up wird nicht angekündigt, Fokus bleibt im Hintergrund – Inhalt des Pop-ups unsichtbar
- Tastaturnutzer: Können im Hintergrund weitertabben statt im Pop-up zu navigieren – WCAG 2.1.2 verletzt
- Autistische Nutzer: Unvorhersehbares Erscheinen von Pop-ups löst Stress und Fokusunterbrechung aus
- Menschen mit ADHS: Pop-ups reißen aus der Konzentration – Wiederaufnahme der Aufgabe schwierig
- Menschen mit motorischen Einschränkungen: Kleiner Schließen-Button schwer treffsicher anzuklicken – Mindestgröße 44×44 px empfohlen
Technische Umsetzung: So werden Pop-ups barrierefrei
Ein barrierefreies Pop-up ist technisch kein Hexenwerk – es erfordert konsequente Implementierung von ARIA-Rollen, Fokusmanagement und Tastaturunterstützung. Die häufigsten Fehler entstehen nicht durch Unwissen, sondern durch fehlende Qualitätssicherung: Pop-ups werden visuell getestet, aber nie mit Tastatur oder Screenreader geprüft.
- ARIA-Rolle setzen: `role="dialog"` für Modals, `role="alertdialog"` für wichtige Warnungen
- Zugänglichen Namen vergeben: `aria-labelledby` auf die Überschrift des Pop-ups zeigen lassen
- Fokus ins Pop-up verschieben: Beim Öffnen Fokus auf erstes fokussierbares Element oder Überschrift setzen
- Fokusfalle implementieren: Tab-Taste bleibt innerhalb des Pop-ups solange es geöffnet ist
- Escape-Taste unterstützen: Schließt das Pop-up und gibt Fokus an auslösendes Element zurück
Pop-ups in Online-Shops: Besondere Anforderungen
In Online-Shops sind Pop-ups besonders verbreitet – und besonders kritisch. Pop-ups im Checkout-Prozess können einen Kaufabbruch auslösen, wenn sie für bestimmte Nutzergruppen nicht schließbar sind. Warenkorbbenachrichtigungen, Upsell-Modals oder Altersverifikations-Pop-ups müssen alle dieselben WCAG-Anforderungen erfüllen wie der Rest der Website.
Besonders problematisch sind Pop-ups die nur durch Klick auf einen unsichtbaren Hintergrund geschlossen werden können – eine für Tastaturnutzer und Screenreader-Nutzer vollständig unzugängliche Interaktion. Jedes Pop-up braucht einen expliziten, sichtbaren und per Tastatur erreichbaren Schließen-Button.
SiteCockpit Lösung
easyMonitoring: Pop-up-Barrieren automatisch erkennen
easyMonitoring prüft automatisiert, ob Pop-ups und Modals auf Ihrer Website korrekte ARIA-Rollen tragen, ob Fokusmanagement implementiert ist und ob Tastaturfallen vorhanden sind. So erkennen Sie gezielt, welche Pop-ups auf Ihrer Website für Menschen mit Behinderungen zur unüberwindbaren Barriere werden.
easyMonitoring kennenlernen →Häufige Fragen zu barrierefreien Pop-ups
Sind Pop-ups grundsätzlich schlecht für die Barrierefreiheit?
Nein – Pop-ups sind nicht verboten, müssen aber korrekt umgesetzt sein. Ein technisch sauberes Pop-up mit ARIA-Rolle, Fokusmanagement und Escape-Taste-Unterstützung ist vollständig barrierefrei. Das Problem liegt nicht im Pop-up selbst, sondern in der fehlerhaften Implementierung.
Was ist eine Tastaturfalle bei Pop-ups?
Eine Tastaturfalle entsteht, wenn Tastaturnutzer in ein Pop-up gelangen und es nicht mehr verlassen können – weil kein Schließen-Button per Tab erreichbar ist und die Escape-Taste nicht funktioniert. Das verstößt gegen WCAG 2.1.2 und macht die gesamte Website für Tastaturnutzer unbenutzbar.
Müssen Cookie-Banner barrierefrei sein?
Ja. Cookie-Banner sind eine Art Pop-up und müssen vollständig per Tastatur bedienbar, von Screenreadern lesbar und mit klaren Schaltflächen für Zustimmung und Ablehnung ausgestattet sein. Das BFSG schreibt dies seit dem 28. Juni 2025 gesetzlich vor.
Wie groß muss der Schließen-Button eines Pop-ups sein?
WCAG 2.5.8 (Level AA, neu in WCAG 2.2) empfiehlt eine Mindestgröße von 24×24 px für Klickziele, besser 44×44 px. Besonders bei Pop-ups ist ein zu kleines X-Symbol eine häufige Barriere für Menschen mit motorischen Einschränkungen oder Tremor.
Pop-ups auf Ihrer Website auf Barrierefreiheit prüfen
Mit easyMonitoring erkennen Sie automatisch, welche Pop-ups auf Ihrer Website für Menschen mit Behinderungen nicht zugänglich sind – und erhalten konkrete Hinweise zur WCAG-konformen Umsetzung.
Kostenlos testen