Datums- & Zeitauswahl (Datepicker) barrierefrei

Kaum eine Komponente wird so oft neu (und so oft unzugänglich) gebaut wie der Datepicker. Dabei ist die wichtigste Erkenntnis: Ein Kalender-Widget ist selten die beste Datumseingabe. Wer sein Geburtsdatum eingibt, will tippen, nicht 40 Jahre zurückblättern. Deshalb zuerst die Frage nach dem Anwendungsfall – dann die Technik.

Option 1: Das native input type="date"

<label for="reise">Reisedatum</label>
<input type="date" id="reise" name="reise"
       min="2026-07-04" max="2027-07-04" />

Der Browser liefert Tastaturbedienung, Screenreader-Anbindung und mobil die passende Systemoberfläche – ohne eine Zeile JavaScript, ganz im Sinn der ersten Regel von ARIA. Grenzen: Das Erscheinungsbild variiert je Browser und lässt sich kaum stylen, und komplexe Anforderungen (Belegungskalender, Preisanzeige je Tag) kann es nicht. Für die meisten Formulare ist es trotzdem die richtige Wahl – Semantik und Verhalten sind nativ am robustesten.

Option 2: Das simple Textfeld mit klarem Format

Für bekannte Daten (Geburtsdatum!) ist das Textfeld die schnellste und zugänglichste Lösung:

<label for="geburt">Geburtsdatum (TT.MM.JJJJ)</label>
<input id="geburt" name="geburt" inputmode="numeric"
       autocomplete="bday" aria-describedby="geburt-bsp" />
<p id="geburt-bsp">Zum Beispiel: 24.06.1985</p>

Wichtig: Formatangabe sichtbar (nicht nur als Platzhalter), autocomplete gesetzt, Eingabe tolerant parsen (24.6.85, 24-06-1985 …) und bei Fehlern konkrete Vorschläge machen.

Option 3: Der Kalender-Dialog nach ARIA APG

Wenn der Kalender echten Mehrwert bietet (Verfügbarkeiten, Wochentag-Kontext), dann als Ergänzung zum Eingabefeld, nie als Ersatz – exakt so beschreibt es das „Date Picker Dialog“-Muster im ARIA Authoring Practices Guide (APG):

• Ein Button („Datum aus Kalender wählen“) neben dem Feld öffnet einen modalen Dialog mit dem Kalender – Fokus wandert hinein, Esc schließt und gibt den Fokus zurück.
• Das Grid ist eine echte Tabelle bzw. role="grid": Wochentage als Spaltenköpfe, Tage als gridcell.
• Tastaturmodell: Pfeiltasten bewegen tagweise/wochenweise, Page Up/Down monatsweise, Home/Ende an Wochenanfang/-ende, Enter wählt – mit Roving Tabindex wie bei Tabs.
• Der sichtbare „ausgewählt“-Zustand braucht aria-selected und darf nicht nur an Farbe hängen; die Tages-Zellen brauchen 24 × 24 px.
• Nach der Wahl: Wert ins Feld schreiben und per Statusmeldung bestätigen („Gewählt: Freitag, 24. Juli 2026“).

Das ist ein komplettes eigenes Widget – selbst bauen lohnt fast nie. Eine erprobte, APG-konforme Bibliothekskomponente (mit genau diesem Tastaturmodell) ist hier die vernünftige Wahl.

Randnotiz – Uhrzeiten. Für Zeiten gilt dieselbe Rangfolge: input type="time" zuerst, sonst Textfeld mit Format („HH:MM“). Von Scroll-Rädchen-Nachbauten à la App-Store rate ich im Web ab – sie sind mit Tastatur und Screenreader regelmäßig ein Totalausfall und verletzen 2.5.7, wenn nur Wischen funktioniert.

Häufige Fehler

• Kalender als einziger Eingabeweg – Tippen muss immer möglich sein (Effizienz für alle, Pflicht für viele).
• Eigenbau-Grid ohne Tastaturmodell – role="grid" ohne Pfeiltasten-Logik verspricht, was es nicht hält.
• Icon-Button ohne Namen – das Kalender-Icon braucht ein Label.
• Fokus bleibt nach dem Schließen verloren statt zum Auslöser zurückzukehren.
• Format-Strenge ohne Hilfe – „01/24/86 ist ungültig“ ohne Beispiel und Vorschlag.

Häufige Fragen

Warum nicht drei Selects (Tag / Monat / Jahr)?

Drei Felder heißt dreimal fokussieren, dreimal scrollen – mit motorischen Einschränkungen mühsam, mit Screenreader zäh. Ein Textfeld mit toleranter Auswertung oder type="date" ist fast immer schneller. Wenn Selects, dann als Gruppe mit fieldset/legend.

Unterstützen alle Browser input type="date"?

Alle aktuellen, ja – inklusive mobiler Systeme, wo die native Oberfläche den meisten Custom-Pickern überlegen ist. Uneinheitlich ist nur die Optik; wer damit leben kann, spart sich das komplette Widget.

Wo finde ich das offizielle Muster?

Im ARIA Authoring Practices Guide (w3.org/WAI/ARIA/apg) unter „Date Picker Dialog“ – inklusive Referenz-Implementierung mit vollständigem Tastaturmodell.

Fazit

Die Rangfolge für Datumseingaben: natives type="date" → Textfeld mit klarem Format → Kalender-Dialog nach APG als Zusatzweg. Je weiter hinten in der Kette, desto mehr Verantwortung für Fokus, Tastatur und Ansagen übernimmst du selbst. Die Formular-Grundlagen dazu stehen in der Formular-Semantik, die verwandte Auswahl-Problematik bei den Comboboxen.