Muster, Komponenten und Designsysteme

Viele Nutzer verwenden im Rahmen ihres Entwicklungsworkflows die komponentengesteuerte Entwicklung mit Muster-Styleguides, Komponentenbibliotheken oder vollständigen Designsystemen. Selbst wenn Sie diese Tools nicht formell verwendet haben, ist es wahrscheinlich, dass Sie einen ähnlichen Prozess verwenden, um ein großes Design für eine Website, eine App oder ein anderes digitales Produkt in überschaubare Teile zu zerlegen.

Wie der Bau einer physischen Struktur ist es wichtig, Stück für Stück zu bauen. Das Fundament, das Gebäude, Wände, Fenster, das Dach und alles dazwischen. Mit komponentengesteuerten Entwicklungstools ist dies für Websites, Apps und andere digitale Produkte möglich.

Zu den Vorteilen der komponentengesteuerten Entwicklung gehört die Unterteilung der Dinge in überschaubare Teile, wodurch die Entwicklungszeit mit diesen wiederverwendbaren Komponenten verkürzt wird. Designer, Front-End- und Back-End-Entwickler und QA können gleichzeitig arbeiten. Dies gilt auch für Kunden, Designer, PMs usw., weil sie sich nach dem Start der Website eine Vorschau des Erstellungsprozesses ansehen und einen Living Style Guide als Referenz nutzen können.

Wenn wir jedoch Muster, Komponenten und Designsysteme unter Berücksichtigung der Barrierefreiheit betrachten, tauchen einige Fragen auf. Woher wissen Sie, welche Muster in Bezug auf Barrierefreiheit am besten sind? Sollten Sie ein etabliertes Muster/eine etablierte Bibliothek verwenden oder neue erstellen? Woher wissen Sie, ob diese Muster Ihren Nutzenden tatsächlich helfen werden?

Bei der Vielzahl von Auswahlmöglichkeiten kann es bei diesem Thema schnell zu Verwirrung kommen. In diesem Modul erhalten Sie allgemeine Informationen dazu, wie Sie Muster, Komponenten und Designsysteme im Hinblick auf Barrierefreiheit bewerten. Außerdem erhalten Sie einen Ausgangspunkt, um barrierefreie Entscheidungen zu treffen.

Denken Sie kritisch

Die Auswahl eines barrierefreien Musters, einer Komponente oder eines Designsystems ist keine Raketentechnik. Sie erfordert jedoch Zeit und kritisches Denken. Tatsächlich gibt es nicht ein perfektes Muster, aber möglicherweise viele Optionen, die funktionieren könnten. Es geht darum, die beste Option für Ihre individuelle Situation zu finden.

In den folgenden Testmodulen erfahren Sie mehr über die Techniken und Methoden zur Bewertung von Mustern, Komponenten und Designsystemen im Hinblick auf Barrierefreiheit. Zuvor müssen Sie sich jedoch einige grundlegende Fragen stellen, zum Beispiel:

• Gibt es bereits ein etabliertes Muster, eine Komponente oder ein Designsystem für barrierefreies Design?
• Welche Browser und Hilfstechnologien (AT) werde ich unterstützen?
• Gibt es Einschränkungen durch den Code/das Framework oder andere Integrationen/Faktoren/Nutzeranforderungen, die ich berücksichtigen muss?

Abhängig von Ihrer Entwicklungsumgebung und den Anforderungen Ihrer Nutzer können sich weitere oder andere Fragen stellen. Betrachten Sie diese Fragen als Ausgangspunkt für die Bewertung der Barrierefreiheit.

Etablierte Ressourcen

Bevor Sie etwas ganz Neues erstellen, sollten Sie sorgfältig prüfen, was in Bezug auf barrierefreie Muster, Komponenten und Designsysteme bereits existiert. Schon mit ein wenig Recherche werden Sie vielleicht überrascht sein, eine oder mehrere Lösungen zu finden, die Ihren Anforderungen entsprechen.

Einige großartige Ressourcen für barrierefreie Muster, Komponenten und Designsysteme sind:

• Barrierefreie Komponenten
• ARIA-Bibliothek der Deque University
• Designsystem der staatlichen Behörden
• Inklusive Komponenten
• MagentaA11y
• U.S. Web Design System (USWDS), das für die US-Regierung entwickelt wurde
• Liste zugänglicher Muster aus dem Smashing Magazine

Für JavaScript-Frameworks sind die folgenden Ressourcen standardmäßig verfügbar oder lassen sich für Barrierefreiheit leicht anpassen:

• Wenn das CSS nicht ausreicht: JavaScript-Anforderungen für barrierefreie Komponenten
• Reagieren
  • ReachUI
  • ReaKit
  • Chakra
• Angular: Material Library
• Vue: Vuetensils

Sie sollten jedoch niemals einfach Code kopieren und einfügen und davon ausgehen, dass er in Ihre Umgebung passt und automatisch die Anforderungen Ihrer Nutzer erfüllt. Dies gilt für alle Muster, Komponenten und Designsysteme, auch wenn sie als vollständig zugänglich gekennzeichnet sind.

Alle Ressourcen sollten als Ausgangspunkt betrachtet werden. Testen Sie unbedingt alles!

Unterstützung von Browsern und Hilfstechnologien

Nachdem Sie einige Basismuster, Komponenten oder ein vollständiges Designsystem erforscht haben, das für Ihre Entwicklungsumgebung geeignet sein könnte, können Sie mit dem Support assistiver Technologien fortfahren. Ein Haupttyp von AT, auf den Sie sich bei der Bewertung von Mustern, Komponenten und Designsystemen konzentrieren sollten, sind Screenreader.

Screenreader wurden für bestimmte Browser entwickelt und funktionieren am besten in Kombination mit diesen Browsern. Wir gehen im Modul zu AT-Tests noch ausführlicher auf dieses Thema ein, aber für die Musterbewertung ist es hilfreich, diese Kombinationen zu verstehen, damit Sie wissen, was Sie bezüglich des Supports benötigen.

Die Browserunterstützung ist in der Regel kompliziert und die Sache wird noch komplizierter, wenn Sie AT-Geräte und ARIA-Spezifikationen hinzufügen.

Aber das ist nicht alles eine schlechte Nachricht. Zum Glück helfen uns nützliche Ressourcen wie HTML5 Accessibility, Accessibility Support und die Custom Control Accessible Development Checklist der WCAG, die uns ein besseres Verständnis der aktuellen Browser- und AT-Geräteunterstützung und darüber hinaus hilft, wann ARIA überhaupt verwendet werden sollte.

In diesen Ressourcen werden die verschiedenen verfügbaren HTML- und ARIA-Musterunterelemente beschrieben, einschließlich Open-Source-Community-Tests. Sie können sich auch einige Musterbeispiele ansehen, sowohl für Desktop-Browser als auch für mobile Browser bzw. AT-Geräte. Diese Ressourcen können Ihnen dabei helfen, eine leichter zugängliche Entscheidung in Bezug auf Muster, Komponenten und Designsysteme zu treffen, die Sie verwenden möchten.

Weitere Aspekte

Nachdem Sie einige zugängliche Basismuster oder -komponenten ausgewählt und die Browser- und AT-Geräteunterstützung berücksichtigt haben, können Sie zu konkreteren kontextabhängigen Fragen zum Muster, zur Komponente, zum Designsystem und zur Entwicklungsumgebung übergehen.

Wenn Sie beispielsweise in einem Verwaltungssystem (CMS) arbeiten oder Legacy-Code verwenden, bestehen möglicherweise einige Einschränkungen bei den Mustern, die Sie verwenden können. Nach der Überprüfung können sich verschiedene Muster schnell auf eine oder zwei Optionen beschränken.

In vielen JavaScript-Frameworks können Entwickler fast jedes Muster verwenden, das sie wählen. In solchen Fällen gelten weniger Einschränkungen und Sie können die am besten zugängliche Musteroption auswählen.

Bei der Auswahl eines Musters, einer Komponente oder eines Designsystems sind weitere Aspekte zu berücksichtigen, z. B.:

• Leistung
• Sicherheit
• Suchmaschinenoptimierung
• Unterstützung von Übersetzungen
• Integrationen externer Anbieter

Diese Faktoren werden zweifellos bei Ihrer Musterentscheidung eine Rolle spielen, Sie sollten jedoch auch die Personen berücksichtigen, die den Inhalt und den Code selbst erstellen. Das Muster, das Sie auswählen, muss stabil genug sein, um potenzielle Einschränkungen bei von Redakteuren oder Nutzern erstellten Inhalten zu bewältigen, und muss so aufgebaut sein, dass Entwickler aller Kenntnisse zur Barrierefreiheit es verwenden können.

Überprüfen Sie Ihr Wissen

Ihr Wissen über Muster testen