Skip to main content

FormControl Barrierefreiheit

Implementierte Verbesserungen​

Die FormControl-Komponente wurde mit folgenden Barrierefreiheitsverbesserungen aktualisiert:

ARIA-Attribute​

  • aria-describedby - Verknüpft Hilfetexte, Fehlermeldungen, Erfolgsmeldungen und andere Beschreibungen mit dem Formularfeld
  • role="alert" - Markiert Fehlermeldungen für Screenreader
  • role="status" - Markiert Statusmeldungen für Screenreader
  • role="progressbar" - Definiert den Fortschrittsbalken mit entsprechenden Attributen
  • aria-valuenow, aria-valuemin, aria-valuemax - Definiert die Werte des Fortschrittsbalkens
  • aria-labelledby - Verknüpft das Label mit dem Formularfeld
  • 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

Beispiel-Implementierung​

<FormControlA11y 
  label="Email" 
  helperText="Ihre geschäftliche Email-Adresse" 
  error="Ungültiges Email-Format"
>
  <Input type="email" />
</FormControlA11y>

<FormControlA11y 
  label="Passwort"
  required
  labelPosition="floating"
  showCounter
  counterValue={password.length}
  counterMax={20}
>
  <Input type="password" />
</FormControlA11y>

<FormControlA11y 
  label="Profilbild"
  isLoading={uploading}
  showProgressBar
  progressValue={uploadProgress}
  progressMax={100}
>
  <FileUpload />
</FormControlA11y>

Barrierefreiheitstests​

Die FormControl-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