Barrierefreie Pop-ups & Captchas: Best Practices für das Barrierefreiheitsstärkungsgesetz (BFSG)

Ab dem 28. Juni 2025 wird das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtend für digitale Produkte und Websites. Doch viele Websites verstoßen gegen die Anforderungen – insbesondere durch nicht barrierefreie Pop-ups und ungeeignete Captchas.

🚨 Problem: Häufig sind Pop-ups für Screenreader unzugänglich, nicht per Tastatur bedienbar oder Captchas unlösbar für Menschen mit Behinderungen. Das führt zu schlechter User Experience, erhöhten Absprungraten und möglichen Bußgeldern.

Warum Pop-ups & Captchas oft nicht barrierefrei sind

Die häufigsten Barrieren auf Websites entstehen durch:

❌ Fehlende Tastatursteuerung: Nutzer:innen ohne Maus können Pop-ups oft nicht schließen.

❌ Nicht lesbare Captchas: Verzerrte Texte oder Bilder-Captchas sind für viele Menschen nicht lösbar.

❌ Screenreader-Probleme: Ohne ARIA-Tags können blinde Nutzer:innen Pop-ups nicht erkennen.

❌ Automatische Pop-ups: Automatisch öffnende Fenster überfordern viele Nutzer:innen

Best Practices für barrierefreie Pop-ups & Captchas

1. Barrierefreie Pop-ups richtig gestalten – Usability & Accessibility vereinen

✅ Per Tastatur steuerbar: Nutzer:innen müssen mit Tab-Taste & Enter navigieren können.

✅ Escape-Taste (ESC) zum Schließen aktivieren.

✅ ARIA-Tags (aria-labelledby, aria-describedby) für Screenreader einsetzen.

✅ Keine Auto-Pop-ups – Nutzer:innen sollten aktiv entscheiden, wann Inhalte geöffnet werden

💡 Gutes Beispiel für ein barrierefreies Pop-up:

<div role="dialog" aria-labelledby="popup-title" aria-describedby="popup-text">
  <h2 id="popup-title">Newsletter-Anmeldung</h2>
  <p id="popup-text">Tragen Sie Ihre E-Mail-Adresse ein:</p>
  <button aria-label="Schließen" onclick="closePopup()">X</button>
</div>

2. Barrierefreie Captchas: Alternativen zur Bildverifizierung

Visuelle Captchas stellen oft eine große Hürde dar – insbesondere für Menschen mit Sehschwäche, motorischen Einschränkungen oder kognitiven Beeinträchtigungen.

🚫 Häufige Probleme:

• Audio-Captchas ohne Transkript sind für viele Nutzer nicht zugänglich.
• Verwaschene Textbilder sind für Menschen mit Sehschwäche nicht lesbar.
• Captchas ohne barrierefreie Alternativen verstoßen gegen die WCAG 2.1.
• Aufgaben mit Zeitdruck.

✅ Barrierefreie Captcha-Alternativen:

✔ Einfache Rechenaufgaben (z. B. 4 + 3 = ?)

✔ Textbasierte Logikfragen („Schreiben Sie das Wort ‚Barrierefrei‘“)

✔ Audiocaptchas mit klarer Sprache und Bedienungshilfe für blinde Nutzer

✔ Automatische Spam-Erkennung ohne Nutzereingabe

Checkliste: Barrierefreie Pop-ups & Captchas

Barrierefreie Pop-ups

• ✅ Tastaturbedienbarkeit: Pop-up muss per Tastatur erreichbar und schließbar sein (z.B. mit Esc).

• ✅ Fokus-Management: Der Tastaturfokus muss beim Öffnen in das Pop-up gesetzt und darf es nicht verlassen.

• ✅ Screenreader-Ankündigung: Pop-up-Inhalt muss von Screenreadern angekündigt werden (z.B. aria-modal="true", role="dialog").

• ✅ Klare Schließen-Option: Ein deutlich sichtbarer und beschrifteter Schließen-Button ist Pflicht.

Barrierefreie Captchas

• ✅ Alternative für Sehbehinderte: Audio-Captchas als Alternative zu visuellen Aufgaben anbieten.

• ✅ Alternative für Hörbehinderte: Textbasierte Alternativen für Audio-Captchas bereitstellen.

• ✅ Einfache Aufgaben: Captcha-Aufgaben sollten logisch und nicht zu komplex sein.

• ✅ Keine Zeitlimits: Vermeiden Sie strikte Zeitlimits für die Lösung.