Workflow im Designprozess

Barrierefreiheit in der Designphase

Die Designphase ist ein zentraler Punkt, um digitale Barrierefreiheit von Anfang an mitzudenken. Bereits bei der Konzeption und Gestaltung können viele potenzielle Barrieren vermieden werden. Der folgende Abschnitt beschreibt den Workflow zur Integration von Accessibility in den Designprozess – praxisnah und rollenübergreifend.

Ziel dieses Workflows: Ein Design erstellen, das visuell ansprechend, funktional und für möglichst viele Nutzergruppen barrierefrei ist.

Warum barrierefreies Design?

Barrierefreies Design erfüllt nicht nur ethische und rechtliche Anforderungen (z. B. BFSG, BITV), sondern verbessert auch die allgemeine Benutzerfreundlichkeit für alle. Häufige Probleme wie unzureichender Kontrast, fehlende Fokus-Markierungen oder unverständliche Beschriftungen lassen sich frühzeitig vermeiden, wenn Accessibility von Anfang an mitgedacht wird.

Typische Barrieren im Designprozess:

• Unzureichende Farbkontraste

• Keine sichtbaren Fokus-Indikatoren

• Unklare oder zu kleine Bedienelemente

• Komplexe Navigationsstrukturen

• Beschriftungen fehlen oder sind nicht eindeutig

Workflow-Schritte im Überblick:

1. Nutzerbedürfnisse analysieren

   • Einbeziehung von Personas mit Behinderungen

   • Abgleich mit typischen Nutzungsszenarien assistiver Technologien

2. Designgrundlagen barrierefrei gestalten

   • Farben und Kontraste: Auswahl von Farbkombinationen mit ausreichendem Kontrast (mind. 4,5:1 für normalen Text gemäß WCAG 2.1 / 2.2).

   • Typografie: Gut lesbare Schriftarten, Mindestschriftgröße von 16 px, ausreichender Zeilenabstand.

3. Struktur und Interaktion klar definieren

   • Konsistente Anordnung und klare visuelle Hierarchie.

   • Logische Reihenfolge bei Fokusnavigation.

   • Buttons und Icons eindeutig beschriften – idealerweise mit Text oder Tooltip.

4. Komponenten standardisieren

   • Aufbau eines barrierefreien UI-Komponentenbaukastens (Designsystem).

   • Wiederverwendbare Patterns mit dokumentierten Accessibility-Anforderungen.

5. Designs annotieren und dokumentieren

   • Kontrastangaben, Tastaturbedienbarkeit, Fokusführung (z. B. über Figma-Annotations oder Checklisten).

   • Übergabehinweise mit Verweis auf WCAG-Erfolgskriterien und ARIA-Empfehlungen.

6. Abstimmung im Team

   • Regelmäßige Design-Reviews mit Accessibility-Fokus.

   • Abstimmung mit Entwicklerinnen, UX-Writerinnen und ggf. Testpersonen mit Behinderung.

7. Validierung vor der Übergabe

   • Einsatz von Tools wie Stark, Contrast Ratio, Tota11y, Figma A11y Kit.

Optional: Testen von Prototypen mit assistiven Technologien

Rollen im Workflow:

• UX Designer*innen: Nutzerzentrierte Gestaltung, Anforderungen aus Nutzertests und WCAG ableiten.

• UI Designer*innen: Umsetzung von visueller Klarheit, Interaktion und Fokusführung.

• Produktmanagement: Sicherstellung der Einhaltung von Anforderungen, Fristen und rechtlichen Vorgaben.

• Entwicklung: Frühzeitige Einbindung zur Machbarkeitsabschätzung.

Ergebnisse des Workflows:

• Entwürfe, die barrierefreie Gestaltungskriterien erfüllen.

• Dokumentierte Anforderungen für die technische Umsetzung.

• Reduzierter Anpassungsaufwand in späteren Phasen

Tipp: Eine grafische Übersicht oder Checkliste kann helfen, diesen Workflow teamweit zu etablieren. Auf Wunsch kann eine solche Darstellung ergänzt werden.