Skip to main content

TimePicker Barrierefreiheit

Implementierte Verbesserungen​

Die TimePicker-Komponente wurde mit folgenden Barrierefreiheitsverbesserungen aktualisiert:

ARIA-Attribute​

  • aria-label - Bietet eine Beschreibung des TimePickers
  • aria-labelledby - Verknüpft ein Label mit dem TimePicker
  • aria-describedby - Verknüpft eine ausführliche Beschreibung mit dem TimePicker
  • aria-expanded - Zeigt an, ob das Popup geöffnet ist
  • aria-haspopup - Zeigt an, dass der TimePicker ein Popup hat
  • aria-controls - Verknüpft den TimePicker mit dem Popup
  • aria-invalid - Zeigt an, ob der TimePicker ungültig ist
  • aria-required - Zeigt an, ob der TimePicker erforderlich ist
  • aria-readonly - Zeigt an, ob der TimePicker schreibgeschützt ist
  • aria-busy - Zeigt an, ob der TimePicker im Ladezustand ist
  • role="dialog" - Definiert das Popup als Dialog
  • role="listbox" - Definiert die Listen im Popup als Listboxen
  • role="option" - Definiert die Elemente in den Listen als Optionen
  • aria-selected - Zeigt an, welche Option ausgewählt ist
  • aria-activedescendant - Verknüpft die Listbox mit der aktuell fokussierten Option

Tastaturunterstützung​

  • Öffnen des Popups mit Enter oder Leertaste
  • Schließen des Popups mit Escape
  • Navigation zwischen den Abschnitten (Stunden, Minuten, Sekunden, Periode) mit Tab
  • Navigation innerhalb der Abschnitte mit Pfeiltasten
  • Sprung zum Anfang/Ende der Liste mit Home/End
  • Auswahl einer Option mit Enter oder Leertaste
  • Visuelle Fokus-Indikatoren für alle interaktiven Elemente

Screenreader-Unterstützung​

  • Versteckte Beschreibungen für zusätzliche Informationen
  • Live-Regionen für Statusänderungen
  • Ankündigung von Zeitänderungen
  • Korrekte Ankündigung von Fehlermeldungen
  • Screenreader-Anweisungen zur Bedienung des TimePickers
  • Korrekte Beschriftung aller Abschnitte und Optionen

Zusätzliche Funktionen​

  • Unterstützung für 12h- und 24h-Format
  • Unterstützung für verschiedene Größen
  • Unterstützung für Fehler-, Erfolgs- und Ladezustände
  • Unterstützung für Hilfetext und Beschreibungen
  • Unterstützung für benutzerdefinierte Icons
  • Unterstützung für Zeitintervalle (minuteStep, secondStep)
  • Unterstützung für Min- und Max-Zeit
  • Unterstützung für optionale Sekunden (hideSeconds)

Beispiel-Implementierung​

// Einfacher TimePicker
<TimePickerA11y
  label="Uhrzeit"
  format="24h"
  onChange={(time) => console.log(time)}
  ariaLabel="Uhrzeit auswählen"
/>

// TimePicker mit 12h-Format
<TimePickerA11y
  label="Uhrzeit"
  format="12h"
  onChange={(time) => console.log(time)}
  ariaLabel="Uhrzeit auswählen"
  helperText="Format: HH:MM AM/PM"
/>

// TimePicker ohne Sekunden
<TimePickerA11y
  label="Uhrzeit"
  hideSeconds
  onChange={(time) => console.log(time)}
  ariaLabel="Uhrzeit auswählen"
  helperText="Format: HH:MM"
/>

// TimePicker mit Zeitintervallen
<TimePickerA11y
  label="Uhrzeit"
  minuteStep={15}
  secondStep={15}
  onChange={(time) => console.log(time)}
  ariaLabel="Uhrzeit auswählen"
  helperText="15-Minuten-Intervalle"
/>

// TimePicker mit Min- und Max-Zeit
<TimePickerA11y
  label="Uhrzeit"
  minTime="09:00"
  maxTime="17:00"
  onChange={(time) => console.log(time)}
  ariaLabel="Uhrzeit auswählen"
  helperText="Geschäftszeiten: 9:00 - 17:00 Uhr"
/>

// TimePicker mit Icon
<TimePickerA11y
  label="Uhrzeit"
  leftIcon={<ClockIcon />}
  onChange={(time) => console.log(time)}
  ariaLabel="Uhrzeit auswählen"
/>

// TimePicker mit Fehlermeldung
<TimePickerA11y
  label="Uhrzeit"
  error="Bitte geben Sie eine gültige Uhrzeit ein"
  onChange={(time) => console.log(time)}
  ariaLabel="Uhrzeit auswählen"
/>

Barrierefreiheitstests​

Die TimePicker-Komponente wurde mit folgenden Tests auf Barrierefreiheit geprüft:

  1. Automatisierte Tests mit jest-axe zur Überprüfung der ARIA-Attribute
  2. Tastatur-Tests zur Überprüfung der Tastaturnavigation und -bedienung
  3. Screenreader-Tests zur Überprüfung der korrekten Ankündigungen
  4. Visuelle Tests zur Überprüfung der Farbkontraste und Fokus-Indikatoren

Bekannte Einschränkungen​

  • Die Komponente unterstützt derzeit keine Eingabe per Tastatur direkt im Input-Feld
  • Die Komponente unterstützt derzeit keine Zeitzonen
  • Die Komponente unterstützt derzeit keine Millisekunden
  • Die Komponente unterstützt derzeit keine Kombination mit DatePicker
  • Die Komponente unterstützt derzeit keine Lokalisierung der Beschriftungen