02.06.2026 | Lesezeit: ca. 5 Minuten

Datums- und Zeit-Picker — Kalender ohne Maus-Zwang

Kalender, der jeden durchlässt

Kalenderraster mit hervorgehobenem Tag und einer Uhr als Symbol für barrierefreie Datums- und Zeitauswahl

Eine Datumsauswahl wirkt wie eine Kleinigkeit. Ein kleines Kalender-Symbol, ein Klick, ein aufpoppender Monat, fertig. Mit der Maus ist das Geburtsdatum oder der Wunschtermin in zwei Sekunden gesetzt.

Wer aber per Tastatur navigiert oder einen Screenreader nutzt, landet bei genau diesem aufklappbaren Kalender oft in einer Sackgasse. Der Monat erscheint, doch kein Tag lässt sich anspringen. Ein barrierefreier Datums-Picker macht aus dieser Falle ein Feld, das jeder bedient. Den größeren Rahmen rund ums Eingeben liefert der Beitrag zu barrierefreien Formularen, hier geht es allein um das Kalender- und Zeit-Widget.

Warum der Kalender zur Tastatur-Falle wird

Ein selbst gebauter Kalender ist für die Maus gedacht. Man sieht ein Gitter aus Zahlen und tippt auf den richtigen Tag. Das Auge findet die heutige Markierung, den ausgegrauten Sonntag, den nächsten freien Termin in Sekunden.

Ohne Maus bricht diese Logik zusammen. Die Tabulator-Taste springt vielleicht in den Kalender hinein, aber dann von Zahl zu Zahl, 31 Sprünge für den letzten Tag des Monats. Oft fehlt sogar das, und das Gitter bleibt komplett stumm. Eine Vorlese-Software wiederum hört nur lose Zahlen ohne Monat und Wochentag, also kaum verwertbare Information.

Das native Datumsfeld als sichere Basis

Jeder moderne Browser bringt ein eigenes Datumsfeld mit. Es zeigt ein kleines Kalender-Symbol, öffnet auf Wunsch einen Monat und ist von Haus aus mit der Tastatur bedienbar. Diese Variante hat den großen Vorteil, dass Browser- und Betriebssystem-Hersteller die Barrierefreiheit bereits eingebaut und über Jahre getestet haben.

Für die meisten Webseiten reicht dieses Feld vollkommen aus. Ein Kontakt-, Rückruf- oder Reservierungsformular braucht selten mehr als die Auswahl eines einzelnen Tages. Wer kein zwingendes Argument für etwas Eigenes hat, fährt mit dem nativen Feld am sichersten und spart sich obendrein die Test-Arbeit. Frag im Zweifel Deine Agentur, warum es kein Standardfeld sein soll.

Wann ein eigener Kalender Sinn ergibt

Manchmal genügt das schlichte Feld nicht. Ein Hotel zeigt An- und Abreise als zusammenhängenden Zeitraum, eine Praxis blendet belegte Tage aus, ein Ferienhaus markiert Wochen mit Mindestbuchung. Solche Logik kann das native Feld nicht abbilden, dafür braucht es einen eigenen Kalender.

Dann steigt allerdings die Verantwortung. Was die Hersteller beim Standardfeld erledigt haben, musst Du beim eigenen Widget aktiv einfordern und prüfen. Die folgenden Merkmale sind genau die Punkte, an denen selbst gebaute Kalender am häufigsten scheitern.

Bedienung im Kalender-Gitter mit der Tastatur

Ein guter Kalender behandelt seine Tage wie ein echtes Gitter. Die Pfeiltasten bewegen den Fokus nach links, rechts, oben und unten, also entlang der Wochentage und über die Wochen hinweg. Ein Tastendruck nach unten springt sieben Tage weiter, nicht einen.

So erreichst Du jeden Tag in wenigen Anschlägen statt in dreißig. Bild- und Pos1-Tasten blättern zum nächsten Monat oder zum Monatsanfang, die Eingabetaste übernimmt den markierten Tag, die Escape-Taste schließt den Kalender wieder. Wenn Du den Kalender einmal allein mit den Pfeiltasten durchsteuern kannst und der Fokus dabei immer sichtbar bleibt, ist die wichtigste Hürde genommen. Mehr zu diesem Prinzip steht im Beitrag, wie sich eine Seite ganz ohne Maus bedienen lässt.

Texteingabe als zweiter Weg

Der schnellste Weg zu einem Datum ist oft das Tippen. Wer sein Geburtsdatum kennt, will es eingeben und nicht durch zwölf Monate zurückblättern. Ein gutes Widget lässt deshalb beide Wege zu, den Kalender zum Klicken und das Feld zum Tippen.

Das hilft nicht nur Tastatur-Nutzern. Auch am Smartphone tippt sich ein bekanntes Datum schneller, als man durch einen winzigen Kalender wischt. Ein reines Klick-Widget ohne Tipp-Möglichkeit sperrt einen ganzen Teil der Besucher aus, ohne dass es dafür einen guten Grund gäbe.

Das Format klar vorgeben

Sobald getippt werden darf, stellt sich die Format-Frage. Steht der Tag vorne oder der Monat? Vierstelliges Jahr oder zwei Ziffern? Punkt oder Schrägstrich als Trenner? Diese Unsicherheit kostet Eingaben und produziert vermeidbare Fehler.

Ein gutes Feld nimmt sie Dir ab. Es nennt das erwartete Format direkt am Feld, etwa als ruhigen Hinweis „TT.MM.JJJJ", und es bleibt nachsichtig bei kleinen Abweichungen. Tippt jemand einen einstelligen Tag oder vergisst eine Null, wird die Eingabe korrigiert statt abgelehnt. Diese Toleranz erkennst Du daran, dass das Feld Dich nicht für eine Kleinigkeit zurückweist.

Das gewählte Datum hörbar bestätigen

Mit der Maus sieht man sofort, welcher Tag markiert ist, er färbt sich ein. Eine Vorlese-Software braucht diese Bestätigung als gesprochene Ansage. Sonst tippt jemand einen Tag an und weiß nicht, ob die Auswahl saß.

Ein sauberes Widget sagt das gewählte Datum vollständig an, also „Freitag, 14. März" und nicht nur „14". Wechselt der Monat, hört man auch das. Diese Rückmeldung ist der Unterschied zwischen einem Feld, das man blind bedienen kann, und einem, bei dem man rät. Im Buchungs-Zusammenhang vertieft das der Beitrag zur barrierefreien Terminbuchung.

Zeitauswahl ohne Maus

Für die Uhrzeit gilt dasselbe Prinzip wie fürs Datum. Ein eigenes Rad oder eine schicke Analoguhr zum Klicken sieht modern aus, sperrt aber oft die Tastatur aus. Ein schlichtes Zeitfeld mit getrennten Stunden und Minuten ist meist die zugänglichere Wahl.

Achte auf zwei Punkte. Lässt sich die Uhrzeit auch tippen, etwa „09:30", statt nur über kleine Pfeile zu scrollen? Und ist klar, ob das Feld 24 Stunden erwartet oder zwischen vormittags und nachmittags unterscheidet? Wer beides sauber anbietet, macht aus der Terminwahl eine Sache von Sekunden statt von Geduld.

Dein Schnelltest in einer Minute

Du musst kein Werkzeug installieren, um die größten Schwächen zu finden. Öffne das Datumsfeld auf Deiner Seite und leg die Maus beiseite.

  • Erreichbar: Springt der Tabulator überhaupt in das Feld hinein?
  • Steuerbar: Bewegen die Pfeiltasten den Fokus durch die Tage, und bleibt dieser sichtbar?
  • Tippbar: Kannst Du das Datum auch eintippen, statt nur zu klicken?
  • Verständlich: Steht das erwartete Format irgendwo am Feld?

Bleibt einer dieser vier Punkte hängen, hast Du eine konkrete Anforderung für Deine Agentur in der Hand. Mehr Werkzeuge für solche Prüfungen sammelt der Hub zu den WCAG-Grundlagen.

Fazit

Die Datumsauswahl ist eine kleine Komponente mit großer Stolpergefahr. Wer hier nur an die Maus denkt, schließt Tastatur- und Screenreader-Nutzer von einem entscheidenden Schritt aus, oft ausgerechnet im Buchungs- oder Kontaktformular.

In den meisten Fällen löst Du das Problem, indem Du dem nativen Datumsfeld vertraust und nur dann etwas Eigenes baust, wenn die Buchungslogik es wirklich verlangt. Wird es ein eigener Kalender, hältst Du Deine Agentur an den vier Punkten aus dem Schnelltest fest. Dann lässt Du Dir aus einer schicken Idee keine Barriere bauen.