| theme | ./theme | |
|---|---|---|
| colorSchema | light | |
| highlighter | shiki | |
| lineNumbers | true | |
| transition | fade | |
| info | ## Slidev Starter Template Presentation slides for developers. Learn more at [Sli.dev](https://sli.dev) | |
| drawings |
|
|
| css | unocss | |
| title | Komponenten-Bibliothek für die Barrierefreiheit | KoliBri |
- Zentraler IT-Dienstleister des Bundes
- Leitung: Dr. Alfred Kranstedt
- 4.200 Beschäftigte
- 12 Standorte in Deutschland
- Referat mit über 50 Beschäftigten
- Leitung: Christine Heinrich
- Mein Name ist Martin Oppitz.
- Wertegang:
- Inzwischen über 20 Jahre im Web unterwegs
- Informatikstudium, Selbstständig und Inverso
- Seit 3 Jahren beim ITZBund
- Softwarearchitekt im Referat Anforderungs- und Lösungsdesign (II A 2)
<iframe class="rounded-1em" width="800" height="400" src="https://www.youtube-nocookie.com/embed/JQ8ZiT1sn88?si=JXtmpOtVqa7Hy9uO" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
On Dec. 9, 1968, Doug Engelbart
Inhalte des Vortrags:
- Was sind Web Components?
- Was ist unsere Motivation?
- Wie funktioniert das Theming?
- Live-Vorstellung
- Welche USPs ergeben sich?
- Welches Potenzial hat der Standard?
- Was regelt die EUPL-Lizenz?
Was ist eine Web Component?
Webseiten werden mit HTML-Elementen umgesetzt.
- Web Components-Standard (W3C) ermöglicht eigene HTML-Element zu definieren
- Das ist fix
- Semantik (HTML) → Assistive Systems / Barrierefreiheit
- Verhalten (JavaScript) → Usability & Barrierefreiheit
- Das ist flexibel
- Aussehen (CSS) → Corporate Design
- wiederverwendbare, barrierefreie und robuste „Bausteine“
Worin liegt eigentlich das Problem?
Barrierefreie Benutzeroberflächen werden durch die semantisch korrekte Komposition von HTML-Elementen realisiert.
Der HTML-Webstandard lässt aber das Wie dabei offen. Somit liegt die Aufgabe, das "Problem" zu lösen, bei den Entwickelnden. Darüber hinaus gilt es, die Richtlinien der WCAG mit den gestalterischen Aspekten aus den vielseitigen Styleguides zu vereinen.
Welche Ziele können damit verfolgt werden?
- gesetzliche Verpflichtung zur Erstellung barrierefreier Benutzeroberflächen
- Großteil der Komponentenbibliotheken haben den Fokus auf Design
- Anforderungen werden immer wieder neu in Projekten umgesetzt
- Reduzierung der Herstellerabhängigkeit (Digitale Souveränität)
Der große Vorteil für die Bundesverwaltung liegt darin, dass wir mittels des Web Component-Standards eine für uns ideale Lösung gemeinsam umsetzen, wiederverwenden (teilen), verbessern und erweitern können.
Wie ist KoliBri aufgestellt?
Wo wird denn hier was eingespart?
Im Code-Beispiel wird dargestellt, wie die Anforderungen an die Barrierefreiheit im Button "weg gekapselt" werden.
<kol-button _icons="ui-home" _icon-only _label="Primary">
<button aria-labelledby="574540" class="primary" type="button">
<span>
<kol-icon>
<i aria-hidden="true" class="icofont-ui-home"></i>
</kol-icon>
</span>
</button>
<kol-tooltip>
<kol-badge id="574540">
<span>Primary</span>
</kol-badge>
</kol-tooltip>
</kol-button>* Quellcode ist für die bessere Nachvollziehbarkeit stark vereinfacht.
Was macht eigentlich den Unterschied?
Aus Sicht der öffentlichen Verwaltung hat KoliBri eine ganze Reihe an Alleinstellungsmerkmalen:
- Barrierefreiheit - kommt zuerst und vor Design
- Architektur - universell im Web einsetzbar
- Wiederverwendbarkeit - Kleinteilig und gestaltbar
- Digitale Souveränität - Code-Hoheit liegt bei uns
- Robust - vor Manipulationen geschützt
Offizieller Start als internes Projekt des ITZBund.
Release 1.0 mit Unterstützung von Referenz-Projekten.
Reifephase durch Nutzung als interner Standard.
Freigabe als OpenSource auf GitHub.
KoliBri ist zu einem umfassenden Produkt herangewachsen.
Keep the focus on your qualities.
Das Manifest beschreibt die uns leitenden Softwarequalitäten.
- § 1 Benutzerfreundlichkeit
- § 2 Kompatibilität
- § 3 Portabilität
- § 4 Wartbarkeit
- § 5 Funktionale Eignung
- § 6 Sicherheit
Ausführliche Version - Manifest
The fruits of labor are always the sweetest.
Die Anforderungen an die Barrierefreiheit ist für uns alle gleich! Daraus ergibt sich das Potenzial zur Schaffung eines Standards zur bestmögliche Wiederverwendbarkeit.
- Verwendung reiner Webstandards (HTML, CSS, JS und Web Components)
- Framework-agnostische und barrierefreie Komponenten
- Modulare Architektur (Schema, Components, Themes)
- Fließende Integration in bestehende Projekte oder Design Systeme
- Nahtlose Verwendung in Kombination mit Theme
- Fassaden-Komponenten für Design-Sprache (API)
- Sicherstellung des Designs mittels visueller Regressionstests
- Wiederverwendbarkeit in allen webbasierten Projekten
Was steckt hinter der Lizenz EUPL?
Die "Open-Source-Lizenz für die Europäische Union" (EUPL) ist eine von der Europäischen Union herausgegebene Copyleft-Lizenz für die Lizenzierung freier Software.
- Die reine Verwendung von Artefakten ist vollkommen unproblematisch.
- Das Kopieren von Code ist durch die Lizenz geschützt (Copyleft)!
EUPL sichert die freie Nutzung und den Schutz des Urheberrechts.
Du kannst folgendes tun, um KoliBri kennenzulernen …
- (Dokumentation)
- (Create-App)
- (Nutzen)
- (Designer)
- (Samples)
- (Follow-Button)
Lasst uns gemeinsam KoliBri bunter und besser machen!
- Dokumentation
- |
- kolibri@itzbund.de
- |
- GitHub