August 2025
Warum sich Designsysteme und Barrierefreiheit perfekt ergänzen
Viele große und kleine Unternehmen stehen heute vor der Herausforderung, ihre digitalen Produkte barrierefrei zu gestalten. Warum Designsysteme dabei eine große Stütze sind – und für wen es sich gerade jetzt noch lohnen könnte, auf ein Designsystem umzustellen.
Von Markus Remscheid
Digitale Barrierefreiheit ist längst kein Nice-to-have mehr – sondern eine gesetzliche und gesellschaftliche Notwendigkeit. Doch mit der praktischen Umsetzung steigen die Herausforderungen für die Design- und Frontendteams. Insbesondere Produktverantwortliche stehen damit vor der Frage, wie sich die erforderlichen Maßnahmen ressourcenschonend umsetzen lassen, ohne die bestehende Roadmap zu beeinträchtigen. Um diese Frage zu beantworten, lohnt ein Blick in die Vergangenheit.
Eine kurze Geschichte der Designsysteme
Als die ersten Touchgeräte auf den Markt kamen, stiegen die Anforderungen in der Webgestaltung zum ersten Mal sprunghaft an. Plötzlich reichte es nicht mehr, starre Seiten zu gestalten, die nur für eine Fenstergröße optimiert waren.
In dieser Umbruchphase begann die Zeit des Responsive Designs, das bis heute State of the Art ist: Alle Einzelseiten werden so gestaltet, dass sich das Layout automatisch an die jeweilige Bildschirmgröße anpasst und sowohl die Maus- als auch Touchbedienung unterstützt. Dazu muß im Prinzip bis heute jede einzelne Seite für vier bis fünf Bildschirmbreiten gelayoutet werden. Zwischen den unterschiedlichen Layouts wird dann bei Erreichen eines bestimmten Schwellenwertes (Breakpoint) umgeschaltet.
Responsive Design für 5 unterschiedliche Screengrößen. Das Layout passt sich flexibel an die jeweilige Screengröße an.
Zum Responsive Design kommen oftmals noch eigenständige Android- und iOS-Apps hinzu, nicht selten noch in Light- und Darkmode-Versionen. Die Designaufwände potenzieren sich. Eine Systematisierung des Designs war dringend notwendig, um Gestaltungskonzepte skalieren und warten zu können. Als Brad Frost 2013 das Konzept des „Atomic Designs“ vorstellte, traf er einen Nerv. Diese neue Herangehensweise revolutionierte den Designprozess für digitale Produkte und sorgte dafür, dass sich dieser vom klassischen Printdesignprozess emanzipierte.
Die Idee des „Atomic Designs“ markierte den Beginn der Designsysteme, wie wir sie heute kennen. Das Konzept basiert auf der Idee, komplexe Benutzeroberflächen aus kleinen, wiederverwendbaren Bausteinen zusammenzusetzen – ähnlich wie in der Chemie Atome zu Molekülen und Organismen kombiniert werden. Der Vorteil: Webseiten werden plötzlich skalierbar, konsistent und effizient wartbar. Ändert sich z. B. die Farbe eines Buttons, muss die Änderung nur einmal an der Grundkomponente vorgenommen werden. Das neue Buttondesign wird dann automatisch an alle Instanzen ausgespielt.
Zur besseren Übersicht werden diese wiederverwendbaren UI-Komponenten in einer Bibliothek gesammelt und sind so immer zur Hand, um neue Seiten oder Features zu bauen.
Das klassische Atomic Design besteht aus Atomen, Molekülen, Organismen und Templates, die sich gemeinsam zu vollständigen Seiten zusammensetzen (Abbildung in Anlehnung an Brad Frost: atomicdesign.bradfrost.com).
Designsysteme bilden das unsichtbare Fundament, auf dem intuitive und konsistente Produkte aufgesetzt sind.
Die Gestaltung der Grundbausteine ist von Farbe, Form, Größe und Symbolik logisch durchdacht und genau aufeinander abgestimmt. So lassen die Basiskomponenten wie Buttons, Inputs oder Toasts im modularen Zusammenspiel eine einheitliche und nutzerfreundliche Nutzererfahrung entsteht.
Hinter jeder Farbe und Komponente steckt eine Logik, die den Einsatzzweck im gesamten Designsystem definiert. So auch hier, beim Designsystem für die digitalen Produkte von 116117 (Mehr zum Projekt):
Designsysteme und Barrierefreiheit gehen Hand in Hand
Designsysteme entfalten ihre Stärken insbesondere dann, wenn es um die Weiterentwicklung und Optimierung digitaler Produkte geht. Aufgrund ihrer modularen Beschaffenheit und ihrer gut dokumentierten Strukturierung in Bibliotheken sind sie prädestiniert, um Barrierefreiheit konsistent in allen Aspekten eines Produktes zu implementieren.
Die einzelnen Basiskomponenten lassen sich nach und nach auf Barrierefreiheit überprüfen. Eventuell notwendige Verbesserungen lassen sich dann in einzelnen Iterationsschritten auf das gesamte Produkt übertragen. So können z. B. auf einen Schlag Hunderte Instanzen einer Buttonkomponente barrierefrei gemacht werden.
Ändert sich z. B. die Farbe eines Buttons, kann die Änderung auf alle Instanzen mit einem Knopfdruck übertragen werden.
Ist jetzt der richtige Zeitpunkt, die nächste Stufe Richtung modularem Designsystem zu erklimmen?
Längst nicht alle aktuellen Apps und Webseiten, sind so modular und effizient aufgebaut. Viele digitale Produkte sind über die Jahre gewachsen, was schnell zu einem Labyrinth von Inkonsistenzen führen kann. Daraus können ungewollte Barrieren in der Nutzerführung entstehen. Aber nicht nur Nutzende können frustriert sein, sondern auch die Produktteams selbst.
Aufgrund der gewachsenen Code- und Designbasis sind Designänderungen deutlich aufwendiger zu implementieren. Wildwuchs führt zu Redundanzen und Inkonsistenzen. Und diese Kombination führt oftmals dazu, dass Änderungen unvorhergesehene Auswirkungen haben.
Eine weitere Schwierigkeit, die viele Produktteams kennen: Designvorlagen und die tatsächlichen Frontend-Umsetzungen driften mit der Zeit immer weiter auseinander. Das führt zu Rückfragen, Schleifen und manuellem Angleichen, wodurch die gesamte Produktentwicklung ausgebremst wird. Das Ergebnis: Entwickler ignorieren Designvorlagen („Das passt eh nicht.“). Und Designer zweifeln an der Umsetzung („Das sieht ganz anders aus.“). Auf dieser Basis wird es dann nahezu unmöglich, Barrierefreiheit nach Best-Practise-Kriterien in die Produktlandschaft zu integrieren.
Ein konsequenter und mutiger Schritt hin zu einem Designsystem wird dann oftmals unumgänglich. Neben einer mutigen Entscheidung ist aber auch eine gewisse Ausdauer gefragt. Denn bevor Designsysteme ihre volle Wirkung entfalten, ist ihre Einführung mit Zeit, Budget und personelle Kapazitäten verbunden.
Checkliste, um zu erkennen, ob die Zeit für ein Designsystem gekommen ist:
Beantwortest du folgende Fragen mit Ja, kann das ein Hinweis darauf sein, dass die Einführung eines Designsystems notwendig ist:
- Konsistenz: Sind viele unterschiedliche Varianten von grundlegenden Komponenten wie Buttons, Menüelemente und Inputs auf deiner Webseite im Einsatz?
- Barrierefreiheit: Die Implementierung der Richtlinien wird zum Kraftakt? Statt Barrierefreiheit im Design zu verankern, kommt ein Overlay zur Barrierefreiheit zum Einsatz?
- Kommunikation/Effizienz im Produktteam: Dauert die Entwicklung neuer Features lange und trotz ausreichender Teamgröße, klagen die Entwickler und Designer über eine zu hohe Arbeitsbelastung?
- Onboarding: Neue Mitarbeiter im Design- oder Frontendteam brauchen eine lange Einarbeitungszeit?
- Agile Produktzyklen: Die aktuelle Produktentwicklung fühlt sich behäbig und kompliziert an und die Umsetzung neuer Anforderungen ist mit großen Mühen verbunden?
Fazit:
Die bisherige Erfahrung mit Designsystemen zeigt: modulare Designsysteme sind nach wie vor die modernste und effizienteste Methode, um Nutzerfreundlichkeit und Barrierefreiheit in der gesamten Produktlandschaft zu verankern.
Und aufgrund ihrer modularen Beschaffenheit und ihrer gut dokumentierten Strukturierung in Bibliotheken ist davon auszugehen, dass man auch für kommende Anforderungen, die jetzt noch gar nicht absehbar sind, bestens aufgestellt sein wird.
Dabei sind es längst nicht nur große Unternehmen, die von Designsystemen profitieren. Denn ein Designsystem muss nicht immer gleich der ganz große Wurf sein. Es kann mit einem kleinen System, das aus nur wenigen Komponenten besteht, begonnen werden. Sind die ersten Bausteine verbaut und die ersten positiven Auswirkungen werden sichtbar, kann das System sukzessive ausgebaut werden. So lange, bis schließlich die gesamte Webseite oder App auf den neuen Bausteinen basiert.
Haben Sie eine konkrete Frage zum Thema oder haben Sie das Gefühl, ein neues Designsystem könnte etwas für Ihr Vorhaben sein?
Wir beraten Sie sehr gerne – kostenlos und unverbindlich.
