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 Formularfeldrole="alert"
- Markiert Fehlermeldungen für Screenreaderrole="status"
- Markiert Statusmeldungen für Screenreaderrole="progressbar"
- Definiert den Fortschrittsbalken mit entsprechenden Attributenaria-valuenow
,aria-valuemin
,aria-valuemax
- Definiert die Werte des Fortschrittsbalkensaria-labelledby
- Verknüpft das Label mit dem Formularfeldaria-live="polite"
- Sorgt dafür, dass Änderungen am Zähler angekündigt werdenaria-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:
- Automatisierte Tests mit jest-axe zur Überprüfung der ARIA-Attribute
- Tastaturnavigation zur Sicherstellung der vollständigen Bedienbarkeit ohne Maus
- Screenreader-Tests zur Überprüfung der korrekten Ankündigungen
- 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