Dateiformate


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.

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

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.

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.).