Zum Hauptinhalt springen

Jahresauswahl

Jahresauswahl in Storybook

Verwendung​

Überblick​

Die Jahresauswahl ist ein Steuerelement, mit dem der Benutzer ein bestimmtes Jahr in einem Kalender auswählt oder manuell eingibt. Diese Komponente wird häufig in Versicherungsanwendungen verwendet, bei denen Benutzer ein Jahr angeben müssen, z. B. das Jahr, in dem sie einen Schaden erlitten haben, der durch ihre Gebäudeversicherung abgedeckt ist.

Zu verwenden​

Wenn der Benutzer ein Jahr auswählen muss.

Nicht zu verwenden​

  • Wenn der Benutzer ein Jahr eingeben muss, das in der fernen Vergangenheit oder Zukunft liegt. Verwenden Sie in diesem Fall die ](./simple-date-field.mdx)Datumseingabe[.
  • Wenn der Benutzer den Tag, den Monat und das Jahr auswählen muss. Verwenden Sie in diesem Fall die Datumsauswahl.
  • Wenn der Benutzer sowohl einen Monat als auch ein Jahr auswählen muss. Verwenden Sie in diesem Fall die Monatsauswahl.
Siehe auch​

Formatierung​

Aufbau​

Abbildung des Aufbaus der Jahresauswahl-Komponente

Die Jahresauswahl-Komponente besteht aus den folgenden Elementen:

  1. Datumsauswahlfeld: Ein Eingabefeld, in das der Benutzer das Jahr manuell eingeben kann.
  2. Kalendersymbol: Eine Symbolschaltfläche, die den Dropdown-Kalender auslöst, wenn darauf geklickt wird.
  3. Schaltfläche „Vorheriges Jahr“: Ein Steuerelement zum Anzeigen und Auswählen aus einem früheren Satz von Jahren innerhalb des Auswahlbereichs.
  4. Schaltfläche „Nächstes Jahr“: Ein Steuerelement zum Anzeigen und Auswählen aus einem späteren Satz von Jahren innerhalb des Auswahlbereichs.
  5. Ausgewähltes Jahr: Das vom Benutzer ausgewählte und in der Jahresauswahl hervorgehobene Jahr.
  6. Schaltfläche „Aktuelles Jahr“: Eine Schaltfläche, über die das Jahresauswahlfeld automatisch mit dem aktuellen Jahr ausgefüllt wird, wenn darauf geklickt wird.

Datumsformat​

Ein YYYY-Platzhalter im Eingabefeld führt den Benutzer während der Eingabe zum erwarteten Jahresformat.

Abbildung eines Benutzers bei der Eingabe in das Datumsauswahlfeld

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 Jahresauswahl mit einem aussagekräftigen, beschreibenden Text. In dieser Beschriftung müssen der Zweck und das spezifische ausgewählte Jahr angegeben sein.

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

Hilfetext hinzufügen, wenn es sinnvoll ist​

Verwenden Sie Hilfetext, um Kontext bereitzustellen und zu vermitteln, welches Jahr ausgewählt werden soll. Hier einige Beispiele dafür, welche Informationen Sie angeben können:

  • Hinweise, die den Benutzer bei der Auswahl des entsprechenden Jahrs unterstützen
  • Mehr Kontext, warum der Benutzer ein bestimmtes Jahr auswählen muss

Verwenden Sie Hilfetext nur für relevante Informationen. Vermeiden Sie es, die gleichen Angaben wie in der Beschriftung zu wiederholen. Schreiben Sie den Hilfetext in 1 bis 2 kurzen, vollständigen Sätzen, die mit einem Punkt enden. Verwenden Sie die übliche Groß- und Kleinschreibung.

Verwenden Sie Hilfetext, um Informationen zum Kontext zu geben.
Wiederholen Sie im Hilfetext nicht einfach die Informationen, die bereits in der Beschriftung stehen.

Verhalten​

Zustände​

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

Interaktionen​

Maus​

Die Benutzer können das Jahr manuell im Jahresauswahlfeld eingeben oder auf das Kalendersymbol klicken, um das Jahr in einer Dropdown-Liste auszuwählen.

Abbildung eines Benutzers, der mithilfe einer Maus mit der Jahresauswahl interagiert

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 Jahresauswahl 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“.

Handhabung von Eingaben​

In der Jahresauswahl-Komponente können Benutzer die Einfügemarke (den blinkenden Textcursor) nicht so steuern, dass der Wert teilweise gelöscht werden kann. Benutzer können in das Feld klicken, um den Cursor zu bewegen. Durch Löschen einer Ziffer wird jedoch der gesamte Wert gelöscht, sodass Benutzer das Jahr neu eingeben müssen. Dieses Verhalten ist bei allen Datumskomponenten einheitlich, bei denen die Eingabe in der Eingabemaske formatiert wird, während ein Benutzer die Eingabe vornimmt.

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 Beschriftung eindeutig angibt, welches Jahr der Benutzer eingeben oder auswählen muss.