Checkliste für barrierefreie UI-Komponenten-Bibliotheken
Barrierefreiheit ist eine Entscheidung. Designer:innen können Farben mit ausreichendem Kontrast verwenden oder Farben aus rein ästhetischen Gründen wählen. Web-Entwickler:innen können eine Schaltfläche mit dem nativen button-Tag implementieren oder stattdessen das generische div-Tag verwenden.
Idealerweise wird Barrierefreiheit von Anfang an berücksichtigt. In den Anforderungen sind die Bedürfnisse von Menschen mit Behinderungen klar formuliert. Designer:innen erstellen Mockups, die diese Anforderungen erfüllen. Die Entwickler:innen implementieren die Funktionen mit semantischem Markup. Tester:innen überprüfen, ob die Webinhalte die Anforderungen erfüllen.
In der Realität wird Barrierefreiheit oft zu spät berücksichtigt. Dies kann besonders problematisch sein, wenn es um UI-Komponenten-Bibliotheken geht. Ich zeige euch, wie ihr die Barrierefreiheit der Bibliothek prüft, bevor ihr die erste Codezeile schreibt. Und was ihr bei der Arbeit mit UI-Komponenten beachten solltet.
Foto: © Alena Darmel / pexels.com
Die Vorteile von UI-Bibliotheken
HTML-Elemente sind die Grundbausteine einer jeden Website. Sie decken aber nicht alle Arten von Inhalten und möglichen Anwendungsfällen ab. Komplexe UI-Muster wie Akkordeons, Karussells oder Tabs erfordern ohnehin individuelle Implementierungen.
Um die Entwicklung zu beschleunigen und ein einheitliches Erscheinungsbild zu gewährleisten, verwendet eine moderne Webanwendung meist eine UI-Komponenten-Bibliothek. Diese besteht aus einer Reihe von Design-Elementen, die ihr in eurer Anwendung verwenden könnt. Meistens könnt ihr auch ein Farbthema anwenden und die Funktionalität der Komponenten anpassen.
Es gibt hunderte verschiedene Bibliotheken für die großen Web-Frameworks wie Angular, React oder Vue.js. Zum Beispiel, wenn euch das Material-Designsystem gefällt, könnt ihr Angular Material, Material UI oder Material Components Vue verwenden.
Die Barrierefreiheit der Bibliothek prüfen
Hier ist eine Checkliste für die Auswahl einer barrierefreien UI-Komponenten-Bibliothek:
- Wird Barrierefreiheit auf der Website oder in der Dokumentation der Bibliothek erwähnt? Auf der Homepage von Angular Material heißt es zum Beispiel: „Internationalisierte und barrierefreie Komponenten für alle.“
- Wird in der Dokumentation erklärt, ob und wie die Komponenten barrierefrei implementiert wurden? Die Dokumentation von Angular Material enthält eigene Abschnitte zur Barrierefreiheit für jede Komponente.
- Die Dokumentation enthält in der Regel Demoseiten und Beispiele für die verschiedenen Komponenten. Überprüft das Markup und die Barrierefreiheits-Eigenschaften mithilfe der Entwicklertools des Browsers. Testet mit assistiven Technologien wie der Tastatur und verschiedenen Desktop- und mobilen Screenreadern.
Keine Garantie für komplette Barrierefreiheit!
Die Auswahl einer barrierefreien UI-Komponenten-Bibliothek ist ein wichtiger erster Schritt, um eure Web-Applikation barrierefrei zu gestalten. Aber sie ist keine Garantie dafür. Jedes Mal, wenn ihr eine Komponente auf einer Seite verwendet, solltet ihr die folgenden Fragen beantworten:
- Wo und wie wird die Komponente verwendet? Denkt über den Kontext und die Reihenfolge der Inhalte nach.
- Steht die Art der Verwendung im Einklang mit dem eigentlichen Zweck der Komponente? Oder wollt ihr nur ein bestimmtes Erscheinungsbild erreichen?
Die visuelle Darstellung des Inhalts sollte nicht bestimmen, welche Komponente ihr verwendet. Es ist einfach, ein bestimmtes Design mit CSS anzuwenden. Aber es ist fast unmöglich oder zumindest sehr mühsam, das semantische Markup einer Komponente und die implementierte Tastaturinteraktion zu überschreiben.
Hier ein Beispiel: Die Komponente <mat-chip-listbox> von Angular Material bietet eine Mehrfach-Auswahlliste, die das Listbox-Pattern anwendet. Das semantische Markup vermittelt den assistiven Technologien, dass das Element mehrere Optionen bietet, von denen eine oder mehrere ausgewählt werden können. Die gesamte Auswahlliste erhält den Tastaturfokus über die TAB-Taste. Mit den Pfeiltasten wird der Fokus auf die nächste oder vorherige Option gesetzt.
Stellt euch nun vor, euer Kunde sagt: „Mir gefällt das Design der Chips-Komponente. Ich möchte, dass diese Auflistung von Links genauso gestaltet wird!“ Glaubst du, dass diese Komponente wirklich für diesen Anwendungsfall geeignet ist?
Es liegt in unserer Verantwortung als Web-Entwickler:innen, die jeweils passende Komponente auszuwählen. Und dem vermeintlich einfachen Weg zu widerstehen, der zum Desaster werden würde! 😉
Erstellt am