Accessibility
Accessibility bedeutet, digitale Produkte so zu gestalten, dass möglichst viele Menschen sie nutzen können. Dazu gehören Menschen mit dauerhaften Einschränkungen ebenso wie Personen mit temporären oder situativen Herausforderungen, etwa bei schlechter Beleuchtung oder mit nur einer freien Hand. Gute Accessibility verbessert die Nutzung für alle.
Unser DesignSystem Flow bildet dafür eine wichtige Grundlage. Unsere Komponenten bringen bereits zugängliche Interaktionen, eine sinnvolle Struktur und unterstützende Attribute mit. Echte Accessibility entsteht jedoch erst im Zusammenspiel mit der Umsetzung im Produkt. Flow unterstützt dich dabei, ersetzt aber keine bewussten Entscheidungen in deinem Projekt.
Die Anforderungen von Web Content Accessibility Guidelines (WCAG) 2.2 dienen Flow als Referenz für eine zugängliche Gestaltung. Sie fließen in Komponenten, Patterns und Grundlagen wie Kontraste ein und werden kontinuierlich berücksichtigt und weiterentwickelt.
Was Flow für dich übernimmt
Unsere Komponenten sind so gestaltet, dass sie automatisch viele typische Anforderungen an Accessibility erfüllen.
Dazu gehören zum Beispiel:
- ausreichende Kontraste
- Tastaturbedienbarkeit
- unterstützende ARIA-Attribute an geeigneten Stellen
- einheitliche Interaktionsmuster und Patterns
Wenn du die Komponenten wie vorgesehen verwendest, hast du bereits eine solide Grundlage für Accessibility.
Was du selbst beachten solltest
Accessibility entsteht erst durch die richtige Verwendung der Komponenten im Produkt.
Beachte dabei einige Grundlagen:
- Nutze semantisches HTML: Verwende strukturelle Elemente wie
header,mainoderfooter, um Bereiche einer Seite eindeutig zu kennzeichnen, statt generischer Container ohne Bedeutung - Achte auf eine sinnvolle Struktur der Seite: Überschriften sollten logisch aufgebaut sein und Inhalte klar gliedern
- Setze ARIA-Attribute bewusst ein: ARIA ergänzt Semantik, ersetzt sie aber nicht
- Formuliere hilfreiche Alternativtexte für Bilder: Alt-Texte sollten immer den Zweck eines Bildes beschreiben. Dekorative Bilder benötigen keinen Alternativtext
- Beschrifte interaktive Elemente verständlich: Links und Buttons sollten klar sagen, was passiert
- Prüfe Farbkontraste bei individuellen Anpassungen
Mehr erfahren
Accessibility ist kein Zustand, den man einmal erreicht und dann abhaken kann. Sie sollte während der Entwicklung regelmäßig geprüft und Schritt für Schritt verbessert werden.
Flow und die zugehörige Dokumentation bieten dafür eine solide Grundlage und helfen dir, viele Anforderungen frühzeitig zu berücksichtigen. Es lohnt sich dennoch, sich zusätzlich mit den offiziellen Richtlinien vertraut zu machen. Besonders hilfreich sind die WCAG 2.2 Guidelines sowie die ARIA Authoring Practices Guide (APG). Dort findest du konkrete Best Practices, Beispiele für typische Interaktionsmuster und weiterführende Empfehlungen für barrierearme Interfaces.