Muster, Komponenten und Designsysteme

Viele Entwickler nutzen die komponentenorientierte Entwicklung mit Pattern-Styleguides, Komponentenbibliotheken oder vollständigen Designsystemen in ihrem Entwicklungsprozess. Auch wenn Sie diese Tools nicht formell verwendet haben, nutzen Sie wahrscheinlich einen ähnlichen Prozess, um ein großes Design für eine Website, App oder ein anderes digitales Produkt in überschaubare Teile zu zerlegen.

Wie beim Bau eines physischen Gebäudes ist es wichtig, ein Teil nach dem anderen zu bauen. Zuerst das Fundament, dann die Struktur, Wände, Fenster, das Dach und alles dazwischen. Mit Tools für die komponentenorientierte Entwicklung können wir dies für Websites, Apps und andere digitale Produkte tun.

Zu den Vorteilen der komponentenorientierten Entwicklung gehört, dass die Dinge in überschaubare Teile zerlegt werden, 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 und Projektmanager schätzen diese Methode, da sie sich den Entwicklungsprozess ansehen und nach dem Start der Website einen lebendigen Styleguide als Referenz verwenden können.

Wenn wir uns jedoch Muster, Komponenten und Designsysteme unter dem Gesichtspunkt der Barrierefreiheit ansehen, stellen sich einige Fragen. Wie wissen Sie, welche Muster in Bezug auf die Barrierefreiheit am besten geeignet sind? Sollten Sie ein etabliertes Muster oder eine etablierte Bibliothek verwenden oder neue erstellen? Wie wissen Sie, ob diese Muster Ihren Nutzern tatsächlich helfen?

Angesichts der Vielzahl der verfügbaren Optionen sind Sie möglicherweise verwirrt, was Muster, Komponenten und Designsysteme angeht. In diesem Modul erhalten Sie allgemeine Informationen dazu, wie Sie Muster, Komponenten und Designsysteme auf Barrierefreiheit prüfen können. Außerdem erhalten Sie einen Ausgangspunkt, der Ihnen 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 kein „perfektes Muster“, aber möglicherweise viele Optionen, die funktionieren könnten. Es geht darum, die beste Option für Ihre individuelle Situation auszuwählen.

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

• Gibt es bereits ein etabliertes barrierefreies Muster, eine etablierte barrierefreie Komponente oder ein etabliertes barrierefreies Designsystem?
• Welche Browser und welche Hilfstechnologien unterstütze ich?
• Gibt es Einschränkungen in Bezug auf Code oder Framework? Gibt es andere Integrationen, Faktoren oder Nutzerbedürfnisse, die ich berücksichtigen sollte?

Je nach Entwicklungsumgebung und Nutzerbedürfnissen haben Sie möglicherweise zusätzliche oder andere Fragen. Betrachten Sie diese Fragen als Ausgangspunkt für Ihre Bewertung der Barrierefreiheit.

Etablierte Ressourcen

Bevor Sie etwas völlig Neues erstellen, sollten Sie eine Due-Diligence-Prüfung durchführen und sich ansehen, was bereits an barrierefreien Mustern, Komponenten und Designsystemen vorhanden ist. Mit ein wenig Recherche finden Sie möglicherweise eine oder mehrere Lösungen, die Ihren Anforderungen entsprechen.

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

• Barrierefreie Komponenten
• Deque University ARIA library
• Gov.UK Design System
• Inclusive Components
• MagentaA11y
• U.S. Web Design System (USWDS), erstellt für die US-Regierung
• Liste barrierefreier Muster von Smashing Magazine

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

• When CSS Isn't Enough: JavaScript Requirements For Accessible Components
• React
  • 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 Bedürfnisse 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 für Browser und Hilfstechnologien

Nachdem Sie einige grundlegende Muster, Komponenten oder ein vollständiges Designsystem recherchiert haben, die für Ihre Entwicklungsumgebung geeignet sein könnten, können Sie sich mit der Unterstützung von Hilfstechnologien befassen. Eine wichtige Art von Hilfstechnologie, auf die Sie bei der Bewertung von Mustern, Komponenten und Designsystemen achten sollten, sind Screenreader.

Screenreader wurden für bestimmte Browser entwickelt und funktionieren am besten in Kombination mit diesen Browsern. Wir werden dieses Thema im Modul zum Testen von Hilfstechnologien ausführlicher behandeln. Für die Bewertung von Mustern ist es jedoch hilfreich zu wissen, dass diese Kombinationen existieren, damit Sie wissen, welche Unterstützung Sie benötigen.

Die Browserunterstützung ist im Allgemeinen kompliziert und wird noch schwieriger, wenn Sie Hilfstechnologien und ARIA-Spezifikationen hinzufügen.

Aber es gibt auch gute Nachrichten. Glücklicherweise helfen uns großartige Ressourcen wie HTML5 Accessibility, Accessibility Support und die WCAG-Checkliste für die barrierefreie Entwicklung benutzerdefinierter Steuerelemente , die aktuelle Browser- und Hilfstechnologieunterstützung besser zu verstehen und sogar zu wissen, wann ARIA überhaupt verwendet werden sollte.

In diesen Ressourcen werden die verschiedenen verfügbaren HTML- und ARIA-Musterelemente beschrieben, einschließlich Tests der Open-Source-Community. Sie können sich auch einige Musterbeispiele für Desktop-, mobile Browser und Hilfstechnologien ansehen. So können Sie fundiertere Entscheidungen in Bezug auf die Barrierefreiheit von Mustern, Komponenten und Designsystemen treffen, die Sie verwenden möchten.

Weitere Hinweise

Nachdem Sie einige barrierefreie Muster oder Komponenten ausgewählt und die Browser- und Hilfstechnologieunterstützung berücksichtigt haben, können Sie sich spezifischeren kontextbezogenen Fragen zum Muster, zur Komponente, zum Designsystem und zur Entwicklungsumgebung zuwenden.

Wenn Sie beispielsweise in einem Content-Management-System (CMS) arbeiten oder Legacy-Code haben, gibt es möglicherweise Einschränkungen hinsichtlich der Muster, die Sie verwenden können. Nach der Überprüfung werden möglicherweise mehrere Musteroptionen auf ein oder zwei Optionen reduziert.

Viele JavaScript-Frameworks ermöglichen es Entwicklern, fast jedes beliebige Muster zu verwenden. In solchen Fällen haben Sie möglicherweise weniger Einschränkungen und können die barrierefreiste 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 die Sprachübersetzung
• Integrationen externer Anbieter

Diese Faktoren spielen zweifellos eine Rolle bei der Auswahl des Musters, aber Sie sollten auch die Personen berücksichtigen, die die Inhalte und den Code selbst erstellen. Das von Ihnen gewählte Muster muss robust genug sein, um alle potenziellen Einschränkungen in Bezug auf vom Editor oder von Nutzern erstellte Inhalte zu bewältigen. Außerdem muss es so aufgebaut sein, dass es von Entwicklern mit unterschiedlichen Kenntnissen im Bereich Barrierefreiheit verwendet werden kann.