Accessible Datepicker
Das Datumsfeld, das seinen Namen sagt
Feld, Kalender-Schaltfläche, Zustand: drei Stellen, an denen Datumsfelder verstummen.
Zwei Wege zum Datum
Wer bestimmt, wie das Datum aussieht?
Beim nativen Datumsfeld entscheidet das Gerät über die Oberfläche. Beim Textfeld definieren Sie das sichtbare Format. Diese zwei Pläne zeigen, was jeweils verlässlich ist.
Native Datumseingabe
Für Termine, bei denen die zeitliche Lage und ein wählbarer Zeitraum helfen.
Schematische Darstellung, kein Browser-Screenshot
- Sichtbar: Reihenfolge, Kalender-Symbol und Bedienung können variieren.
- Stabil: Name, erlaubter Zeitraum und übertragener Wert.
type="date"2026-10-24Sie geben kein Anzeigeformat vor. Testen Sie die tatsächlich unterstützten Browser, Betriebssysteme und Eingabemethoden, statt eine bestimmte Kalenderoberfläche anzunehmen.
<label for="abreise">Abreisedatum</label>
<input
id="abreise"
name="abreise"
type="date"
min="2026-09-08"
max="2027-09-08"
aria-describedby="abreise-hinweis"
>
<p id="abreise-hinweis">
Buchbar vom 08.09.2026 bis 08.09.2027.
</p>Textfeld mit Formatvertrag
Für bekannte oder abschreibbare Daten, etwa Geburts- und Ausstellungsdaten.
Schematische Darstellung eines Textfelds
- Sichtbar: Das Beispiel erklärt Reihenfolge, Trennzeichen und Länge.
- Verbunden:
aria-describedbyordnet den Hinweis dem Feld zu.
31.02.2026Das Textfeld kennt keinen Kalender. Das Pattern prüft nur die Schreibweise. Prüfen Sie zusätzlich serverseitig, ob Tag, Monat und Jahr ein echtes, zulässiges Datum bilden.
<label for="geburt">Geburtsdatum</label>
<input
id="geburt"
name="geburt"
type="text"
autocomplete="bday"
pattern="[0-9]{2}\.[0-9]{2}\.[0-9]{4}"
aria-describedby="geburt-hinweis"
>
<p id="geburt-hinweis">
Format TT.MM.JJJJ, zum Beispiel 09.03.1948.
</p>So prüfen Sie es
- Öffnen Sie das native Feld auf Desktop und Mobilgerät. Dokumentieren Sie Darstellung, Tastaturbedienung und Screenreader-Ansage je unterstützter Kombination.
- Senden Sie den nativen Wert ab. Im Request muss für den gezeigten Tag
2026-10-24stehen, unabhängig von der sichtbaren Reihenfolge. - Geben Sie im Textfeld
31.02.2026ein. Die serverseitige Prüfung muss den unmöglichen Tag ablehnen und die Korrektur am Feld erklären. - Zoomen Sie auf 200 Prozent und prüfen Sie bei 320 CSS-Pixeln. Beschriftung, Feld, Hinweis und Fehlermeldung müssen in ihrer Lesereihenfolge erhalten bleiben.
Aus dem Prüfbericht
Drei Stellen, drei Befunde
Kritisch Das Datumsfeld hat keinen Namen Regel label
„Abreisedatum“ steht darüber, ist aber nicht verbunden. Ein label mit for macht es zum Namen.
Kritisch Die Combobox hat keinen Namen Regel aria-input-field-name
Ein Element mit role="combobox" braucht einen Namen. aria-label oder aria-labelledby liefert ihn.
Kritisch aria-expanded fehlt an der Combobox Regel aria-required-attr
Eine Combobox muss sagen, ob der Kalender offen ist. Ohne aria-expanded bleibt der Zustand unbekannt.
Zum Mitnehmen
Das Datumsfeld, korrigiert
Ein label, ein Name, ein Zustand. Der Kalender selbst bleibt.
Korrektur in 2 Schritten ansehen
Beschriftung und Feld verbinden
for zeigt auf die id des Felds. Klick auf das Wort setzt den Cursor ins Feld.
KorrekturvergleichSchritt 1 · HTML Vorher
<span class="label">Abreisedatum</span> <input type="text" name="abreise" placeholder="TT.MM.JJJJ">Nachher
<label for="abreise">Abreisedatum</label> <input id="abreise" type="text" name="abreise" placeholder="TT.MM.JJJJ">Markierte Zeilen wurden geändert
So prüfen Sie es Tab ins Feld. Ein Vorleseprogramm sagt „Abreisedatum, Eingabefeld“.
Der Combobox Namen und Zustand geben
aria-labelledby nimmt die Beschriftung des Felds. aria-expanded wechselt mit dem Kalender.
KorrekturvergleichSchritt 2 · HTML Vorher
<div role="combobox" tabindex="0"> <svg aria-hidden="true"><use href="#icon-calendar"></use></svg> </div>Nachher
<button type="button" role="combobox" aria-labelledby="abreise-label" aria-expanded="false" aria-controls="kalender"> <svg aria-hidden="true"><use href="#icon-calendar"></use></svg> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Tab auf den Kalender. Ein Vorleseprogramm sagt „Abreisedatum, Kombinationsfeld, reduziert“.