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

Das BFSG gilt seit dem 28. Juni 2025 für bestimmte Produkte und Dienstleistungen für Verbraucher. Ob Dein Angebot erfasst ist, erklärt die BFSG-Check-Lösung. Die folgenden Prüfungen helfen Dir, technische Barrieren auf Deiner Website zu finden.

Ein Pop-up ohne erreichbaren Schließen-Button kann die weitere Nutzung blockieren. Ein rein visuelles Captcha kann blinde Menschen vom Absenden eines Formulars ausschließen.

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">Trage Deine 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.
• WCAG 1.1.1 verlangt bei Captchas einen Text, der ihren Zweck beschreibt, sowie alternative Formen für unterschiedliche sensorische Wahrnehmung.
• Aufgaben mit Zeitdruck.

• Barrierefreie Captcha-Alternativen:

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

Textbasierte Logikfragen („Schreibe 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: Vermeide strikte Zeitlimits für die Lösung.

Weitere Kriterien findest Du im WCAG-Hub. Nutze das Accessibility Audit für maschinell prüfbare Befunde und ergänze manuelle Tests.