Was sind Design-Systeme für Barrierefreiheit?

Was ist ein Design-System für Barrierefreiheit?

Ein Design-System ist eine gemeinsame Bibliothek aus Komponenten, Design-Tokens und Nutzungsregeln, die Teams im ganzen Produkt wiederverwenden. Es dient der Barrierefreiheit, wenn jede Komponente einmal so gebaut und getestet wird, dass sie Anforderungen wie Tastaturbedienung, sichtbaren Fokus, ausreichenden Kontrast und korrekte Beschriftungen erfüllt. Jedes Team, das sie nutzt, erbt diese Arbeit.

Was ein barrierefreies Design-System enthält

• Design-Tokens: Farbpaare, die gegen die Kontrastgrenzen der WCAG geprüft sind, siehe barrierefreie Farbpaletten, dazu Fokusstile, Abstände und Mindestgrößen für Klickziele.
• Komponenten mit eingebautem Verhalten: Buttons, Formularfelder, Menüs und Dialoge, die per Tastatur funktionieren, den Fokus verwalten und Rolle, Name und Zustand korrekt an assistive Technologien weitergeben.
• Anleitung: wann welche Komponente passt, wie Beschriftungen und Fehlermeldungen formuliert werden und wann ARIA nötig ist, weil natives HTML nicht ausreicht.
• Ein Testprotokoll: was mit welchen Werkzeugen geprüft wurde und was noch offen ist.

Beispiel

Ein modaler Dialog lässt sich leicht falsch bauen: Der Fokus muss hineinwandern, darin bleiben, beim Schließen zum Auslöser zurückkehren, und Escape muss den Dialog schließen. Baut und testet man das einmal in der Dialog-Komponente des Design-Systems, erhält jeder Bildschirm das Verhalten, auch die Reihenfolge der Tastaturnavigation. Dasselbe gilt für ein Formularfeld, bei dem Label, Hinweis und Fehlermeldung verbunden sind.

Das U.S. Web Design System ist ein öffentliches Beispiel. Es zielt auf WCAG 2.1 AA, testet Komponenten mit Screenreadern, reiner Tastaturbedienung, Zoom und Touch und führt bei jeder Codeänderung automatisierte Scans aus.

Häufige Fehler

• Annehmen, Komponenten machten das Produkt barrierefrei. Das U.S. Web Design System sagt deutlich, dass die Nutzung barrierefreier Komponenten keinen barrierefreien Service garantiert. Layout, Inhalt, Überschriften und Seitenablauf bleiben Ihre Aufgabe.
• Komponenten in einer App statt im System korrigieren. Die Korrektur fehlt dann allen anderen Teams.
• Komponentenstile überschreiben. Eine lokale Farbänderung kann den Kontrast brechen, und ohne Fokusrahmen funktioniert die Tastaturbedienung nicht.
• Keine Dokumentation der barrierefreien Verwendung. Eine gute Komponente, als anderes Element missbraucht, fällt trotzdem durch.
• Nur mit automatischen Werkzeugen testen. Sie finden nur einen Teil der Probleme; siehe automatisierte Barrierefreiheitstests, ergänzt um manuelle Prüfungen und Tests mit assistiven Technologien.

Bezug zu Tests und Monitoring

Testen Sie jede Komponente einzeln und danach echte Seiten aus diesen Komponenten, denn Barrierefreiheit kann erst in der Kombination brechen. Automatische Prüfungen in der CI fangen Rückschritte nach Änderungen ab. Das LoadFocus Page-Speed-Monitoring erfasst den Lighthouse-Accessibility-Wert nach Zeitplan aus 25 Cloud-Regionen, sodass ein Einbruch nach einem Release sichtbar wird. Dieser Wert ist ein automatisches Signal, kein Konformitätsnachweis. Wie Barrierefreiheit und Geschwindigkeit beim Testen zusammenspielen, steht im Beitrag Performance-Tests und Barrierefreiheitsmetriken (auf Englisch).

Häufige Fragen: Design-Systeme für Barrierefreiheit

Macht ein Design-System meine Website barrierefrei?

Nein. Es beseitigt viele wiederkehrende Fehler auf Komponentenebene, aber Seitenstruktur, Inhalte und Abläufe müssen weiterhin geprüft werden.

Welchen Standard sollte ein Design-System anstreben?

Die meisten Teams zielen auf WCAG 2.1 oder 2.2 Stufe AA. Das U.S. Web Design System zielt etwa auf 2.1 AA und arbeitet auf Kriterien aus 2.2 hin.

Wer verantwortet die Barrierefreiheit im Design-System?

Das Systemteam verantwortet Verhalten und Dokumentation der Komponenten. Die Produktteams verantworten, wie Komponenten zu Seiten kombiniert werden, und deren Inhalte.

Wie teste ich eine barrierefreie Komponente?

Kombinieren Sie automatische Scans, reine Tastaturbedienung, einen Durchgang mit Screenreader und Zoom-Prüfungen. Wiederholen Sie das nach jeder Änderung an der Komponente.