Skip to main content

Barrierefreiheit in der Smolitux UI Bibliothek

Übersicht​

Die Smolitux UI Bibliothek wurde mit einem starken Fokus auf Barrierefreiheit entwickelt, um sicherzustellen, dass alle Benutzer, unabhängig von ihren Fähigkeiten oder Einschränkungen, die Komponenten effektiv nutzen können. Diese Dokumentation bietet einen Überblick über die implementierten Barrierefreiheitsverbesserungen und bewährte Praktiken.

Implementierte Komponenten​

Die folgenden Komponenten wurden mit Barrierefreiheitsverbesserungen implementiert:

  1. Carousel - ARIA-Attribute, Tastaturnavigation, Pause-Funktion
  2. ColorPicker - ARIA-Attribute, Tastaturnavigation, Screenreader-Unterstützung
  3. Drawer - ARIA-Attribute, Fokus-Management
  4. Dropdown - ARIA-Attribute, Tastaturnavigation
  5. Fade - ARIA-Attribute für Animation
  6. FileUpload - ARIA-Attribute, Tastaturunterstützung
  7. Flex - Semantische Struktur und ARIA-Attribute
  8. Form - ARIA-Attribute, Fehlerbehandlung
  9. FormControl - ARIA-Attribute, Fehlerbehandlung
  10. FormField - ARIA-Attribute, Fehlerbehandlung
  11. Input - Verbesserte ARIA-Attribute, Fehlerbehandlung
  12. LanguageSwitcher - Tastaturnavigation und Screenreader-Unterstützung
  13. List - ARIA-Attribute, Tastaturnavigation
  14. MediaPlayer - Untertitel, Tastatursteuerung und ARIA-Attribute
  15. Menu - ARIA-Attribute, Tastaturnavigation
  16. Pagination - ARIA-Attribute, Tastaturnavigation
  17. Popover - Fokus-Management und ARIA-Attribute
  18. ProgressBar - ARIA-Attribute, Screenreader-Unterstützung
  19. Radio - Verbesserte ARIA-Attribute, Tastaturunterstützung
  20. Select - ARIA-Attribute, Tastaturnavigation
  21. Skeleton - ARIA-Attribute, Screenreader-Unterstützung
  22. Slide - ARIA-Attribute für Animation
  23. Slider - ARIA-Attribute, Tastatursteuerung
  24. Spinner - ARIA-Attribute, Screenreader-Unterstützung
  25. Stepper - ARIA-Attribute, Tastaturnavigation
  26. Switch - Verbesserte ARIA-Attribute, Tastaturunterstützung
  27. TabView - ARIA-Attribute, Tastaturnavigation
  28. TextArea - Verbesserte ARIA-Attribute, Fehlerbehandlung
  29. TimePicker - ARIA-Attribute, Tastaturnavigation, Screenreader-Unterstützung
  30. Zoom - ARIA-Attribute für Animation

Allgemeine Barrierefreiheitsverbesserungen​

ARIA-Attribute​

Alle barrierefreien Komponenten unterstützen die folgenden ARIA-Attribute:

  • aria-label - Bietet eine Beschreibung des Elements
  • aria-labelledby - Verknüpft ein Label mit dem Element
  • aria-describedby - Verknüpft eine ausführliche Beschreibung mit dem Element
  • aria-live - Definiert eine Live-Region für Ankündigungen
  • aria-atomic - Definiert, ob eine Live-Region als Ganzes aktualisiert wird
  • aria-relevant - Definiert, welche Änderungen in einer Live-Region relevant sind
  • aria-busy - Zeigt an, ob ein Element im Ladezustand ist
  • aria-hidden - Versteckt ein Element vor Screenreadern
  • aria-expanded - Zeigt an, ob ein Element erweitert ist
  • aria-haspopup - Zeigt an, ob ein Element ein Popup hat
  • aria-controls - Verknüpft ein Element mit einem anderen Element, das es steuert
  • aria-owns - Definiert Elemente, die zu einem Element gehören
  • aria-current - Zeigt an, ob ein Element der aktuelle Kontext ist
  • aria-roledescription - Bietet eine benutzerdefinierte Rollenbeschreibung

Tastaturunterstützung​

Alle interaktiven Komponenten unterstützen die folgenden Tastaturinteraktionen:

  • Fokussierbarkeit mit der Tab-Taste
  • Aktivierung mit der Enter- oder Leertaste
  • Schließen von Popups mit der Escape-Taste
  • Navigation in Listen mit den Pfeiltasten
  • Sprung zum Anfang/Ende mit Home/End-Tasten
  • Benutzerdefinierte Tastaturkürzel für komplexe Komponenten

Screenreader-Unterstützung​

Alle Komponenten bieten Unterstützung für Screenreader durch:

  • Semantisch korrekte HTML-Elemente
  • Aussagekräftige ARIA-Attribute
  • Ankündigungen für Statusänderungen
  • Versteckte Beschreibungen für zusätzliche Informationen
  • Korrekte Fokusreihenfolge

Reduzierte Bewegung​

Animationskomponenten respektieren die Einstellung prefers-reduced-motion des Benutzers und bieten:

  • Deaktivierung von Animationen für Benutzer mit Bewegungsempfindlichkeit
  • Sofortige Darstellung ohne Übergangseffekte
  • Alternative statische Darstellungen

Testen auf Barrierefreiheit​

Wir verwenden verschiedene Methoden, um die Barrierefreiheit unserer Komponenten zu testen:

Automatisierte Tests​

# Führe alle Barrierefreiheitstests aus
npm run test:a11y

# Generiere einen Barrierefreiheitsbericht
npm run test:a11y:report

Manuelle Tests​

Für manuelle Tests empfehlen wir:

  1. Tastaturnavigation - Testen Sie die Komponenten ohne Maus
  2. Screenreader - Testen Sie mit NVDA, JAWS oder VoiceOver
  3. Zoom - Testen Sie mit verschiedenen Zoomstufen (bis zu 200%)
  4. Kontrast - Überprüfen Sie den Farbkontrast mit Tools wie dem WAVE Browser-Plugin

Ressourcen​