Das Dokument behandelt die Bedeutung von Barrierefreiheit in Design-Systemen, insbesondere im Kontext der öffentlichen Verwaltung. Es präsentiert verschiedene Ressourcen und Tools zur Unterstützung von Barrierefreiheit, einschließlich einer Komponentbibliothek und Designrichtlinien. Zudem wird ein konkretes Beispiel für die Umsetzung eines Design-Systems anhand der Hundesteuer in Verbindung mit der Kern-UX-Methodik vorgestellt.

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