Design Driven Development und Barrierefreiheit mit KoLiBri

In der heutigen digitalen Welt gewinnt die Benutzererfahrung durch barrierefreie Gestaltung zunehmend an Bedeutung. Damit alle Menschen, unabhängig von ihren Fähigkeiten, Zugang zu digitalen Angeboten haben, ist es entscheidend, Accessibility-Standards von Anfang an in den Design- und Entwicklungsprozess zu integrieren. In diesem Artikel werden wir untersuchen, wie “Design Driven Development” (DDD) dazu beitragen kann, Barrierefreiheit effektiv zu verankern, und wie die Open-Source-Komponentenbibliothek KoliBri den Prozess erleichtert.

Warum Barrierefreiheit von Anfang an wichtig ist

Barrierefreiheit ist kein nachträglicher Gedanke, sondern sollte ein zentraler Bestandteil des gesamten Entwicklungsprozesses sein. Design Driven Development bietet einen klaren Rahmen, um diesen Aspekt in den Fokus zu rücken. Durch die frühzeitige Integration von Accessibility in den Designprozess wird sichergestellt, dass alle Stakeholder – von Designer bis Developer – die gleichen Ziele verfolgen. Dies verhindert, dass Barrierefreiheit lediglich als zusätzliche Aufgabe am Ende des Projekts betrachtet wird, was oft zu unzureichenden Lösungen führt.

Ein zentrales Element dabei ist die klare Definition der Accessibility-Anforderungen, die bereits in der Planungsphase festgelegt werden sollten. Diese Anforderungen müssen transparent und verständlich kommuniziert werden, damit alle Teammitglieder die notwendigen Schritte zur Erfüllung von Standards zur barrierefreien Gestaltung, wie zum Beispiel den WCAG (Web Content Accessibility Guidelines), verstehen und umsetzen können.

KoliBri: Die Open Source Bibliothek für barrierefreies Design

KoliBri ist eine Sammlung von Bausteinen zur Entwicklung von Webseiten und steht als Open-Source-Bibliothek für die Öffentlichkeit zur Verfügung. Sie bietet eine Vielzahl barrierefreier Komponenten für das User-Interface (UI), die speziell nach den WCAG-Richtlinien entwickelt wurden. Somit stellt sie sicher, dass Entwickelnde und Designschaffende die Möglichkeit haben, Barrierefreiheit ohne zusätzlichen Aufwand in ihre Projekte zu integrieren. KoliBri ist eine hervorragende Ressource für kleine und große Teams, die Accessibility in ihre Entwicklung integrieren möchten.

Die Vorteile von KoliBri

• Barrierefreie Komponenten: Die in KoliBri enthaltenen UI-Elemente sind so konzipiert, dass sie eine hohe Usability für alle Nutzergruppen gewährleisten.

• Einfache Integration: Die vorgefertigten Komponenten können problemlos in bestehende Projekte integriert werden, was den Entwicklungsprozess beschleunigt.

• Detaillierte Dokumentation: Die umfassende Dokumentation unterstützt sowohl erfahrene als auch weniger versierte Entwickelnde, sodass alle im Team profitieren.

Beispiel: Eine barrierefreie Lösung für Abkürzungen

Die KoliBri Abbr-Komponente basiert auf dem HTML-Tag <abbr> und bietet eine barrierefreie Darstellung von Abkürzungen. Im Gegensatz zu herkömmlichen Tooltips passt sie sich beim Zoomen an und wird von Screenreadern korrekt vorgelesen, was die Zugänglichkeit und Benutzerfreundlichkeit für alle Nutzenden verbessert.

<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="top">Abbr</kol-abbr> mit Tooltip oben.</p>

Praktische Umsetzung von Barrierefreiheit im DDD

Um Barrierefreiheit effektiv umzusetzen, gibt es mehrere Schlüsselpunkte, die im Design Driven Development beachtet werden sollten:

📖 Barrierefreiheit-Standards als Grundlage

Es ist unerlässlich, sich mit den Standards zur barrierefreien Gestaltung von Internetangeboten auseinanderzusetzen und darauf aufbauend klare Ziele für die IT-Lösungen zu definieren. Diese geben dem Team eine gemeinsame Ausrichtung und helfen dabei, Fortschritte messbar zu machen. So gewährleisten sie, dass alle Entscheidungen im Einklang mit den übergeordneten Anforderungen stehen. Die Einbindung von UX-Design und Entwicklungsteams ist besonders wichtig, da sie mit der Umsetzung der Nutzerbedürfnisse vertraut sind. Ihre technischen Kenntnisse helfen ihnen auch dabei, die implementierten Standards zu evaluieren, um Verbesserungsmöglichkeiten zu finden. Die WCAG, die als international führender Standard zur Umsetzung von Barrierefreiheit in der Webentwicklung gelten, enthalten Kriterien, die insbesondere für UX-Design und Entwicklung relevant sind, da sie die Grundlage für eine umfassende, nutzerfreundliche Gestaltung bilden. Für IT-Lösungen der öffentlichen Verwaltung des Bundes ist die Erfüllung der BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung) notwendig. Um die Verordnung umzusetzen, müssen auch Erfolgskriterien der WCAG beachtet werden.
Es ist wichtig, dass Komponenten zwar einzeln barrierefrei gestaltet und entwickelt werden, jedoch darf dabei nicht übersehen werden, dass auch die Kombination dieser Elemente barrierefrei bleiben muss. Hierbei spielen zusätzlich Aspekte wie die Interoperabilität von Technologien und die gesamte Nutzererfahrung eine entscheidende Rolle. Diese zusätzlichen Barrierefreiheitsaspekte müssen durch Sensibilisierung, zum Beispiel durch regelmäßige Schulungen, und ein strukturiertes Qualitätssicherungssystem berücksichtigt werden.

🎨 Barrierefreies Design

Im Designprozess sollten Designschaffende sicherstellen, dass alle visuellen Elemente und Interaktionen für alle Nutzenden problemlos zugänglich sind. Ein Design-System mit barrierefreien Im Designprozess sollten Designschaffende sicherstellen, dass alle visuellen Elemente und Interaktionen für alle Nutzenden problemlos zugänglich sind. Ein Design-System mit barrierefreien Komponenten kann dabei helfen, eine konsistente Benutzerfreundlichkeit zu gewährleisten. Mit KoliBri stehen vorgefertigte Themes zur Verfügung, die den Designprozess erleichtern. Außerdem ermöglicht die KoliBri-Bibliothek die Anwendung eines Styleguides auf die Komponenten, um kundenspezifische Design-Systeme zu erstellen. Dadurch dass das gesamte CSS von den Komponenten entkoppelt ist, bleiben die Komponenten bei jeglichem Design semantisch W3C- und WCAG-konform. So kann das Design-Team in einem externen Design-Tool Komponenten gestalten und das daraus entstandene Styling auf die KoliBri-Komponenten angewandt werden. Zusätzlich stellt KoliBri eine Design-Oberfläche, den Theme-Designer, als Unterstützung zum Erstellen eigener Themes bereit. Mit dieser lassen sich CSS-Anweisung an den jeweiligen KoliBri-Komponenten erproben.

💻 Barrierefreies Development

KoliBri-Komponenten können mit dem jeweiligen Theme direkt in Web-Applikationen importiert und genutzt werden, was den Übergang vom Design zur Entwicklung vereinfacht. Die Komponenten werden durch Web Components realisiert, die sich in bestehende Projekte einbinden lassen. Es werden einige Adapter für unterschiedliche Web-Entwicklungs-Frameworks zur Verfügung gestellt, die ein unkompliziertes Importieren der Komponenten ermöglichen. Darunter fallen Adapter für React, Angular und auch Vue.

Beispiel: Ein Formular aus KoliBri-Komponenten mit dem React-Adapter

// Code-Auszug, in dem das Formular mit KoliBri-Komponenten zusammengestellt wird
return (
  <div>
    {' '}
    <KolCard _label="Registrierungsformular">
      {' '}
      {/* weitere KoliBri-Komponenten ausgelassen */} {/* ... */}{' '}
      <form onSubmit={handleSubmit}>
        {' '}
        {/* ... */}{' '}
        <KolSelect
          _id="country"
          _label="Land"
          _value={formData.country}
          _on={{
            onChange: (event) => handleChange('country', event.target.value),
          }}
          _options={[
            { label: 'Bitte auswählen', value: '-1' },
            { label: 'Deutschland', value: 'de' },
            { label: 'Österreich', value: 'at' },
            { label: 'Schweiz', value: 'ch' },
          ]}
        />{' '}
        {/* ... */}{' '}
      </form>{' '}
    </KolCard>{' '}
  </div>
);

KoliBri bietet auch einen Kommandozeilenassistenten, mit dem sich eine neue Webanwendung schnell und einfach aufbauen lässt. Mit der Benutzung der bereitgestellten Basiskomponenten als Import ist Barrierefreiheit gegeben, da die Komponenten sehr restriktiv aufgebaut sind und von außen nicht manipuliert werden können.

Sollte eine vollständig eigene Komponente definiert werden, ist eine detaillierte Dokumentation entscheidend, um den Übergang vom Design ins Development reibungslos zu gestalten. Tools wie Storybook unterstützen diesen Prozess, indem sie die Dokumentation von UI-Komponenten sowie die Durchführung von Accessibility-Tests ermöglichen. Es ist ein Tool, mit dem Entwickelnde die Komponenten abgekapselt von der eigentlichen Anwendung bauen können. Dabei lassen sich verschiedene Zustände und Varianten der Komponenten darstellen. Durch die isolierte Darstellung in Storybook kann überprüft werden, ob alle Anforderungen an die Barrierefreiheit erfüllt sind, bevor die Komponente in das Projekt integriert wird. Dies hilft Teams dabei, konsistente und gut dokumentierte Designsysteme und Komponentenbibliotheken zu schaffen und die Zusammenarbeit zwischen der Entwicklung und dem Design zu fördern. Die KoliBri-Bibliothek selbst bring zwar kein Storybook mit. Eine isolierte Darstellung ist jedoch im Live-Editor der jeweiligen Komponenten gegeben. Zusätzlich können Stories für die KoliBri-Komponenten erstellt werden, sodass das Storybook die selbst entwickelten und von KoliBri bereitgestellten Komponenten in einer Übersicht vereint.

Fazit: Gemeinsam für eine inklusive digitale Zukunft

Ab dem 28. Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz (BFSG) auch private Unternehmen, Webseiten, die elektronische Dienstleistungen anbieten, sowie verschiedene Produkte barrierefrei zu gestalten. Doch Barrierefreiheit ist weit mehr als nur eine gesetzliche Verpflichtung – sie bietet eine wertvolle Gelegenheit, soziale Verantwortung zu übernehmen und allen Menschen den gleichen Zugang zur digitalen Welt zu ermöglichen. Mit Methoden wie Design Driven Development können Unternehmen sicherstellen, dass ihre digitalen Angebote von Beginn an für alle Nutzenden zugänglich sind. Zusätzlich fördert die Nutzung eines Design-System, das auf barrierefreie Open-Source-Komponenten wie die von KoliBri setzt, die Konsistenz in der Gestaltung und Entwicklung. Statt jede Komponente von Grund auf neu zu entwickeln, können Unternehmen bewährte, vorgefertigte, barrierefreie Bausteine verwenden, was Zeit und Ressourcen spart und gleichzeitig eine höhere Qualität und Zugänglichkeit gewährleistet. Wenn Barrierefreiheit von Anfang an in den Entwicklungsprozess integriert wird, entstehen nicht nur bessere Produkte, sondern es wird auch eine inklusive digitale Welt gefördert, in der jeder die Chance hat, aktiv teilzunehmen.