Muster, Komponenten und Designsysteme

Viele Menschen nutzen die komponentengetriebene Entwicklung mit Musterstilhandbüchern, Komponentenbibliotheken oder vollständigen Designsystemen in ihrem Entwicklungsablauf. Auch wenn Sie diese Tools nicht formal verwendet haben, verwenden Sie wahrscheinlich einen ähnlichen Prozess, um ein großes Design für eine Website, App oder ein anderes digitales Produkt in überschaubare Teile zu unterteilen.

Ähnlich wie beim Bau eines Gebäudes ist es wichtig, immer nur ein Teil nach dem anderen zu erstellen. Zuerst das Fundament, dann das Gebäude, die Wände, Fenster, das Dach und alles dazwischen. Mit komponentenbasierten Entwicklungstools können wir dies für Websites, Apps und andere digitale Produkte tun.

Zu den Vorteilen der komponentenbasierten Entwicklung gehört die Aufteilung in überschaubare Teile, sodass mit diesen wiederverwendbaren Komponenten weniger Entwicklungszeit erforderlich ist. So können Designer, Frontend- und Backend-Entwickler sowie QA-Mitarbeiter gleichzeitig arbeiten. Auch Kunden, Designer, Projektmanager und andere Nutzer mögen ihn, da sie sich eine Vorschau des Build-Prozesses ansehen und nach der Veröffentlichung der Website einen lebendigen Styleguide als Referenz verwenden können.

Wenn wir uns jedoch Muster, Komponenten und Designsysteme mit Blick auf die Barrierefreiheit ansehen, stellen sich einige Fragen. Woher wissen Sie, welche Muster am besten für die Barrierefreiheit geeignet sind? Sollten Sie ein etabliertes Muster oder eine Bibliothek verwenden oder neue erstellen? Woher wissen Sie, ob diese Muster Ihren Nutzern tatsächlich helfen werden?

Bei der Vielzahl der verfügbaren Optionen kann es leicht zu Verwirrung bei Mustern, Komponenten und Designsystemen kommen. In diesem Modul erhalten Sie allgemeine Informationen dazu, wie Sie Muster, Komponenten und Designsysteme auf Barrierefreiheit prüfen. Außerdem erhalten Sie einen Ausgangspunkt, der Ihnen dabei hilft, barrierefreiere Entscheidungen zu treffen.

Kritisch denken

Die Auswahl eines barrierefreien Musters, einer barrierefreien Komponente oder eines barrierefreien Designsystems ist keine Raketenwissenschaft, erfordert aber Zeit und kritisches Denken. Es gibt in der Tat kein „perfektes Muster“, aber es gibt möglicherweise viele Optionen, die funktionieren könnten. Es geht darum, die beste Option für Ihre individuelle Situation zu wählen.

In den folgenden Testmodulen erfahren Sie mehr über die Techniken und Methoden zur Bewertung von Mustern, Komponenten und Designsystemen in Bezug auf Barrierefreiheit. Bevor Sie dorthin gelangen, müssen Sie sich einige grundlegende Fragen stellen, z. B.:

• Gibt es bereits ein etabliertes barrierefreies Muster, eine barrierefreie Komponente oder ein barrierefreies Designsystem?
• Welche Browser und Hilfstechnologien werden unterstützt?
• Gibt es Einschränkungen für Code oder Framework? Gibt es weitere Integrationen, Faktoren oder Anforderungen der Nutzer, die ich berücksichtigen sollte?

Je nach Entwicklungsumgebung und Nutzeranforderungen haben Sie möglicherweise zusätzliche oder andere Fragen als diese. Diese Fragen können Sie als Ausgangspunkt für Ihre Bewertung der Barrierefreiheit nutzen.

Bestehende Ressourcen

Bevor Sie etwas Neues entwickeln, sollten Sie sich mit den bereits vorhandenen barrierefreien Mustern, Komponenten und Designsystemen vertraut machen. Mit ein wenig Recherche werden Sie vielleicht überrascht sein, wie viele Lösungen es gibt, die Ihren Anforderungen entsprechen.

Hier sind einige gute Ressourcen für barrierefreie Muster, Komponenten und Designsysteme:

• Barrierefreie Komponenten
• ARIA-Bibliothek der Deque University
• Gov.UK Design System
• Inklusive Komponenten
• MagentaA11y
• U.S. Web Design System (USWDS), das für die US-Bundesregierung entwickelt wurde
• Liste barrierefreier Muster von Smashing Magazine

Bei JavaScript-Frameworks sind die folgenden Ressourcen standardmäßig barrierefrei oder können für Barrierefreiheit angepasst werden:

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

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

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

Unterstützung von Browsern und Hilfstechnologien

Nachdem Sie einige grundlegende Muster, Komponenten oder ein vollständiges Designsystem recherchiert haben, das für Ihre Entwicklungsumgebung geeignet sein könnte, können Sie mit der Unterstützung von Hilfstechnologien fortfahren. Eine wichtige Art von Hilfstechnologie, auf die 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. Im Modul zu AT-Tests gehen wir noch viel ausführlicher auf dieses Thema ein. Für die Musterbewertung ist es jedoch hilfreich zu wissen, dass diese Kombinationen existieren, damit Sie wissen, welche Unterstützung Sie benötigen.

Der Browsersupport ist im Allgemeinen kompliziert und wird noch schwieriger, wenn Sie AT-Geräte und ARIA-Spezifikationen hinzufügen.

Aber es gibt auch gute Neuigkeiten. Glücklicherweise gibt es großartige Ressourcen wie HTML5-Barrierefreiheit, Barrierefreiheitssupport und die Checkliste für die barrierefreie Entwicklung benutzerdefinierter Steuerelemente der WCAG, die uns dabei helfen, die aktuelle Unterstützung von Browsern und Hilfstechnologien besser zu verstehen und sogar zu wissen, wann ARIA verwendet werden sollte.

In diesen Ressourcen werden die verschiedenen verfügbaren HTML- und ARIA-Muster-Unterelemente beschrieben, einschließlich Open-Source-Community-Tests. Außerdem finden Sie einige Musterbeispiele für Desktop-Computer, mobile Browser und AT-Geräte. Diese Ressourcen können Ihnen daher dabei helfen, fundiertere Entscheidungen in Bezug auf Muster, Komponenten und Designsysteme zu treffen, die Sie verwenden möchten.

Weitere Hinweise

Nachdem Sie einige barrierefreie Basismuster oder ‑komponenten ausgewählt und die Unterstützung von Browsern und Hilfstechnologien berücksichtigt haben, können Sie zu spezifischeren kontextbezogenen Fragen zum Muster, zur Komponente, zum Designsystem und zur Entwicklungsumgebung übergehen.

Wenn Sie beispielsweise in einem Verwaltungssystem (CMS) arbeiten oder Altcode haben, sind die verfügbaren Muster möglicherweise eingeschränkt. Bei der Überprüfung können mehrere Musteroptionen schnell auf eine oder zwei Optionen reduziert werden.

Viele JavaScript-Frameworks ermöglichen es Entwicklern, fast jedes gewünschte Muster zu verwenden. In solchen Fällen sind möglicherweise weniger Einschränkungen zu beachten und Sie können die barrierefreieste 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 für Sprachübersetzungen
• Integrationen externer Anbieter

Diese Faktoren spielen zweifellos bei der Auswahl des Musters eine Rolle, aber Sie sollten auch die Personen berücksichtigen, die die Inhalte und den Code erstellen. Das von Ihnen ausgewählte Muster muss robust genug sein, um mit potenziellen Einschränkungen bei editorgenerierten oder von Nutzern erstellten Inhalten umzugehen. Außerdem muss es so aufgebaut sein, dass es von Entwicklern mit unterschiedlichen Kenntnissen in puncto Barrierefreiheit verwendet werden kann.

Wissen testen

Ihr Wissen zu Mustern testen