Skip to content

Latest commit

 

History

History
372 lines (267 loc) · 10.9 KB

slides copy.md

File metadata and controls

372 lines (267 loc) · 10.9 KB
theme colorSchema highlighter lineNumbers transition info drawings css Title showQR
./theme
light
shiki
true
fade
## Informations
persist
unocss
Web Component library for the Accessibility | KoliBri
false

KoliBri - Public UI

The accessible web components

layout: about-itzbund

Informationstechnikzentrum Bund (ITZBund)

  • "Federal Information Technology Center"
  • Central IT service provider of the federal government
  • Head: Dr. Alfred Kranstedt
  • 4,200 employees
  • 12 locations in Germany

Requirements analysis and software design

  • Unit with over 50 employees
  • Head: Christine Heinrich

layout: about-me showQR: false

Speaker

  • My name is Martin Oppitz.
  • Biography:
    • More than 25 years of experience in web development
    • Computer science studies, own small business and private companies
    • Now I am working at the ITZBund since 3 years

layout: center showQR: false

<iframe class="rounded-1em" width="800" height="450" 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

layout: center showQR: false

Useable without colors

Click the red button to cancel the operation.

layout: center showQR: false

Red-green vision deficiency

People cannot tell the difference between the buttons.

layout: center showQR: false

Can be used without colors

Is the red or green chart segment larger?

layout: tunnel showQR: false

Everything in the sheetick‽

Visual field impairments can occur in just one eye or in both eyes?

layout: center showQR: false

Component-Library for the Accessiblity

(Komponenten-Bibliothek für die Barrierefreiheit)

KoliBri

layout: about-kolibri showQR: false

Facts

  • start 2021 as internal project
    • cross-functional team: software architecture, accessibility coordinator, accessibility testing, and architecture management
  • First release December 2021
  • 2022 characterized by maturity phase
  • 2023 Open Source Standard

layout: egg handle: 1

From Egg to Open Source Standard

What are the following questions we want to get to the bottom of?

  • What is the motivation for KoliBri?
  • What is the problem?
  • What is a Web Component?
  • Why is KoliBri so flexible?
  • Where is something saved here?
  • What actually makes the difference?
  • Where does KoliBri stand and where does it go?
  • What is behind the license EUPL?

layout: image-right handle: 2

Motivation

What goals can be pursued with this?

  • Legal requirement to create accessible user interfaces.
  • majority of component libraries have focus on design
  • requirements are implemented again and again in projects
  • Reduction of vendor dependency (digital sovereignty)

Objective: To create an accessible and reusable standard library without losing the necessary flexibility and design freedom.

layout: image-right-50 image: '/assets/w3c.jpeg' handle: 3

Many roads lead to Rome

What is the problem?

Accessible user interfaces are realized by semantically correct composition of HTML elements.

However, the HTML web standard leaves the how open. Thus, the task of solving the "problem" lies with the developers. Furthermore, the guidelines of the WCAG have to be combined with the design aspects from the versatile style guides.

The great advantage for the federal administration is that we can implement, reuse (share), improve and enhance a solution ideal for us together by means of the Web Component standard.

layout: image-right-50 image: '/assets/html-js-css.png' handle: 4

Web Components

What is a Web Component?

Web pages are implemented with HTML elements.

  • Web Components standard allows to define own HTMl element.
  • This is fixed
    • Semantics (HTML) → Assistive Systems / Accessibility.
    • Verhalten (JavaScript) → Usability & Barrierefreiheit
  • Das ist flexibel
    • Aussehen (CSS) → Corporate Design
  • this creates barrier-free, robust and reusable "building blocks

handle: 5

Theming

How is KoliBri positioned?

layout: demo-time handle: 6

Live-Demo

Where is anything saved here?

The code example shows how the accessibility requirements are "encapsulated away" in the button.

<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>

* Source code is greatly simplified for better Comprehensibility.

layout: image-right handle: 7

Unique selling proposition

What actually makes the difference?

From a public administration perspective, KoliBri has a number of unique selling points:

  • Accessibility - comes first and before design.
  • Architecture - universally applicable on the web.
  • Reusability - small-scale and designable
  • Digital sovereignty - code sovereignty lies with us
  • Robust - protected from manipulation

layout: image-right image: '/assets/logo.kolibri.png' handle: 8

Outlook

Where to go with KoliBri?

Several design systems (e.g. DeSyBri and KERN) are already implemented on the basis of KoliBri. All existing components can be used and extended by own larger components.

The graphical design is done with the help of theming. For this the designer or also pure CSS, SCSS etc. can be used.

KoliBri is continuously developed further. Likewise innovations in the regulations (e.g. WCAG, EN and BITV) are constantly incorporated and checked by our experts for accessibility. The requirements of the federal administration and the open source community are taken into account.

layout: image-right image: '/assets/eupl.jpeg' handle: 9

License

What is behind the EUPL license?

The "European Union Open Source License" (EUPL) is a copyleft license issued by the European Union for licensing free software.

  • The pure use of artifacts is completely unproblematic.
  • Copying code is protected by the license (copyleft)!

EUPL ensures free use and copyright protection.

layout: image-right-50 image: '/assets/website.png' handle: 10 style: 'width: 100%'

Next steps

Here's what you can do to get to know KoliBri ...

  • Read more about KoliBri (Documentation)
  • Try KoliBri (Create app)
  • Use KoliBri in your design system (utility)
  • Create your own KoliBri (Designer)
  • Learn by example (Samples)
  • Follow and share us (Follow button)

layout: center showQR: false

Thank you for your attention


Let's make KoliBri more colorful and better together!

  • Documentation
  • |
  • kolibri@itzbund.de
  • |
  • GitHub

showQR: false