Date Picker
Formularkomponente zur Auswahl eines Datums
[Materialsammlung]
Date Picker sind Kalender, die in Formularen eingeblendet sind oder eingeblendet werden können. Sie sollen die Auswahl eines bestimmten Datums erleichtern. Typischerweise werden sie auf Seiten zur Fahrplanauskunft oder von Veranstaltern eingesetzt.
Date Picker liefern hilfreiche Funktionalitäten im Sinne der Useability einschlägiger Formulare. Sie werden von keiner Richtlinie der WCAG vorgeschrieben, wenn sie in einem Formular aber vorhanden sind, müssen deren Funktionalitäten aber natürlich für alle wahrnehmbar und bedienbar sein.
Eingabefeld type=date
Mit dem Attribut type="date"
wird ein Eingabefeld für den Browser als Formularkomponente zur Datumseingabe gekennzeichnet. Moderne Browser ergänzen das Eingabefeld mit einem Date Picker. Du kannst das Verhalten deines aktuellen Browsers in folgendem Beispiel testen:
Der code sieht etwa folgendermaßen aus:
<label>Anreisetag (TT.MM.JJJJ):</label>
<input id="arrival"
type="date"
name="arrival">
Chrome 119.0
Sobald das Icon für den Date Picker den Fokus erhält, verkündet JAWS:
Datumsauswahl anzeigen Menü Schalter Drücken Sie LEERTASTE zum Aktivieren des Menüs, dann navigieren Sie mit den Pfeiltasten.
- Die Tasten ← und → dienen zum tageweisen Navigieren.
- Die Tasten ↑ und ↓ dienen zum wochenweisen Navigieren.
- Die Tasten SeiteRauf und SeiteRunter dienen zum monatsweisen Navigieren.
- Die Tasten Pos1 und Ende führen zum Monatsersten bzw. Monatsletzten.
Best Practise Beispiele
Alle Menschen im Web Design können beruhigt sein: Die Aufgaben sind zwar kniffelig, aber es haben sich schon andere mit den Problemen auseinandergesetzt und deren Ergebnisse lassen sich anschauen:
Whatsock | Aria Date Picker (zuletzt abgerufen 13.12.2023)
Auf der Seite befinden sich gleich mehrere Templates mit barrierefreien Date Pickern.
Tastaturbedienung
- Mit → und ← kann zwischen den Tagen gewechselt werden.
- Mit ↑ und ↓ kann wochenweise gesprungen werden.
- Mit Seite Rauf und Seite Runter kann monatsweise gesprungen werden.
- Mit Alt + Seite Rauf bzw. Seite Runter kann jahrweise gesprungen werden.
- Mit Tabulator kommt man zu den Schaltern für vorheriges und nächstes Monat bzw. Jahr.
Das aktuell gewählte Datum wird jeweils mit dem Wochentag vom Screen Reader vorgelesen.
Deque University Code Library (zuletzt abgerufen 13.12.2023)
Dieser Date Picker ist nach meiner Wahrnehmung barrierefrei und zudem gut dokumentiert und zum Download bereitgestellt. Er soll auch auf Smart Phones barrierefrei bedienbar sein, was ich nicht ausprobiert habe.
- Der Kalender ist mit der Tastatur bedienbar. Mit den Cursortasten Links/Rechts kann man zum vorherigen oder nächsten Tag. Mit den Cursortasten Oben/Unten springt der Fokus um eine Woche vor und zurück. Wird dabei der Monat gewechselt, erscheint auch der entsprechende Monat.
- Der Screen Reader gibt zum Datum auch den jeweiligen Wochentag bekannt.
Achtung Dieses Beispiel zeigt meines Erachtens, dass es prinzipiell geht, einen Date Picker barrierefrei zu machen. Allerdings ist das Beispiel englischsprachig und es ist mir noch nicht gelungen, es für ein deutschsprachiges Publikum zu adaptieren. Da bedarf es doch tieferer Analysen des JavaScript Codes. Freu mich auf fachkundige Unterstützung!
Als tückische Herausforderung stellte sich heraus, dass beim Ändern von Sunday
zu Sonntag
und Su
zu So
im Hauptdokument bei der Anzeige nicht unbedingt deutschsprachig erschien, dafür jedoch Funktionalitäten, wie die Ansage des Wochentages verloren gingen.
WAI APG | Date Picker Spin Button Example
Im Beispiel wird für Tag, Monat und Jahr jeweils eine Auswahl angeboten. Ein Kalender wird nicht eingeblendet, der Wochentage anzeigt oder wochenweises Navigieren ermöglicht.
Nicht-barrierefreie Vorlagen
- jQuery | Datepicker
- Dieser Date Picker ist mit Stand 31.10.2023 nicht allein mit der Tastatur bedienbar.
- Orbeon | All Form Controls | Date and Time
- Die beiden Date Picker verfügen mit Stand 13.12.2023 über keine Beschriftung des auslösenden Schalters und sind nicht allein mit der Tastatur bedienbar.
Eingabefelder parallel anbieten
Date Picker erleichtern für viele die Auswahl eines Datums. Für andere bringen sie jedoch insbesondere bei der Tastaturbedienung Probleme mit sich. Es empfiehlt sich daher, parallel zum Date Picker ein gewöhnliches Eingabefeld für das Datum anzubieten.
Die Beschriftung des Eingabefelds sollte auch auf die erforderliche Datumsformatierung hinweisen (TT.MM.JJJ).
Das aktuelle Datum kann als Standardwert vorgeschlagen werden, sofern die Eingabe nicht das persönliche Geburtsdatum erfordert (Das Erfolgskriterium 1.3.5 Zweck der Eingabe verlangt für das autocomplete
-Attribut beim Geburtsdatum den Wert bday
.).