Die Zukunft der Designsysteme ist barrierefrei
Im dritten Teil unserer Serie sprechen wir mit Fachleuten für Designsysteme und Barrierefreiheit darüber, wie integrative Systeme zur Top-Priorität werden. In den bisherigen Folgen haben wir bereits die Bereiche Komplexität und Automatisierung behandelt.
Die Zukunft der Designsysteme ist barrierefrei teilen
Hero-Bild: Andreas Samuelsson.
2022 waren laut einer Studie nur 3 % des Internets für Menschen mit Behinderungen zugänglich. Designsysteme können helfen, die Situation zu verbessern. Schließlich sollte die Verwendung eines einheitlichen Sets von Elementen und die Einhaltung derselben Richtlinien doch endlich für barrierefreie Websites sorgen können, oder?
1. Warum ein internes Designsystem?
Prozentsatz der Antworten, die Gründe für die Erstellung eines internen Designsystems angeben, aus der Umfrage Material Design’s State of Design (2020).
Es scheint, als rücke die lang ersehnte Zukunft barrierefreier Designs endlich in greifbare Nähe. Immer mehr Unternehmen investieren in interne Designsysteme: 2020 war ein Anstieg von 22 % zu verzeichnen1 (Quelle: Umfrage von Material Design’s State of Design). Mittlerweile dürften es noch mehr sein. Ein Hauptgrund für diese Entwicklung ist die Effektivität von Designsystemen bei der Verbesserung der Barrierefreiheit. In der gleichen Umfrage gaben 47 % der Befragten2 an, dass ihr Designsystem Richtlinien für die Barrierefreiheit enthält – auch das ist ein erheblicher Anstieg gegenüber dem Vorjahr, als Barrierefreiheit noch unter Sonstiges rangierte (8,4 %). Nun, da es mehr Tools gibt, etablierte Standards wie die Web Content Accessibility Guidelines (WCAG) sowie zunehmend verbindliche rechtliche Aspekte, rückt eine umfassende Umsetzung in greifbare Nähe.
2. Was beinhaltet ein Designsystem?
Prozentsatz der Antworten für einen bestimmten Bestandteil, der in das Designsystem ihrer Organisation aufgenommen wurde, ebenfalls laut der Umfrage Material Design’s State of Design (2020).
Designsysteme und Barrierefreiheit: eine perfekte Kombination
Weltweit leben eine Milliarde Menschen mit Behinderungen und verfügen über ein gemeinsames jährliches Einkommen von 1,2 Billionen Dollar. Angesichts dessen können es sich Unternehmen nicht mehr leisten, das Thema Barrierefreiheit zu ignorieren. Viele Unternehmen beginnen zu verstehen, wie wichtig es ist, ihre Produkte für alle zugänglich zu machen, was Forrester als die „Digital Accessibility Opportunity“ bezeichnet – die Chance der digitalen Barrierefreiheit. Die Entwicklung zugänglicher Produkte ist nicht nur eine Geste der Inklusion, sondern auch ein Wegbereiter für Wachstum, Vertrauensbildung und Glaubwürdigkeit bei den Verbraucher*innen.
„Designsysteme und Barrierefreiheit ergänzen sich ideal“, erklärt Anna Zaremba, Senior Design Lead bei eBay. „Barrierefreiheit lässt sich in jeden Aspekt eines Designsystems integrieren, von sorgfältig getesteten Farbkombinationen für Vorder- und Hintergrund bis hin zu den einzelnen Komponenten.“ Designsysteme schaffen durch ihre Konsistenz, umfassende Dokumentation und das Einholen kontinuierlichen Feedbacks das ideale Gerüst, um Best Practices für Barrierefreiheit im gesamten Produktökosystem umzusetzen. Zudem vereinfachen sie die Implementierung umfangreicher Änderungen, da Anpassungen auf Systemebene automatisch auf alle Instanzen übertragen werden.
Verantwortungsvolle KI und Barrierefreiheit
Mit der zunehmenden Verbreitung künstlicher Intelligenz (KI) nutzen immer mehr Designteams diese Technologie, um die Zuganglichkeit für Nutzer*innen zu verbessern. Dies führt zur Entwicklung einer neuen Generation von KI-gesteuerten Tools, die versprechen, Mängel in der Web-Barrierefreiheit mit nur einer Codezeile zu identifizieren und zu beheben. Diese Tools sollen automatisch Bildbeschreibungen hinzufügen, unbeschriftete Schaltflächen kennzeichnen und semantische Strukturen, wie Überschriften, implementieren.
Overlay für Barrierefreiheit
Ein Overlay für Barrierefreiheit besteht aus JavaScript, das entwickelt wurde, um Barrierefreiheitsprobleme auf Websites oder in Webanwendungen zu beheben. Nachdem die Seite oder Anwendung im Browser geladen wurde, wird dieser Overlay-Code darauf angewendet, um die notwendigen Anpassungen zur Verbesserung der Barrierefreiheit vorzunehmen.
KI kann zwar bei der Automatisierung bestimmter Aspekte hilfreich sein, jedoch zeigen sich ihre Defizite in Anwendungsfällen, die menschliches Verständnis und Urteilsvermögen erfordern. Viele der angeblich sofort einsatzbereiten Widgets und Overlays für bessere Zugänglichkeit haben vielmehr negative Auswirkungen auf die Barrierefreiheit und führten zu Klagen gegen mehr als 400 Unternehmen, die sie verwendet haben. In vielen dieser Fälle hätte die einfache Implementierung einer klaren Navigationsstruktur und eines semantischen Codes zu einem inklusiveren Produkt geführt als die Fehler, den diese Lösungen verursacht haben.
VoiceOver
VoiceOver ist eine in die Apple-Betriebssysteme macOS, iOS, tvOS, watchOS sowie das OS von iPod integrierte Bildschirmleseanwendung. Mit VoiceOver können Benutzer*innen einfach per Sprachausgabe auf ihrem Mac oder einem iOS-Gerät navigieren. Beim Mac kommt außerdem die Steuerung über die Tastatur hinzu.
Chancey Fleet, die als technische Ausbilderin in einer New Yorker Bibliothek tätig ist und selbst blind ist, erkennt einige verantwortungsvolle Implementierungen der Technologie an. Sie hebt insbesondere die Bildschirmerkennung von Apple hervor, die in Kombination mit VoiceOver das Layout von Elementen in Benutzeroberflächen erfasst – auch in Anwendungen, die nicht speziell für dieses Tool optimiert wurden. „Apple setzt sich sehr dafür ein, dass Entwicklungsteams zugängliche Design- und Entwicklungspraktiken nutzen. Die Bildschirmerkennung ist während der Nutzung leicht aktivierbar, sodass man direkt überprüfen kann, ob sie bei spezifischen Problemen hilft“, erklärt Chancey. „Es geht nicht darum, Gelder von echten Bemühungen abzuzwacken. Stattdessen bekommen Nutzer*innen ein zusätzliches, wertvolles Tool an die Hand.“
Barrierefreiheitstools können das Leben zwar erleichtern und Hindernisse abbauen, bringen jedoch gleichzeitig neue Abhängigkeiten und Einschränkungen mit sich.
Die Bilderkennung verbessert sich immer weiter. Deshalb ist Chancey optimistisch, was das Potenzial der KI für den Umgang mit unbeschrifteten Bildern und die Erstellung von Beschreibungen für blinde oder sehbehinderte Menschen angeht. „Ich bezweifle, dass KI bald mit Subjektivität oder emotionaler Wertigkeit umgehen kann, aber ich sehe ihre Fähigkeit, Elemente mit einem kontrollierten visuellen Vokabular wie Infografiken und Balkendiagramme zu interpretieren“, bemerkt Chancey. „Tools für die Barrierefreiheit können das Leben vereinfachen und Reibungsverluste minimieren, bringen jedoch auch neue Abhängigkeiten und Einschränkungen mit sich. Ich bin zuversichtlich, dass KI und maschinelles Lernen bald mehr Prozesse übernehmen, die heute menschliches Eingreifen benötigen, und dadurch die Zugänglichkeit von Produkten für alle verbessern.“
Die besten Produkte sind von Anfang an barrierefrei
Barrierefreiheit von Beginn an zu berücksichtigen bedeutet, ein Designsystem zu entwickeln, das standardmäßig barrierefrei ist. Unternehmen können spätere Barrierefreiheitsprobleme vermeiden, indem sie sicherstellen, dass jede Designkomponente und jedes Codeelement von vornherein den Standards für Barrierefreiheit entspricht. Lucy Greco, Evangelistin für barrierefreie Technologie an der UC Berkeley und Leiterin der Initiative für Barrierefreiheit an der University of California, betont, dass zur Schaffung eines inklusiven Designsystems alle Aspekte der Barrierefreiheit berücksichtigt werden müssen. Sie stellt wichtige Fragen wie: „Kann eine Person mit Behinderung das Designsystem ohne Maus verwenden?“, „Sind die Komponenten per Drag-and-Drop verschiebbar?“ und falls ja, „Ist eine Bedienung durch Mausemulation möglich?“
Angeregt durch dieses Konzept entwickelten Anna Zaremba von eBay und ihr Team das Include-Plugin, das die Integration von Barrierefreiheit von Anfang an erleichtert. Das Tool hilft Designer*innen und Entwickler*innen, Barrierefreiheitsanforderungen besser zu verstehen und umzusetzen, indem es Anmerkungen zur Barrierefreiheit bietet. „Unser Ziel war es, inklusives Design fest in unseren Designprozess zu integrieren“, sagt Anna. „Wir haben erkannt, dass die Entwicklung barrierefreier Projekte besonders für neue Designer*innen unübersichtlich ist. Vor allem, wenn sie gerade erst bei eBay angefangen haben und vielleicht noch nicht mit den branchenüblichen Best Practices vertraut sind.“
Include ist ein Tool, das die Arbeit mit Anmerkungen für Barrierefreiheit (a11y) vereinfacht, was die Erstellung der Spezifikationen für Designer*innen leichter und die Entwicklungsaufgaben klarer macht. Ziel ist es, die Barrierefreiheit bereits in der Designphase eines Projekts zu berücksichtigen und die Zusammenarbeit zwischen Designer*innen und Entwickler*innen zu erleichtern, um in der Konsequenz digitale Erlebnisse zu schaffen, die wirklich jeder Mensch nutzen kann.
Das Team legte den Schwerpunkt auf Effizienz und entschied sich für die Entwicklung eines Plugins, das in bestehende Design- und Entwicklungs-Workflows integriert werden kann. Mit dem Tool können Benutzer*innen einen Frame auf oberster Ebene in Figma auswählen und prüfen lassen. Das Tool gibt daraufhin eine Liste von Maßnahmen aus, die jeweils begründet werden, wie beispielsweise die Empfehlung, einem als informativ markierten Bild einen Alt-Text hinzuzufügen. Diese Vorschläge basieren auf häufigen Problemen und Fehlern sowie den Prioritäten der verschiedenen Abteilungen bei eBay in Bezug auf Barrierefreiheit. „Jeder muss irgendwo anfangen, und ich hoffe, dass das Plugin das vereinfacht“, so Anna.
Anna und ihr Team beschlossen, das Plugin als Open-Source zu veröffentlichen und es über die Figma Community für alle kostenlos zugänglich zu machen sowie den Code auf GitHub freizugeben. „eBay hat eine starke Kultur des Teilens, um der Community etwas zurückzugeben“, sagt Anna. „Wir waren uns bewusst, dass die Open-Source-Veröffentlichung dieses Tools anderen dabei helfen kann, ihre Produkte zu verbessern und bessere digitale Erlebnisse zu schaffen.“ „Wir wussten, dass die Veröffentlichung dieses Tools als Open Source eine größere Wirkung haben könnte, indem es anderen hilft, ihre Produkte zu verbessern und bessere digitale Erlebnisse zu schaffen.“ Die Open-Source-Strategie hat weitere VorteileOpen Sourcing hat auch noch andere Vorteile: Das Team bekommterhält gutes Feedback und die Software dient als Türöffner für zukünftige Weiterentwicklungen. Jeder kann Teile des Codes nutzen, darauf aufbauen und ihn wieder für die Allgemeinheit freigeben. „Ich bin wirklich dankbar für jeden, der sich die Zeit nimmt, unser Tool auszuprobieren und uns bereits geschrieben hat“, sagt Anna. „Je mehr Leute mitmachen, desto besser wird es.“
Barrierefreiheit ist eine Top-Priorität
Wie können Unternehmen Barrierefreiheit also priorisieren? Neben der Schulung von Angestellten, wie sie das eBay-Plugin übernimmt, ist es wichtig, eine Kultur zu schaffen, in der alle ein grundlegendes Verständnis für Barrierefreiheit haben. Dazu gehört die Einbindung von Menschen mit Behinderungen in die Entwicklungs- und Designprozesse, sowohl als Mitarbeitende als auch als Tester*innen. „Die Anwesenheit einer Person mit Behinderung im Team verringert die Wahrscheinlichkeit, ein unzugängliches Produkt zu entwickeln“, erklärt Lucy Greco. Sie betont, dass Teammitglieder mit Behinderung in alle Entwicklungsaspekte einbezogen werden sollten – über das bloße Testen hinaus – und verweist auf das Motto: „Nichts für uns ohne uns“. Chancey Fleet empfiehlt, zusätzlich zu robusten bezahlten Nutzertests, interne Teams zu befähigen, Barrierefreiheitsstandards umzusetzen und die Freigabe von Produkten zu blockieren, die die Barrierefreiheit beeinträchtigen.
Zwar gehen diese Schritte in die richtige Richtung, aber der Weg zu vollständig inklusiver Technologie ist noch weit. Lucy Greco hofft, dass in Zukunft bei der Entwicklung neuer Designsysteme vermehrt auf von Anfang an barrierefreie Komponentenbibliotheken geachtet wird. Und dass durch Menschen, nicht nur Maschinen, getestet wird.
