Skip to content

slides.en.md

Latest commit

 

History

History
345 lines (244 loc) · 9.24 KB

slides.en.md

File metadata and controls

345 lines (244 loc) · 9.24 KB
Raw
theme ./theme
colorSchema light
highlighter shiki
lineNumbers true
transition fade
info ## Informations
drawings
persist
css unocss
Title Web Component library for the Accessibility | KoliBri
showQR 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

Red-green vision deficiency

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: 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?
  • Which components already exists?
  • 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.
    • Behavior (JavaScript) → Usability & Accessibility
  • This is flexible
    • Appearance (CSS) → Corporate Design
  • this creates accessible, 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-66 image: '/assets/handout.png' handle: 7

Component diversity

What is the benefit of the component diversity?

The component diversity is the key to the flexibility of KoliBri.

  • ... are small and reusable.
  • ... can be combined with other.
  • ... can be extended.
  • ... can be replaced.
  • ... can be styled.

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/eupl.jpeg' handle: 8

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 image: '/assets/logo.kolibri.png' handle: 9

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

<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

Now, we can make our web products accessible to everyone.

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