Zum Hauptinhalt springen

Datumsbereich

Datumsbereich in Storybook

Verwendung​

Überblick​

Mit der Datumsbereichsauswahl können Benutzer ein Start- und ein Enddatum angeben. Benutzer können diese Daten in einem Kalender auswählen oder manuell eingeben. Diese Komponente wird in Versicherungsanwendungen verwendet, um einen Datumsbereich für folgende Aufgaben anzugeben:

  • Auswählen der Deckungsperiode einer Versicherungspolice
  • Filtern von Schadenfalldaten

Zu verwenden​

Zum Auswählen einer Periode mit einem eindeutigen Start- und Enddatum.

Nicht zu verwenden​

Zum Auswählen eines einzelnen Datums. Verwenden Sie in diesem Fall die Datumsauswahl-Komponente.

Siehe auch​

Formatierung​

Aufbau​

DateRange-Komponente

Die DateRange-Komponente besteht aus den folgenden Elementen:

  1. Startdatum
  2. Alle dazwischenliegenden Daten
  3. Enddatum

Das Startdatum und das Enddatum beinhalten beide ein Feld, in dem Benutzer manuell ein Datum eingeben können. Auch ein Kalendersymbol ist enthalten, bei dem durch Klicken ein Dropdown-Menü zur Datumsauswahl geöffnet wird.

Datumsformat​

Das Format des Datums, das in der Datumsauswahl angezeigt wird, hängt vom Gebietsschema des Benutzers ab. Das bedeutet, dass das Datumsformat je nach Standort und Spracheinstellungen des Benutzers variiert.

In den USA wird beispielsweise in der Regel das Datumsformat MM/DD/YYYY verwendet, in vielen europäischen Ländern hingegen das Format DD/MM/YYYY.

Das Datumsformat wird als Platzhalter in der Datumsauswahl angezeigt, um dem Benutzer die Datumseingabe zu erleichtern. Dadurch wird gewährleistet, dass das Format während des gesamten Eingabevorgangs sichtbar bleibt.

Inhalt​

Allgemeine Richtlinien fürs Schreiben​

  • Verwenden Sie die Großschreibung des ersten Worts und von Substantiven für alle Aspekte der Gestaltung von Guidewire-Produktschnittstellen. Schreiben Sie nicht alles groß.
  • Verwenden Sie in den meisten Situationen Verben im Präsens und im Aktiv.
  • Verwenden Sie gebräuchliche Abkürzungen, um Ihrem Text einen natürlichen und informellen Ton zu verleihen.
  • Verwenden Sie eine einfache Sprache. Vermeiden Sie unnötigen Jargon und komplexe Sprache.
  • Halten Sie Wörter und Sätze kurz.

Eine Beschriftung einfügen​

Beschriften Sie die Datumsbereichsauswahl mit einem aussagekräftigen, beschreibenden Text. In dieser Beschriftung müssen der Zweck und das spezifische ausgewählte Jahr angegeben sein.

Beschriftungen werden über dem Datumseingabefeld angezeigt und sind linksbündig ausgerichtet. Es wird die übliche Groß- und Kleinschreibung verwendet.

Positionieren Sie eine dauerhafte Beschriftung außerhalb des Felds.
Verwenden Sie keinen Platzhaltertext als Ersatz für die Beschriftung.

Verhalten​

Zustände​

Die Datumsbereichsauswahl-Komponente verhält sich wie ein Eingabefeld, mit den gleichen interaktiven Zuständen.

Interaktionen​

Maus​

Benutzer können mit diesem Element interagieren, indem sie auf den Bereich innerhalb des Rahmens klicken.

Abbildung eines Benutzers, der in das Feld der Datumsbereichsauswahl klickt

Tastatur​

Die Datumsauswahl wird mit Spacebar erweitert und reduziert. Benutzer navigieren mit den Pfeiltasten durch die Optionen und wählen mit der Spacebar- oder Enter-Taste eine Option aus.

Wenn der Benutzer mit der Tabulatortaste in das Eingabefeld für die Monatsauswahl wechselt, wird ein Kalender-Widget angezeigt. Das aktuelle Datum wird hervorgehoben und Nur-Tastatur-Benutzer können das Datum hier manuell eingeben. Durch Drücken der Nach-Unten-Taste können Benutzer den Tastaturfokus auch auf das Widget legen, wenn es erweitert ist. Navigieren Sie mit den Pfeiltasten durch den Kalender. Die Schaltflächen „Zurück“, „Monat“, „Jahr“ und „Weiter“ können mit der Tab-Taste den Fokus erhalten, wenn das Widget geöffnet ist.

Screenreader​

Wenn Benutzer mit der Tabulatortaste in das Eingabefeld für die Datumsauswahl wechseln, werden sie über den vorausgefüllten Datumswert informiert und darüber, dass dieser Wert aktuell aktiviert ist. In diesem Eingabefeld kann das Datum manuell eingegeben werden. Solange der Fokus auf dem vorausgefüllten Datum liegt, ist auch ein Kalender-Widget verfügbar. Benutzer können durch Drücken der Nach-Unten-Taste den Fokus auch auf das Widget verschieben. Die Navigation durch den Kalenderbereich des Widgets erfolgt über die Pfeiltasten. Der Wert, der aktuell den Fokus hat, wird von Screenreadern über das WAI-ARIA-Attribut aria-label ausgegeben. Die Schaltflächen „Zurück“, „Monat“, „Jahr“ und „Weiter“ können mit der Tab-Taste den Fokus erhalten, wenn das Widget geöffnet ist. Die React-Datumsauswahl aktiviert derzeit nicht die Tastaturnavigation zum Link „Heute“.

Barrierefreiheit​

Diese Komponente wurde validiert, um die Richtlinien für Barrierefreiheit WCAG 2.2 AA in der Standardbasiskonfiguration zu erfüllen. Dazu wird u. a. Folgendes sichergestellt:

  • Das Kontrastverhältnis von Textelementen zu ihrem Hintergrund liegt über 4,5:1.
  • Nicht-textuelle Inhalte, die eine Bedeutung vermitteln sollen (z. B. Symbole und Fokusanzeigen), weisen ein Kontrastverhältnis von mindestens 3:1 zu den angrenzenden Farben auf.
  • Das jeweilige Element kann sowohl über eine Tastatur als auch über eine Maus bedient werden.
  • Der Zugriff auf die Inhalte erfolgt über Screenreader wie JAWS oder VoiceOver.

Die Konformität mit den Richtlinien für Barrierefreiheit hängt letztendlich davon ab, wie diese Komponente implementiert und angepasst wird. Vom Autor des Inhalts vorgenommene Änderungen können sich auf die Barrierefreiheit auswirken. Details zu unserem Modell der geteilten Verantwortung finden Sie in unserer Erklärung zur Barrierefreiheit von Jutro.

Achten Sie bei der Verwendung dieser Komponente darauf, dass die Beschriftungen eindeutig angeben, welche Daten ein Benutzer eingeben oder auswählen muss.