KoliBri als barrierefreie Komponentenbibliothek und Basis von KERN wird kurz vorgestellt. Dann wird der KERN UX-Standard überblicksartig eingeführt. Besonderes Augenmerk bekommt das enthaltene Figma UI-Kit mit einem Grundset (v1.5.0) an designten UI-Komponenten. Im Anhang sind Hinweise gegeben, welche Tools dabei helfen können, die Barrierefreiheit von Webseiten und Apps zu prüfen, insbesondere auch nach dem neuen APCA-Kontrastberechnungsstandard. Co-Referat zum Vortrag "Barrierefreiheit (a11y) in Design Systemen" von BennoLoewenberg auf der Working Products Monthly vom 24. April 2024.

1. Mit dem UX-Standard
zu einer intuitiven und barrierefreien
öffentlichen Verwaltung
Working Product Monthly „Barrierefreiheit in Design Systemen“
24. April 2024
Einfach für Alle

2. Christian Graf
@_cgraf_

3. Quelle:
https://www.kern-ux.de/ux-standard/anwendungsbeispiel/
Das Problem

4. Quelle:
https://www.kern-ux.de/ux-standard/anwendungsbeispiel/

5. KoliBri – Die barrierefreie Web Component
Bibibliothek
https://public-ui.github.io

6. KoliBri auf GitHub
https://public-ui.github.io/

7. KoliBri – How to Design System?
• Trennung?
• Theming!
Quelle:
https://public-ui.github.io/docs/concepts/styling/theming

8. UX-Standard
Quelle:
https://www.kern-ux.de/ux-standard/

9. Quelle
https://chat.kern-ux.de/default/channels/ankuendigungen

10. Release Notes

11. Methodik, Beratung & Beispiel
https://www.kern-ux.de/methodik-und-beratung/

12. Quelle:
https://www.kern-ux.de/methodik-und-beratung/warum-ux-wichtig-ist

13. Design-System
• Für Alle : Dokumentation & Erklärung
• Für Designer:innen : Figma Libray
• Für Entwickler:innen : Komponenten GitLab Repository

14. Design-System: Bottom-Up Aufbau
Quelle:
https://www.kern-ux.de/design-system/

15. Barrierefreiheit
Quelle:
https://www.kern-ux.de/design-system/barrierefreiheit/

16. Design-System
• Für Alle : Dokumentation & Erklärung
• Für Designer:innen : Figma Libray
• Für Entwickler:innen : Komponenten GitLab Repository

20. Umsetzung mittels KERN: Umsetzung
mit KERN am Beispiel Hundesteuer

21. Design-System
• Für Alle : Dokumentation & Erklärung
• Für Designer:innen : Figma Libray
• Für Entwickler:innen : Komponenten in Repository

22. Repository auf OpenCode
Quelle:
https://gitlab.opencode.de/kern-ux/pattern-library

23. KERN Softwarentwicklung: Aktives Team!

24. : Mitmachen!?
Quelle:
https://www.kern-ux.de/community/werde-teil-der-community

25. Anhang

26. https://www.myndex.com/APCA/

27. Empfehlenswerte Tools für die Bewertung von
Farben & Kontrasten nach A11Y-Kriterien
• https://www.tpgi.com/color-contrast-checker/
• https://webaim.org/resources/contrastchecker/
• https://chromewebstore.google.com/detail/colorblindly/floniaahmccl
eoclneebhhmnjgdfijgg
• https://www.getstark.co/
• http://colorsafe.co/
• https://chromewebstore.google.com/detail/wave-evaluation-
tool/jbbplnpkjmmeebjpijfedlgcdilocofh
Quelle: Bitkom AK Digital User Experience & Design | „Designing for All: Die Schlüsselrolle der Barrierefreiheit im Digitalen“ 26.04.2024

28. Figma-Tools für die Bewertung von Farben
https://www.figma.com/community/plugin/1090308131937420683

29. https://www.figma.com/community/plugin/733159460536249875/a11y-color-contrast-checker