Skip to main content

FormField Barrierefreiheit

Implementierte Verbesserungen​

Die FormField-Komponente wurde mit folgenden Barrierefreiheitsverbesserungen aktualisiert:

ARIA-Attribute​

  • aria-labelledby - Verknüpft das Label mit dem Formularfeld
  • aria-describedby - Verknüpft Hilfetexte, Fehlermeldungen und andere Beschreibungen mit dem Formularfeld
  • aria-invalid - Zeigt an, ob das Formularfeld ungültig ist
  • aria-required - Zeigt an, ob das Formularfeld erforderlich ist
  • aria-disabled - Zeigt an, ob das Formularfeld deaktiviert ist
  • aria-readonly - Zeigt an, ob das Formularfeld schreibgeschützt ist
  • role="alert" - Markiert Fehlermeldungen für Screenreader
  • role="progressbar" - Definiert den Fortschrittsbalken mit entsprechenden Attributen
  • aria-valuenow, aria-valuemin, aria-valuemax - Definiert die Werte des Fortschrittsbalkens
  • aria-live="polite" - Sorgt dafür, dass Änderungen am Zähler angekündigt werden
  • aria-atomic="true" - Sorgt dafür, dass der gesamte Inhalt des Elements angekündigt wird

Tastaturunterstützung​

  • Korrekte Fokus-Reihenfolge für alle interaktiven Elemente
  • Verbesserte Tastaturnavigation für alle Formularelemente
  • Korrekte Verknüpfung von Labels und Formularfeldern

Screenreader-Unterstützung​

  • Versteckte Labels mit sr-only-Klassen für visuelle Layouts ohne sichtbare Labels
  • Versteckte Hilfetexte für zusätzliche Informationen
  • Ankündigungen für Statusänderungen
  • Beschreibende Texte für Icons und Aktionen
  • Zähler mit zusätzlichen Informationen für Screenreader
  • Fortschrittsbalken mit zusätzlichen Informationen für Screenreader

Formular-Validierung​

  • Barrierefreie Fehlermeldungen mit korrekten ARIA-Attributen
  • Visuelle und textuelle Darstellung von Validierungszuständen
  • Sofortige Rückmeldung bei Validierungsfehlern

Zusätzliche Funktionen​

  • Barrierefreier Zähler mit zusätzlichen Informationen für Screenreader
  • Barrierefreier Fortschrittsbalken mit korrekten ARIA-Attributen
  • Barrierefreie Tooltips mit korrekten ARIA-Attributen
  • Barrierefreie Indikatoren für Erfolg, Fehler und Ladezustand
  • Verschiedene Label-Positionen mit korrekter semantischer Struktur

Beispiel-Implementierung​

<FormFieldA11y 
  label="Email" 
  helperText="Ihre geschäftliche Email-Adresse" 
  component={Input}
  type="email"
  required
/>

<FormFieldA11y 
  label="Beschreibung"
  component={TextArea}
  showCounter
  maxLength={200}
  description="Beschreiben Sie Ihr Anliegen"
/>

<FormFieldA11y 
  label="Profilbild"
  component={FileUpload}
  loading={uploading}
  showProgressBar
  progress={uploadProgress}
  progressMax={100}
/>

Barrierefreiheitstests​

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

  1. Automatisierte Tests mit jest-axe zur Überprüfung der ARIA-Attribute
  2. Tastaturnavigation zur Sicherstellung der vollständigen Bedienbarkeit ohne Maus
  3. Screenreader-Tests zur Überprüfung der korrekten Ankündigungen
  4. Fokus-Management-Tests zur Sicherstellung der korrekten Fokusreihenfolge

Bekannte Einschränkungen​

  • Bei komplexen Formularen mit vielen Elementen kann die Tastaturnavigation umständlich werden
  • Die Fortschrittsanzeige ist rein visuell und muss manuell aktualisiert werden
  • Die Validierungslogik muss vom Entwickler implementiert werden
  • Bei Verwendung von benutzerdefinierten Formularfeldern müssen diese selbst barrierefrei sein
  • Die Komponente ist stark abhängig von der ValidationFormField-Komponente