Skip to main content

Form Barrierefreiheit

Implementierte Verbesserungen​

Die Form-Komponente wurde mit folgenden Barrierefreiheitsverbesserungen aktualisiert:

ARIA-Attribute​

  • aria-labelledby - Verknüpft die Legende mit dem Formular
  • aria-describedby - Verknüpft die Beschreibung mit dem Formular
  • aria-disabled - Zeigt an, ob das Formular deaktiviert ist
  • aria-busy - Zeigt an, ob das Formular im Ladezustand ist
  • role="group" - Definiert die Formularelemente als zusammengehörige Gruppe
  • role="progressbar" - Definiert den Fortschrittsbalken mit entsprechenden Attributen
  • aria-valuenow, aria-valuemin, aria-valuemax - Definiert die Werte des Fortschrittsbalkens

Tastaturunterstützung​

  • Vollständige Tastaturnavigation für alle interaktiven Elemente
  • Fokus-Management für alle Formularelemente
  • Korrekte Tab-Reihenfolge für Formularelemente und Buttons

Screenreader-Unterstützung​

  • Versteckte Beschreibungen für zusätzliche Informationen
  • Ankündigungen für Statusänderungen
  • Beschreibende Texte für Buttons und Aktionen
  • Fortschrittsbalken mit zusätzlichen Informationen für Screenreader

Formular-Validierung​

  • noValidate-Attribut, um die native Browser-Validierung zu deaktivieren und eigene barrierefreie Validierung zu implementieren
  • Barrierefreie Fehlermeldungen mit korrekten ARIA-Attributen
  • Visuelle und textuelle Darstellung von Validierungszuständen

Zusätzliche Funktionen​

  • Barrierefreier Fortschrittsbalken mit korrekten ARIA-Attributen
  • Barrierefreie Buttons mit korrekten ARIA-Attributen
  • Barrierefreier Ladezustand mit korrekten ARIA-Attributen

Beispiel-Implementierung​

<FormA11y
  legend="Kontaktformular"
  description="Bitte füllen Sie alle Felder aus"
  showProgressBar
  progress={50}
  progressMax={100}
>
  {/* Formularelemente */}
</FormA11y>

<FormA11y
  legend="Registrierung"
  showSubmitButton
  showResetButton
  submitButtonText="Registrieren"
  resetButtonText="Zurücksetzen"
>
  {/* Formularelemente */}
</FormA11y>

<FormA11y
  legend="Zahlungsinformationen"
  loading
  showLoadingIndicator
  ariaLabel="Zahlungsformular"
>
  {/* Formularelemente */}
</FormA11y>

Barrierefreiheitstests​

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