PERSPECTIVES

Barrierefreiheit verständlich machen.

Meine RolleUX Research & Interaction Designer KontextTH Augsburg

PERSPECTIVES Startseite: weltweite Statistiken zu Behinderung als Feld aus grünen Balken.

00Case Film

01Kontext & Herausforderung

Digitale Barrierefreiheit ist eine gemeinsame Aufgabe von Design, Content, Entwicklung, Testing und Projektmanagement. Die WCAG liefert dafür wichtige Kriterien, ist für Einsteiger jedoch schwer zugänglich. PERSPECTIVES macht diese Kriterien verständlich und im Arbeitsalltag anwendbar.

Mindmap zu Inclusive Design, die Forschungsfragen, Definitionen und Gestaltungsprinzipien miteinander verbindet.

02Recherche

Für die Recherche führten wir sieben Interviews und drei Selbsttests durch und verglichen in Miro bestehende Lernangebote, Richtlinien und Informationsstrukturen. Aus der Analyse wurden drei zentrale Probleme sichtbar:

Zu technisch für Einsteiger:

Die Sprache und Struktur der WCAG erschweren es Einsteigern, relevante Kriterien schnell einzuordnen.

Unterschiedliche Rollen, unterschiedliche Bedürfnisse:

Design, Content, Development und Projektmanagement benötigen jeweils andere Informationen.

Schwieriger Transfer in die Praxis:

Abstrakte Regeln lassen sich nur schwer in konkrete Produktentscheidungen übersetzen.

Drei Selbstversuche zur Barrierefreiheit: Instagram mit Zoom, Amazon nur per Tastatur und Tagesschau ohne Ton. — **3 Selbstversuche:** Instagram mit Zoom, Amazon nur per Tastatur und Tagesschau ohne Ton. Selbst große Plattformen hatten dabei klare Barrieren.

Synthese-Board aus den Expertengesprächen mit den Hauptproblemen und Hinweisen zur digitalen Barrierefreiheit. — **7 Interviews:** Gespräche mit Experten und Betroffenen aus Accessibility, Medien, Verwaltung, Beratung und Hochschule.

03Designprinzipien

Die Plattform sollte komplexe Regeln erklären, ohne selbst kompliziert zu werden. Drei Prinzipien leiteten die Gestaltung von Inhalt, Interaktion und UI.

1. Im Kontext lernen, nicht über Richtlinien

Nutzer sollen Barrierefreiheit über praktische Beispiele entdecken statt über lange technische Dokumentation.

2. Nur zeigen, was relevant ist

Inhalte sollen sich an die Rolle und die aktuelle Aufgabe der Nutzer anpassen, statt alles auf einmal zu zeigen.

3. Regeln in Handlungen übersetzen

Jede Richtlinie soll direkt erklären, wie sie in der täglichen Designarbeit angewendet werden kann.

Karte des inklusiven Webdesigns entlang der Dimensionen Produktion, Nutzung, System und Emotion.

04Iterationen

In der ersten Iteration testete ich, wie Filter und WCAG-Inhalte gemeinsam dargestellt werden können:

Handskizze der ersten Konzeptidee: alle sieben Filtergruppen untereinander in einer Sidebar neben einem Icicle-Diagramm mit vier Ebenen.

Problem / Feedback

Zu viele gleich gewichtete Optionen erhöhten den Aufwand beim Verstehen und verdeckten die WCAG-Hierarchie.

Was sich änderte

Ich gruppierte die Filter und öffnete sie schrittweise. Aktive Filter und die aktuelle Ebene wurden deutlicher gezeigt.

Handskizze der überarbeiteten Richtung: eine kurze Navigation mit Guidelines, Checkliste und Glossar neben einem auf drei Ebenen reduzierten Icicle-Diagramm, die Filter sitzen als kompakte Leiste oben.

05Lösung

Die Plattform unterstützt drei Aufgaben: WCAG verstehen, passende Kriterien finden und die Umsetzung prüfen.

Informationsarchitektur

Die Landingpage erklärt zuerst, warum Barrierefreiheit relevant ist. Danach können Nutzer direkt zu Guidelines, Checkliste oder Glossar wechseln, je nachdem, welche Unterstützung sie brauchen.

PERSPECTIVES Journey Map, die die Startseite mit Guidelines, Checkliste und Glossar verbindet.

Atomic Design & Styleguide

Die Figma Library wurde nach dem Atomic-Design-Prinzip aufgebaut. Für alle Interaktionen wurden Zustände wie Hover, Fokus und Active definiert. So entstand eine konsistente Grundlage für Design und Frontend.