Date Picker (Formularkomponente zur Auswahl eines Datums)
[Materialsammlung]
Bedeutung von Datepickern
Datepicker 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.
Datepicker 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.
Eingabefelder parallel anbieten
Datepicker erleichtern für viele die Useability bei der Auswahl eines Datums. Für viele bringen sie jedoch insbesondere bei der Tastaturbedienung Probleme bei der Useability und für die technische Realisierung große Herausforderungen bei der Realisierung der Barrierefreiheit.
Es empfiehlt sich daher, parallel zum Datepicker ein gewöhnliches Eingabefeld für das Datum anzubieten. In diesem sollte das aktuelle Datum vorgeschlagen sein, um die erforderliche Datumsformatierung zu erkennen.
Für das Eingabefeld gelten natürlich die entsprechenden WCAG Erfolgskriterien für Formularelemente. Einige relevante Erfolgskriterien seien hier angeführt:
Best Practise Beispiele
Alle Menschen im Webdesign 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:
Deque University Code Library (abgerufen 11. Juni 2016
Dieser Datepicker 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 Datepicker 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.