Captcha schützen Deine Website vor Spam, Bots und automatisierten Angriffen, beispielsweise beim Formularversand. Leider verhindern sie aber auch oft, dass Deine Website barrierefrei ist. Was Du tun kannst oder viel mehr tun solltest, erklären wir Dir in diesem Beitrag über barrierefreie Captcha. Los geht’s!

Captcha und Barrierefreiheit

Captcha ist eine englische Abkürzung und steht für “Completely Automated Public Turing test to tell Computers and Humans Apart”. Auf deutsch in etwa “vollautomatisierter Test zur Unterscheidung zwischen Computern und Menschen”. Die Aufgabe von Captchas ist einfach: Schutz Deiner Website, zum Beispiel vor Spam über Dein Kontaktformular.

Bei genauerer Betrachtung wird hier auch schon klar, weshalb Captchas in der digitalen Barrierefreiheit ein großes Thema sind. Sie identifizieren Menschen. Nur haben Menschen unterschiedliche Fähigkeiten, Stärken, Schwächen und Einschränkungen. Manche sehen oder hören schlecht, andere haben kognitive oder motorische Beeinträchtigungen.

Es ist deshalb gar nicht so einfach, ein für alle Menschen zugängliches Captcha zu erstellen. Gefordert wird das allerdings, zum Beispiel ganz explizit mit dem WCAG-Kriterium 1.1.1 in der Konformitätsstufe A (eine absolute Minimalanforderung).

Gängige Captcha-Lösungen

• Bildbasierte Captchas: Du kennst und nutzt sie vielleicht selbst, reCAPTCHA oder hCaptcha. Diese benötigen visuelle Erkennung, was für viele Menschen eine echte Herausforderung sein kann. In diesem Fall brauchst Du unbedingt einen das Captcha beschreibenden Alt-Text sowie einen Hinweis, wo die Bild-Captcha-Alternativen zu finden sind.
• Text- und Rechenaufgaben: Manchmal wirst Du nach dem Ergebnis einfacher mathematischer Aufgaben oder Wissenstests gefragt. Doch kulturelle Unterschiede und komplexe Fragen sind oft schwer zu meistern.
• Audio-Captchas: Für Nutzenden mit Sehbehinderungen könnten Audio-Captchas eine Alternative sein. Leider sind sie oft verzerrt oder schwer verständlich, was das Ganze nicht viel besser macht.
• Unsichtbare Captchas & verhaltensbasierte Ansätze: Ein Beispiel ist reCAPTCHA v3, das Dein Nutzerverhalten analysiert. Das Ganze ist für Dich unsichtbar, aber aus Datenschutzsicht leider nicht ganz unproblematisch.

Alternative Sicherheitsverfahren

Die Honeypot-Technik nutzt unsichtbare Formularfelder, um Bots zu erkennen. Biometrische Verfahren wie WebAuthn/FIDO2 nutzen Fingerabdruck- oder Gesichtserkennung und können eine gute Ergänzung sein.

Typische Captcha-Barrieren

• Visuelle: Stark verzerrte Bilder sind für Menschen mit Sehbehinderungen ein großes Problem. Sie können das Captcha nicht erkennen und werden ausgeschlossen.
• Auditive Barrieren: Verzerrte oder schwer verständliche Audio-Captchas sind eine Gewissensfrage. Sie sind für Menschen mit Hörbeeinträchtigungen oft kaum nutzbar.
• Kognitive & motorische Herausforderungen: Komplexe Aufgabenstellungen, Zeitlimits oder schwer bedienbare Interaktionsmethoden sind echte Barrieren für viele Menschen mit kognitiven oder motorischen Einschränkungen.

Nutzenden mit mehreren Einschränkungen stoßen entsprechend gleich auf doppelte und dreifache Barrieren.

Captcha in der WCAG

1. Wahrnehmbar (Perceivable)

• Kriterium 1.1.1 Nicht-Text Inhalt
  • Anforderung: Alle nicht textuellen Inhalte (z. B. Bild-Captchas) müssen durch eine textuelle Alternative ersetzt oder ergänzt werden.
  • Umsetzung: Bei bildbasierten Captchas muss ein aussagekräftiger Alt-Text vorhanden sein, der den Inhalt oder die Funktion beschreibt sowie auf Alternativen hinweist.
• 1.4.3 Kontrast
  • Anforderung: Text (inklusive Anleitungen in Captchas) muss einen ausreichenden Kontrast zum Hintergrund aufweisen.
  • Umsetzung: Achte bei statischen und dynamischen Texten in Captchas auf eine kontraststarke Darstellung.

2. Bedienbar (Operable)

• 2.1.1 Tastaturbedienbarkeit (Keyboard Accessible)
  • Anforderung: Alle Funktionen müssen über die Tastatur erreichbar sein.
  • Umsetzung: Interaktive Elemente, wie Buttons zum Aktualisieren eines Captchas, sollten per Tabulator erreichbar und bedienbar sein.
• 2.2.1 Zeitgesteuerte Inhalte
  • Anforderung: Falls Zeitlimits gesetzt werden, muss es eine Möglichkeit geben, diese zu verlängern oder anzupassen.
  • Umsetzung: Vermeide strikte Timeouts oder biete Verlängerungsoptionen an.

3. Verständlich (Understandable)

• 3.3.2 Beschriftungen oder Anweisungen (Labels or Instructions)
  • Anforderung: Formularelemente, inklusive Captchas, müssen klar beschriftet sein, damit Nutzenden verstehen, was von ihnen erwartet wird.
  • Umsetzung: Nutze klare, verständliche Beschriftungen und ergänzende Anweisungen (z. B. durch aria-describedby).

4. Robust (Robust)

• Technische Umsetzung
  • Anforderung: Inhalte müssen so implementiert sein, dass sie mit unterschiedlichen Hilfstechnologien kompatibel sind.
  • Umsetzung: Der Einsatz von semantisch korrektem HTML, ARIA-Attributen und getesteter Tastaturnavigation stellt sicher, dass Captchas robust und zukunftssicher umgesetzt werden.

Tipps für barrierefreie Captcha

Mehrere Methoden anbieten

Biete verschiedene Möglichkeiten zur Verifizierung an: E-Mail-/SMS-Verifizierung, passwortlose Anmeldungen (Magic Links) und Social-Log-ins. Ergänze auch biometrische Verfahren wie WebAuthn/FIDO2.

Einfache, leicht verständliche Aufgaben stellen

Vermeide komplexe und verzerrte Rätsel. Setze auf klare und einfache Fragen oder verhaltensbasierte Ansätze. Vermeide kulturelle oder bildungsabhängige Allgemeinwissensfragen. Einfache Rätzel sind beispielsweise “2 + drei = “.

Kompatibilität mit Screenreadern sicherstellen

• Nutze Text-Captchas, die als HTML-Text dargestellt werden.
• Verwende ARIA (Accessible Rich Internet Applications)-Labels und semantisch korrektes HTML, um den Inhalt klar zu strukturieren.
• Biete klare Audio-Optionen an und stelle Alternativen bereit.

Code-Beispiel für ein Screenreader-freundliches Text-Captcha. Die Klasse sr-only (screenreader only) sorgt dafür, dass der Text nur von Screenreadern erfasst wird.

<form id="captcha-form">
  <fieldset>
    <legend>Verifizieren Sie, dass Sie kein Roboter sind</legend>
    <label for="captcha-input">Bitte geben Sie den Text aus dem Bild ein:</label>
    <img src="captcha.jpg" alt="Sicherheitscode: Geben Sie den angezeigten Code ein." />
    <input type="text" id="captcha-input" name="captcha" aria-describedby="captcha-instructions" required>
    <span id="captcha-instructions" class="sr-only">
      Dieser Code dient zur Überprüfung, dass Sie ein Mensch sind.
    </span>
  </fieldset>
  <button type="submit">Absenden</button>
</form>

Tastaturzugänglichkeit gewährleisten

• Alle interaktiven Elemente müssen per Tastatur erreichbar sein.
• Verwende semantische HTML-Elemente wie statt für klickbare Elemente.
• Implementiere optimiertes Fokus-Management.

Code-Beispiel für ein Tastatur-zugängliches Element. Das enthaltene aria-label stellt sicher, dass auch Nutzenden, die den Button nur akustisch wahrnehmen, wissen, was er bewirkt.

<button type="button" id="refresh-captcha" aria-label="Neuen Sicherheitscode anfordern">
  Neuer Code
</button>

Vermeidung von zeitlichen Beschränkungen

Verzichte auf erzwungene Timeouts oder biete großzügige Zeitfenster an. Falls nötig, stelle eine Option zur Verlängerung bereit und informiere rechtzeitig und transparent darüber.

Verzicht auf visuelle oder akustische Überlastung

Vermeide blinkende oder schnell animierte Inhalte oder laute Audioausgaben. Setze auf eine ruhige Gestaltung und klare Anweisungen.

Einsatz der Honeypot-Technik

• Ein zusätzliches, für Menschen unsichtbares Feld einfügen, das von Bots ausgefüllt wird.
• Achte darauf, dass das Feld nicht fälschlicherweise von Screenreadern als interaktiv erkannt wird.

Code-Beispiel eines Honeypot-Felds. Das Feld wird für reguläre Nutzenden unsichtbar gemacht und ist für die Tastaturnavigation ausgeschlossen (mittels tabindex=”-1″).

<div style="position: absolute; left: -9999px;">
  <label for="website">Website</label>
  <input type="text" id="website" name="website" tabindex="-1" autocomplete="off">
</div>

KI-gestützte Captcha-Alternativen (reCAPTCHA v3)

Verhaltensbasierte Analysen sind ein großer Vorteil, denn sie stellen sicher, dass sie datenschutzkonform umgesetzt und transparent kommuniziert werden. Biete Alternativen für Nutzenden, die der Analyse nicht zustimmen.

Nutzung biometrischer Verfahren

Einsatz von Fingerabdruck- oder Gesichtserkennung kann die Barrierefreiheit erhöhen. Biete immer alternative Authentifizierungsmethoden an und beachte die dafür erforderlichen Datenschutz- und Hardwarevoraussetzungen.

Transparente Fehler- und Unterstützungsmöglichkeiten

• Klare, verständliche Fehlermeldungen anbieten, die von Screenreadern vorgelesen werden.
• Direkte Kontaktmöglichkeiten (z. B. E-Mail, Chatbot) und alternative Lösungswege bereitstellen.

Code-Beispiel für eine barrierefreie Fehlermeldung. Mit role=”alert” und aria-live=”assertive” wird sichergestellt, dass die Fehlermeldung sofort von unterstützenden Technologien erkannt und vorgelesen wird.

<div role="alert" aria-live="assertive" class="error-message">
  <p>Die Eingabe des Sicherheitscodes war leider falsch. Bitte versuchen Sie es erneut oder nutzen Sie eine alternative Verifizierungsmethode.</p>
</div>

Fazit und Empfehlung

Ich hoffe, dieser Blogbeitrag hat Dir geholfen, die Relevanz und die Umsetzung von barrierefreien Captchas besser zu verstehen. Wenn Du Fragen oder Anmerkungen hast, dann lass es uns gerne wissen.