German UPA | Beitrag vom 04.08.2025
UX unter der Lupe: Wie sich digitale Barrieren wirklich anfühlen – ein Deep Dive in gelebte Barrierefreiheit

Was passiert, wenn ein simpler Online-Kauf zur Geduldsprobe wird? Wenn ein Warenkorb unsichtbar bleibt oder ein Formular den Screenreader ignoriert? Im UX-Tutorial des AK Barrierefreiheit der German UPA trafen Design auf Realität – und Realität auf Barrieren. UX-Profis bekamen einen seltenen, aber notwendigen Einblick in die digitale Welt blinder Nutzer*innen – mit Live-Demos, Nutzervideos und schonungslos ehrlichen Analysen.


Wie fühlt sich digitale Barrierefreiheit wirklich an?

Der Workshop hatte eine klare Mission: UX-Professionals sollten nicht über Barrierefreiheit sprechen, sondern sie erleben. Dabei führte Oliver Vaupel gemeinsam mit Sandra Schuster, Ilber Lama und Dieter Blonkiewicz durch eine Veranstaltung, die Barrieren sichtbar – oder besser gesagt: hörbar – machte. Alle Mitwirkenden sind Mitglieder des AK Barrierefreiheit der German UPA. Zwei von ihnen sind selbst blind. Ihre Perspektive auf die digitale Welt ist nicht nur authentisch – sie ist unersetzlich.

Drei reale Use Cases: Reise, Weingläser, Versicherung

Sandra Schuster, UX-Researcherin mit Fokus auf Tests mit Menschen mit Behinderung, zeigte in drei eindrücklichen Beispielen, wie blinde Menschen digitale Hürden erleben:

  • Hotelbuchung bei Agoda
    Ein technikaffiner Nutzer versucht, ein Hotel in Wien zu buchen – vergeblich. Der Kalender springt auf Englisch um, das Datum lässt sich nur mühsam per Wischgesten navigieren. Screenreader-Feedback: unverständlich. Rabattangebote werden mehrfach vorgelesen, aber ohne Kontext. Der Nutzer bleibt ratlos.
  • Onlineshopping für Weingläser
    Eine blinde Nutzerin sucht gezielt nach Gläsern mit kurzem Stiel. Die Produktinformationen? Im besten Fall unvollständig, im schlimmsten Fall nur als „Ellipse, Link“ bezeichnet. Die tatsächliche Artikelbeschreibung kommt – wenn überhaupt – ganz am Ende und ist schwer zugänglich.
  • Versicherungssuche über eine Karte
    Google Maps als embedded Karte? Für Blinde nahezu unbenutzbar. Buttons mit nur numerischer Beschriftung wie „47“ oder „210“ sind für Screenreader schlicht unbrauchbar. Orientierung? Fehlanzeige.

Live-Demonstration: Navigieren wie ein Profi – und scheitern an Details

Ilber Lama demonstrierte live, wie ein Screenreader die Seite der German UPA interpretiert. Dabei wurde schnell klar: Die Seite ist nicht unzugänglich – aber sie ist nicht durchgängig zugänglich. Ilber navigierte durch Tabs mit nichtssagenden Namen wie „3 auf 5“ und übersprang Inhalte, weil die semantische Strukturierung fehlte.

Besonders aufschlussreich: Das Anmeldeformular für eine Mitgliedschaft. Zwar formal korrekt, aber in der Praxis durch falsch gesetzte Fokus-Führungen, nicht bedienbare Radiobuttons und fehlende Fehlermeldungen unbrauchbar.

Zwei Bonus-Videos: Was der Screenreader nicht sagt

In dem Tutorial wurden zudem zwei kurze, aber aufschlussreiche Videos gezeigt: 

  • Ein Warenkorb ohne Kontext: Das Icon ist eine „0“. Nach Klick öffnet sich ein Modalfenster – das aber vom Screenreader nicht erkannt wird. Der Fokus bleibt auf der Hauptseite.
  • Ein toter Link: In der FAQ führt ein Link zu Produkten – aber nur per Rechtsklick und Kontextmenü. Die Enter-Taste? Wirkungslos.

Deep Dive: Warum viele Barrieren mit UX beginnen

7 extrem praxisnahe Tipps für UX-Designende

  1. Plane Fokus-States sichtbar ein
    Nicht nur Hover-Zustände, auch Fokus-Zustände müssen visuell klar erkennbar sein.
  2. Verwende sinnvolle ARIA-Rollen und HTML-Strukturen
    Kein <div> für alles. Nutze <button>, <form>, <label>, <fieldset> korrekt.
  3. Vermeide leere oder kryptische Links
    „Hier klicken“ ist kein Linktext. Stattdessen: „Weingläser mit kurzem Stiel ansehen“.
  4. Setze Überschriftenhierarchien korrekt
    Beginne mit <h1>, dann logisch runterbrechen. Keine Sprünge von <h1> zu <h4>.
  5. Vermeide komplexe Komponenten ohne Tastaturbedienung
    Karussells, Tabs oder Modals? Nur, wenn sie vollständig tastatur- und screenreader-fähig sind.
  6. Teste mit echten Nutzer*innen – nicht nur mit Tools
    Nur echte Tests zeigen, was funktioniert. Axe oder Lighthouse reichen nicht.
  7. Bilde dich weiter – z. B. zu Inclusive Design
    Einsteigerfreundlich: Inclusive Design Principles, edX-Kurs zu barrierefreier UX.

Was Designer*innen sofort tun können

Oliver Vaupel bringt es auf den Punkt: „Was man morgen schon tun kann? Farbkontraste prüfen, Fokus-Styles einbauen und Tastaturnavigation testen – alles Designaufgaben.“

Sandra ergänzt: „Die meisten Barrieren entstehen, weil UX-Teams Barrierefreiheit zu spät denken. Dabei sind 64 % der WCAG-Kriterien direkt durch UX beeinflussbar – ganz ohne Code.“

Fazit: UX ohne Barrierefreiheit ist kein UX

Barrierefreiheit ist keine optionale Verbesserung – sie ist Grundbedingung guter User Experience. Wer inklusiv denkt, denkt besser. Die Live-Beispiele machen klar: Was in Prototypen oft clean und intuitiv wirkt, wird für blinde Nutzende schnell zur Sackgasse. Doch wer früh testet, konsequent semantisch arbeitet und echte Nutzer*innen einbezieht, kann Barrieren vermeiden – und Erlebnisse schaffen, die wirklich für alle funktionieren.

Was meinst du zu den gezeigten Beispielen? Hast du selbst schon Barrierefreiheit in deinen Projekten getestet – oder sogar echte Nutzende eingebunden?
Teile diesen Artikel gerne via Social Media und lass uns deine Meinung dazu wissen. Wir freuen uns auf dein Feedback.