Willkommen bei KoliBri

„Der barrierefreie HTML-Standard“

KoliBri ist kein Designsystem im klassischen Sinne. Vielmehr erweitern wir den HTML5-Standard um in sich geschlossene, barrierefreie Web Components – neue HTML-Elemente, die unabhängig von Design oder Branding funktionieren. Diese atomaren Komponenten bilden ein Fundament, das jede Designbibliothek, jedes Framework oder jeder Styleguide wiederverwenden und nach eigenen Bedürfnissen thematisieren kann.

KoliBri steht für „Komponentenbibliothek für Barrierefreiheit“ und wurde vom Informationstechnikzentrum Bund (ITZBund) als Open Source zur Wiederverwendung und Weiterentwicklung veröffentlicht.

Vision

Gemeinsam machen wir HTML barrierefrei durch die Nutzung wiederverwendbarer Web Components, um Usability und Barrierefreiheit zu gewährleisten.

Mission

Der HTML-Webstandard ist selbst sehr „offen“ spezifiziert, um so langlebig und robust wie möglich zu sein. Daher kommt es oft vor, dass HTML-Kompositionen nicht ohne Weiteres barrierefrei, semantisch und valide sind.

KoliBri basiert direkt auf den Webstandards des W3C (framework-agnostisch) und ist eine generische Referenzimplementierung des WCAG-Standards sowie der BITV für Barrierefreiheit und als Multi-Theming-fähige Präsentationsschicht implementiert. Es gibt keine technische Referenz und keine Datentransferfunktionalität. Das bedeutet, dass KoliBri gleichermaßen für die Realisierung statischer Webseiten wie auch dynamischer Webanwendungen mit unterschiedlichen Corporate Designs und Styleguides wiederverwendbar ist und somit für Open Source sehr interessant ist.

Roadmap

KoliBri arbeitet kontinuierlich an Verbesserungen, neuen Funktionen und zukunftsorientierten Innovationen für das jeweils aktuelle Major-Release. Parallel dazu wird ein ausgewähltes LTS-Release hinsichtlich Fehlerbehebungen gepflegt.

gantt
    title LTS & STS
    dateFormat YYYY-MM-DD

    0.x Initial implementation :, 2020-07-01, 17M
    1.x (LTS)                  :, 2021-12-01, 3y
    2.x (LTS)                  :,  2023-12-01, 3y
    3.x (STS)                  :crit , 2024-12-01, 15M
    4.x (LTS)                  :, 2025-12-01, 3y
    5.x (STS)                  :crit , 2026-12-01, 15M
    6.x (LTS)                  :, 2027-12-01, 3y

Installation

Installieren Sie die Pakete mit pnpm:

pnpm install

Führen Sie den Build einmal aus, um die Komponenten zu generieren:

pnpm -r build

Schnelleinstieg

Installieren Sie das Standard-Theme und registrieren Sie die Komponenten:

pnpm add @public-ui/components @public-ui/theme-default

import { register } from '@public-ui/components';
import { defineCustomElements } from '@public-ui/components/loader';
import { DEFAULT } from '@public-ui/theme-default';

register(DEFAULT, defineCustomElements);

Vermeidung von CSS-Custom-Property-Kollisionen

KoliBri-Themes stellen einige CSS-Custom-Properties bereit, damit Anwender das Erscheinungsbild anpassen können. Da diese Eigenschaften global bleiben – selbst innerhalb eines Shadow DOM –, kann die Verwendung von zu vielen davon mit Variablen auf der Host-Seite kollidieren.

Verwenden Sie namensraumbezogene Custom Properties nur für Werte, die von außen überschrieben werden müssen. Verlassen Sie sich für interne Berechnungen auf SASS-Variablen anstelle zusätzlicher CSS-Eigenschaften. Dies hält die Komponenten robust und verhindert unerwartete Style-Lecks.

Zusammenarbeit und Kooperation

Der Fokus von KoliBri liegt auf kleinen (atomaren), sehr flexiblen und hochgradig wiederverwendbaren HTML-Kompositionen (z. B. Buttons). Wir bieten eine barrierefreie, semantische und valide Standardimplementierung solcher Komponenten, die für jede übergeordnete HTML-Struktur oder Komponente (Molekül, Organismus oder Template) wiederverwendet werden kann. An diesen atomaren Komponenten sollten wir zusammenarbeiten und kooperieren, um unsere Fähigkeiten und unser Wissen zu bündeln. Die Synergieeffekte bei den Basiskomponenten ermöglichen es Ihnen, sich stärker auf fachspezifische Inhalte zu konzentrieren.

Lassen Sie uns KoliBri gemeinsam besser und bunter machen!

Weiter zur Dokumentation

Mitwirken

Fehlerberichte und Pull Requests sind willkommen. Bitte lesen Sie unseren Leitfaden für Mitwirkende, bevor Sie beginnen.

SLSA/Provenienz

Wir streben für die aus diesem Repository veröffentlichten npm-Pakete SLSA Build Level 3 an. Releases werden in GitHub Actions mit OIDC-basierter Identität erstellt und mit npm-Provenienz (--provenance) veröffentlicht, wodurch verifizierbare Nachweise für die veröffentlichten Artefakte erzeugt werden. Siehe den Publish-Workflow für die Release-Schritte und die Konfiguration der npm-Provenienz.

Verifizierungsbeispiel

# Inspect provenance metadata for a published package
pnpm view @public-ui/components dist.provenance

# (Optional) Verify signatures/provenance if your npm client supports it
pnpm audit signatures --package=@public-ui/components@<version>

Ressourcen

• Erste Schritte

• Mitwirken

• Verhaltenskodex

• Bekannte Probleme

• Sicherheit