Zeitlimits (WCAG 2.2.1): Session-Timeouts barrierefrei gestalten

Menschen mit motorischen Einschränkungen, Screenreader-Nutzer und Personen mit kognitiven Beeinträchtigungen brauchen oft deutlich mehr Zeit für Formulare, Checkout-Prozesse oder das Lesen von Inhalten. Ein starres Session-Timeout von 15 Minuten kann den gesamten Bestellvorgang zunichtemachen. WCAG 2.2.1 stellt sicher, dass Zeitlimits anpassbar sind – und das BFSG macht es zur gesetzlichen Pflicht.

Was fordert WCAG 2.2.1 konkret?

Für jedes Zeitlimit, das durch den Inhalt gesetzt wird, muss mindestens eine der folgenden Optionen gelten: Abschalten: Der Nutzer kann das Zeitlimit vor Ablauf komplett deaktivieren. Anpassen: Der Nutzer kann das Zeitlimit auf mindestens das 10-fache des Standardwerts verlängern. Verlängern: Der Nutzer wird vor Ablauf gewarnt und hat mindestens 20 Sekunden Zeit, das Limit mit einer einfachen Aktion (z. B. Leertaste drücken) zu verlängern – und zwar mindestens 10 Mal hintereinander. Es gibt drei Ausnahmen: Echtzeit-Events (z. B. Auktionen), essentielle Zeitlimits (z. B. Prüfungen) und Zeitlimits über 20 Stunden.

Typische Zeitlimits im Web

Session-Timeouts: Login-Sessions, die nach Inaktivität ablaufen – besonders kritisch bei Checkout-Prozessen und Formularen. Auto-Refresh: Seiten, die sich automatisch neu laden (z. B. News-Ticker). Lösung: Meta-Refresh entfernen, stattdessen einen manuellen Aktualisieren-Button anbieten. Auto-Redirect: Weiterleitungen nach X Sekunden (z. B. „Sie werden in 5 Sekunden weitergeleitet"). Lösung: Sofort weiterleiten oder einen Link anbieten statt eines Timers. Carousel/Slider: Automatisch rotierende Inhalte. Lösung: Pause-Button anbieten und Animation bei Hover/Fokus stoppen. Inaktivitäts-Warnungen: Banking-Apps, die nach 5 Minuten ausloggen – hier muss eine Verlängerungsoption angeboten werden.

Technische Umsetzung

Für Session-Timeouts empfiehlt sich ein modales Warnfenster: <div role="alertdialog" aria-label="Session läuft ab"> Das Fenster erscheint 2 Minuten vor Ablauf, ist per Tastatur bedienbar und fokussiert automatisch den „Verlängern"-Button. Wichtig: Der Dialog muss auch für Screenreader zugänglich sein (role="alertdialog" oder role="dialog" mit aria-modal="true"). Für Auto-Refresh: Verwende kein <meta http-equiv="refresh">. Für Slider: Implementiere Pause/Play-Buttons und stoppe die Animation, sobald ein Element im Slider den Fokus erhält.

WCAG-Bezug

WCAG 2.2.1 Timing Adjustable ist Level A – die strengste Konformitätsstufe. Ein Verstoß ist automatisch eine BFSG-Verletzung. Die EN 301 549, Abschnitt 11.2.2.1, übernimmt das Kriterium. Verwandte Kriterien: WCAG 2.2.2 (Pause, Stop, Hide, Level A) fordert, dass sich bewegende Inhalte pausiert werden können. WCAG 2.2.6 (Timeouts, Level AAA) geht weiter und fordert, dass Nutzer über drohenden Datenverlust durch Inaktivität informiert werden. Im E-Commerce-Kontext sind Zeitlimits besonders kritisch: Ein Checkout, der den Warenkorb nach 10 Minuten leert, ist eine massive Barriere für langsame Nutzer.