UI- & UX-Designer:innen
Wer Komponenten, Styleguides oder ganze Produkte gestaltet, legt 60–70 % der WCAG-Kriterien selbst fest, oft ohne es zu wissen.
Schulung · Gestaltung
Barrierefreies Design.
Ob ein digitales Produkt barrierefrei wird, entscheidet sich nicht erst im Code, sondern im Design. Farbkontraste, Typografie, Fokus-Zustände und Touch-Targets legen fest, was die Entwicklung später überhaupt umsetzen kann.
In dieser Schulung lernst du, barrierefreie Gestaltungsentscheidungen nach WCAG 2.2 AA zu treffen und sie so zu dokumentieren, dass sie in der Umsetzung ankommen. Mit echten Beispielen, Tools und direktem Feedback an deinen eigenen Designs.
Dauer
3 Stunden
Gruppengröße
max. 5 Teilnehmende
Format
Online (Zoom) oder Inhouse
Vorkenntnisse
Keine erforderlich
Was du danach kannst
Design-Entscheidungen, die halten.
Nach drei Stunden gestaltest du Interfaces, die WCAG 2.2 AA von Anfang an mitdenken, statt sie am Ende reparieren zu lassen.
- Farbkontraste prüfen und korrigieren: für Text, UI-Komponenten und Grafiken (4,5:1 und 3:1 sicher anwenden)
- Barrierefreie Farbpaletten und Zustände entwerfen, ohne dass Information nur an Farbe hängt
- Typografie lesbar gestalten: Schriftgrößen, Zeilenlängen, Abstände, Responsivität
- Fokus-, Hover- und Fehlerzustände vollständig spezifizieren, statt sie der Entwicklung zu überlassen
- Touch-Targets und Abstände nach den neuen WCAG-2.2-Kriterien dimensionieren
- Designs mit Barrierefreiheits-Annotationen übergeben, die Entwickler:innen wirklich nutzen können
Agenda
Was wir in 3 Stunden behandeln.
Barrierefreiheit aus Design-Sicht
Welche WCAG-Kriterien im Design entschieden werden, und was passiert, wenn sie erst im Code auffallen.
Farbe & Kontrast
Kontrastverhältnisse verstehen und mit Tools prüfen (Colour Contrast Analyser, Stark, Figma-Plugins). Farbfehlsichtigkeiten simulieren.
Typografie & Layout
Mindestgrößen, Zeilenlänge und -abstand, Text-Zoom bis 200 %, Reflow: was dein Layout aushalten muss.
Interaktionszustände gestalten
Sichtbarer Fokus, Hover, aktiv, deaktiviert, Fehler: vollständige Zustands-Sets für Komponenten entwerfen.
Touch-Targets & WCAG-2.2-Neuerungen
Zielgrößen (24×24 px Minimum), Dragging-Alternativen, konsistente Hilfe: die neuen Kriterien praktisch angewendet.
Annotationen & Handoff
Barrierefreiheit dokumentieren: Lesereihenfolge, Alt-Text-Hinweise, Landmark-Vorschläge, direkt an deinen mitgebrachten Designs.
Für wen geeignet
Wer am meisten profitiert.
Für alle, die digitale Oberflächen gestalten oder Gestaltung beauftragen. Kein Vorwissen zu Barrierefreiheit nötig.
Marketing & Brand
Kampagnen, Landingpages und Social-Grafiken erreichen mehr Menschen, wenn Kontrast und Lesbarkeit stimmen. Das Corporate Design trägt dabei trotzdem.
Product Owner & Projektleitung
Wer Design-Reviews abnimmt, sollte wissen, worauf zu achten ist, bevor Barrieren teuer in die Entwicklung wandern.
Was du brauchst
Kein Code, keine Vorkenntnisse. Ein Design-Tool deiner Wahl (Figma, Sketch, Adobe XD) ist hilfreich, aber nicht Pflicht. Bring gern eigene Designs mit, wir besprechen sie live in der Gruppe.
Bereit anzumelden?
Nächste offene Termine ansehen oder Inhouse-Variante anfragen.