PERSPECTIVES

Barrierefreiheit verständlich machen.

Meine RolleUX Research, Informationsarchitektur, Interaction Design und UI.

PERSPECTIVES landing page showing global disability statistics as a field of green bars

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.

Inclusive Design mindmap connecting research questions, definitions and design principles

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.

Three accessibility self-experiments: Instagram with zoom, Amazon by keyboard and Tagesschau without sound — **3 Selbstversuche:** Instagram mit Zoom, Amazon nur per Tastatur und Tagesschau ohne Ton. Selbst große Plattformen hatten dabei klare Barrieren.

Synthese-Board aus Expertengesprächen mit 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.

Map of inclusive web design across production, use, systematic and emotional dimensions

04Iterationen

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

Hand-drawn PERSPECTIVES concept sketch: all seven filter groups stacked in a sidebar next to an icicle diagram with four levels

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.

Hand-drawn PERSPECTIVES sketch of the revised direction: a short navigation with Guidelines, Checklist and Glossary next to an icicle diagram reduced to three levels with filters as a compact top bar

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 connecting the landing page with guidelines, checklist and glossary

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.