Inklusives Webdesign leicht gemacht? Die KoliBri Bibliothek

Mit der zunehmenden Digitalisierung werden Webseiten und Anwendungen zu den zentralen Vermittlern von Informationen. Dabei bieten die Sprachen HTML und CSS, die als Grundbaustein für den Aufbau von Webseiten dienen, großen Spielraum für Gestaltung. Diese Freiheit ermöglicht es allerdings, unsemantische Layouts zu erzeugen, die vor allem eine Herausforderung für Menschen darstellen, die auf assistive Technologien, sei es in Form von Soft- oder Hardware, angewiesen sind. Sofern beim Gestalten von Webinhalten diese Problematik nicht berücksichtigt wird, wird mit hoher Wahrscheinlichkeit die Navigation und Interpretation dieser erschwert und schlussendlich Nutzern der Zugang zu Informationen behindert.
So sind öffentliche Stellen in der EU heute rechtlich verpflichtet, ihre Webseiten und digitalen Anwendungen barrierefrei zu gestalten. In Deutschland dienen das Gesetz zur Gleichstellung von Menschen mit Behinderungen (BGG) sowie die Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz (BITV) als rechtliche Grundlagen.

Barrierefreiheit in der Informationstechnik ist allerdings kein rein inklusives Anliegen. Das Berücksichtigen von Aspekten wie semantischer Korrektheit oder auch hinreichender Farbkontraste gewährleistet den Zugang zu Informationen unabhängig von den individuellen Möglichkeiten der einzelnen Person.

In dieser Hinsicht stellt die Bibliothek KoliBri, die vom Informationstechnikzentrum Bund (ITZBund) entwickelt wurde, einen Lösungsansatz für das beschriebene Problem dar. Doch wie genau trägt KoliBri zur Problemlösung bei? Wie lässt sich die Bibliothek implementieren? Wie barrierefrei sind die Komponenten der Bibliothek?

Was ist KoliBri?

Das Akronym KoliBri steht für „Komponentenbibliothek für die Barrierefreiheit”. Die Bibliothek wurde unter Verwendung von TypeScript entwickelt und basiert auf den Leitlinien des World Wide Web Consortium (W3C), den Web Content Accessibility Guidelines (WCAG). Diese Richtlinien sind unabhängig von konkreten Implementierungen und Frameworks und bilden die Grundlage für die Umsetzung von Barrierefreiheit im Web. Zudem hat die Bibliothek den BITV-Test in einer an die Besonderheiten von Web-Komponenten angepassten Form implementiert, um die Barrierefreiheit dieser zu gewährleisten.

KoliBri verfolgt das Ziel, Web-Komponenten bereitzustellen, die ohne große Anpassungen von Grund auf barrierefrei sind.

Die Kompatibilität der Bibliothek ist dabei eines der primären Ziele. So ist sie kompatibel mit gängigen Geräten, Betriebssystemen und Browsern und kann in verschiedenen Umgebungen und Architekturen eingesetzt werden. Ob es sich um statische oder dynamische Webseiten mit oder ohne Frameworks handelt, spielt keine Rolle. Ebenfalls kann KoliBri unabhängig davon eingesetzt werden, ob das Rendern der Webseite vorab (Pre-Rendering), server- (SSR) oder clientseitig (CSR) erfolgt.

Wie funktioniert KoliBri?

KoliBri bietet eine Auswahl an Web-Komponenten, die atomare und wiederverwendbare HTML-Kompositionen darstellen und einfach in Webseiten und Anwendungen integriert werden können. Es handelt sich dabei um gängige UI-Elemente wie Buttons, Eingabefelder oder Dropdown-Menüs. Komponenten haben jeweils einen Namen, Attribute und eine Beschreibung. Sie folgen also einem klaren Muster, um Einheitlichkeit sowie Verständlichkeit zu garantieren. Jede Komponente ist nach der PascalCase-Konvention KolNameDerKomponente (oder alternativ nach KebabCase kol-name-der-komponente) benannt und wird wie ein gewöhnlicher HTML-Tag im Code verwendet. Mittels der Attribute lassen sich Komponenten individuell anpassen. Attribute besitzen stets die Form _attributName und können Werte zugewiesen bekommen (_attributName=”Wert”), um Inhalt, Form sowie (besonders relevant für interaktive Elemente) das Verhalten einer Komponente zu steuern.

Darüber hinaus sind diese Komponenten um gewöhnliche HTML-Tags wie <div> ergänzbar, welche durch zusätzliche Attribute wie slot=footer ihre Semantik erhalten. Ebenfalls lassen sich die bekannten ARIA-Attribute mit den gleichnamigen, durch einen Unterstrich versehenen KoliBri-Attribute (beispielsweise _ariaExpanded aus KoliBri für aria-expanded aus ARIA) weiterhin verwenden, sofern diese in der Bibliothek implementiert wurden.

Das folgende Code-Snippet demonstriert die Funktionsweise von Komponenten am Beispiel der Komponente KolAlert, deren Zweck die Darstellung von Hinweisen ist.

import { FC } from "react";
import { KolAlert } from "@public-ui/react";

export const App: FC = () => {
  return (
    <div className="m-4">
      <KolAlert _label="Reproduktion" _type="info" _variant="card">
        <p className="m-0">
          Für eine möglichst schnelle Fehlerbehebung sind fokusierte
          Reproduktionsbeispiele sehr hilfreich. Nutzen Sie daher die
          CodeSandbox um ein kleines Beispiel aufzubauen, welches den Fehler
          "provoziert".
        </p>
      </KolAlert>
    </div>
  );
};

Wie können Komponenten visuell gestaltet werden?

Das obige Beispiel zur Komponente KolAlert demonstriert, wie eine Komponente durch ihre Attribute manipuliert werden kann. Dazu stellt sich die Frage, inwiefern Komponenten visuell gestaltet werden können. Nur selten besitzen Komponenten Attribute, die eine visuelle Gestaltung dieser ermöglichen. Aber die visuelle Gestaltung von Webseiten spielt doch eine wesentliche Rolle bei der Benutzererfahrung?
Um die Probleme zu umgehen, die durch die mit CSS gegebenen Freiheiten entstehen können, bietet KoliBri den sogenannten KoliBri-Designer an. Dieses Tool ermöglicht es, beliebige Styleguides und Designs umzusetzen, ohne dabei Layouts zu erzeugen, die sich nicht mit der durch HTML vorgegebenen Semantik decken. So wird ermöglicht, dass mithilfe von assistiven Technologien die Nutzererfahrung sich nicht erheblich von der Erfahrung ohne solche unterscheidet.

Zudem sind in KoliBri bereits Mechanismen integriert, die unzureichende Farbkontraste vermeiden. So kann beispielsweise der Komponente Badge eine Hintergrundfarbe, allerdings keine Textfarbe zugewiesen werden. Die Textfarbe wird basierend auf der spezifizierten Hintergrundfarbe automatisch berechnet und gesetzt, um einen hinreichenden Farbkontrast zu gewährleisten. Dieses Merkmal, dass Komponenten nur begrenzt manipulierbar sind, um deren Barrierefreiheit zu gewährleisten, stellt ein Kernprinzip der Bibliothek dar.

KoliBri löst also die Probleme hinsichtlich der Barrierefreiheit, ohne Kompromisse bei der Gestaltungsfreiheit zu machen.

Wie kann man mit KoliBri entwickeln?

Besonders gut eignet sich KoliBri für JSX/TSX-basierte Frameworks wie React oder Solid, da hier die maximalen Möglichkeiten der Typ-Unterstützung und Autovervollständigung möglich sind. Für Frameworks mit eigenen Template-Sprachen wie Angular und Vue variiert die Unterstützung bei der Entwicklung.

Je nach Anwendungsgebiet und vorliegender Architektur sehen die Schritte zur Integration ein wenig anders aus. Für das Web-Framework React sind die folgenden Schritte notwendig:

npm i @public-ui/components @public-ui/themes @public-ui/react

import React from 'react';
import ReactDOM from 'react-dom';

import { AppComponent } from './components/app/component';

import { register } from '@public-ui/core';
import { defineCustomElements } from '@public-ui/components/dist/loader';
import { DEFAULT } from '@public-ui/themes';

register(DEFAULT, defineCustomElements)
    .then(() => {
        const htmlDivElement: HTMLDivElement | null = document.querySelector<HTMLDivElement>('div#app');
        if (htmlDivElement instanceof HTMLDivElement) {
            const root = createRoot(htmlDivElement);
            root.render(<AppComponent />);
        }
    })
    .catch(console.warn);

import React from 'react';
import { KolSpin } from '@public-ui/react';

export const AppComponent = () => {
    return (
        <div>
            <KolSpin _show />
        </div>
    );
};

Für Informationen zu einzelnen Komponenten bietet KoliBri eine umfassende Dokumentation aller verfügbaren Komponenten. Hierdurch erhält der Entwickler Einblicke in:

• den Zweck jeder Komponente
• eine Erklärung zur Funktionsweise
• die Dokumentation aller Attribute
• die visuelle Darstellung
• die Abhängigkeiten zu anderen Komponenten

Testen der Komponenten

Das ITZBund-interne Barrierefreiheitstestteam prüft die Barrierefreiheit von Komponenten durch verschiedene Testmethoden. Dazu gehören unter anderem Unit-Tests, Snapshot-Tests und visuelle Screenshot-Tests. Das Testvorgehen basiert dabei auf einer angepassten Form des BIK BITV-Tests.

So sind Komponenten in der Regel bereits getestet, allerdings kann es vorkommen, dass Tests noch ausstehen.
Die Dokumentation der Komponenten enthält teilweise Informationen darüber, ob einzelne Komponenten nach den Anforderungen des Testvorgehens als vollständig barrierefrei gelten beziehungsweise falls nicht, welche Mängel sie aufweisen. Zudem gibt es eine Liste mit Testergebnissen.

Es ist also davon auszugehen, dass die Komponenten der KoliBri-Bibliothek hinreichend barrierefrei sind. Um die Barrierefreiheit jedoch eigenständig sicherzustellen, bieten sich für Entwickler verschiedene Möglichkeiten.
Neben (meist kostenpflichtigen) Drittanbieter-Services stehen Entwicklern Tools wie WAVE zur Verfügung, um Barrieren auf Webseiten automatisiert zu erkennen. Bei der Suche nach dem geeigneten Tool kann die Liste der Web Accessibility Initiative hilfreich sein.¹
Darüber hinaus bleiben Checklisten, Standards und manuelles Testen mit assistiven Technologien weiterhin verlässliche Instrumente, um sicherzustellen, dass alle Aspekte der Barrierefreiheit berücksichtigt wurden.

¹Die W3C arbeitet aktuell an einer Aktualisierung der Liste. (Stand November 2023)

Fazit

Die Webseite von React bietet einen Guide für den Umgang mit Barrierefreiheit in React-Projekten an. Obwohl keine aktuelle Version des Artikels gefunden werden konnte, beschreibt der Leitfaden viele Praktiken, die nicht spezifisch für das Framework sind, sondern allgemeine Empfehlungen zur Gewährleistung der Barrierefreiheit von Webseiten darstellen. So verweist der Artikel zu Beginn auf die Bedeutung der WCAG, der ARIA-Attribute als Ergänzung zu HTML sowie die Verwendung von semantischem HTML.

Wie lässt sich Barrierefreiheit im Web umsetzen? Dies kann aufgrund der Vielzahl von Problemen und Ansätzen nicht so konkret definiert werden. KoliBri nimmt einem die Notwendigkeit ab, den Überblick über all diese verschiedenen Punkte zu behalten. Die Bibliothek unterstützt den Entwickler, indem sie diesem Komponenten vorgibt. Durch die Typisierung von Attributen oder Vorgaben, welche Attribute verpflichtend mit Werten zu befüllen sind, stellt KoliBri die Funktionalität und Barrierefreiheit der Komponenten sicher.

Angesichts der Tatsache, dass KoliBri vom ITZBund, dem IT-Dienstleister der deutschen Bundesverwaltung, entwickelt wurde, kann angenommen werden, dass die Bibliothek die Anforderungen an Barrierefreiheit von Webseiten in hohem Maße erfüllt. Dies ist in der gesetzlichen Verpflichtung begründet, die öffentliche Stellen haben, ihre Webseiten barrierefrei zu gestalten.