UX/UI Design: Barrierefreiheit

Ein digitales Produkt ist barrierefrei, wenn auch Menschen mit Einschränkungen es ohne Probleme nutzen können.

„Barrierefreiheit ist bei uns kein optionales Extra mehr, sondern eine feste Anforderung in jedem Projekt.“

So gestaltet, dass es auch Menschen mit Sehbehinderung, Hörbehinderung oder motorischen Einschränkungen nutzen können.

„Das Formular muss barrierefrei sein, damit es auch mit dem Screenreader ausfüllbar ist.“

Der Helligkeitsunterschied zwischen Text und Hintergrund, der wichtig für die Lesbarkeit ist.

„Der Kontrast zwischen Schrift und Hintergrund reicht nicht aus, deshalb schlage ich einen dunkleren Grauton vor.“

Ein Programm, das Bildschirminhalte laut vorliest, damit blinde oder sehbehinderte Nutzer die Anwendung bedienen können.

„Bevor wir den Prototyp freigeben, testen wir die wichtigsten Abläufe mit dem Screenreader.“

Eine kurze Textbeschreibung eines Bildes, die der Screenreader vorliest, wenn das Bild selbst nicht sichtbar ist.

„Für jedes Produktbild in der App muss die Entwicklung einen passenden Alternativtext einbauen.“

Die Möglichkeit, eine Anwendung vollständig ohne Maus zu bedienen, nur mit der Tastatur.

„Wir prüfen bei jedem neuen Feature, ob die Tastaturbedienung von Anfang bis Ende funktioniert.“

Ein deutsches Gesetz, das viele digitale Produkte und Dienstleistungen gesetzlich zur Barrierefreiheit verpflichtet.

„Wegen des Barrierefreiheitsstärkungsgesetzes müssen wir die Kontraste und die Tastaturbedienung noch einmal überarbeiten.“

Die Touch-Zielgröße ist die Mindestfläche, die ein Bedienelement haben muss, damit es sich zuverlässig mit dem Finger treffen lässt.

„Laut Styleguide darf die Touch-Zielgröße eines Buttons nicht kleiner als 44 mal 44 Pixel sein.“

Die WCAG sind internationale Richtlinien, die festlegen, wie digitale Inhalte barrierefrei gestaltet werden.

„Unser Designsystem orientiert sich an der WCAG, damit alle Komponenten für möglichst viele Menschen nutzbar sind.“

Konformität bedeutet, dass etwas einer bestimmten Norm oder Richtlinie vollständig entspricht.

„Vor dem Launch prüft die Prüfstelle die Konformität der Website mit den Vorgaben der WCAG.“

Die Fokusreihenfolge legt fest, in welcher Reihenfolge Elemente markiert werden, wenn man mit der Tab-Taste durch eine Seite geht.

„Wir korrigieren die Fokusreihenfolge im Formular, weil der Fokus sonst vom Namensfeld direkt zum Absenden-Button springt.“

Der Fokusrahmen ist die sichtbare Markierung um ein Element, das gerade mit der Tastatur ausgewählt ist.

„Der Fokusrahmen darf im Designsystem nicht per CSS entfernt werden, sonst ist die Tastaturbedienung nicht mehr sichtbar.“

Die Vergrößerung ist eine Funktion, mit der Nutzer Texte und Bilder auf einer Seite größer darstellen können.

„Beim Test mit sehbehinderten Nutzern prüfen wir, ob das Layout auch bei starker Vergrößerung noch verständlich bleibt.“

Ein Untertitel zeigt den gesprochenen Text eines Videos schriftlich am unteren Bildrand an.

„Für das Erklärvideo auf der Startseite erstellen wir Untertitel, damit auch gehörlose Nutzer den Inhalt verstehen.“

Die kognitive Belastung beschreibt, wie viel Aufmerksamkeit und Denkarbeit eine Person braucht, um eine Aufgabe zu verstehen.

„Zu viele Optionen auf einer Seite erhöhen die kognitive Belastung und verwirren unerfahrene Nutzer.“

Eine Sehbehinderung liegt vor, wenn eine Person deutlich schlechter sieht als üblich, auch mit Brille oder Kontaktlinsen.

„Für Nutzer mit Sehbehinderung testen wir, ob sich alle Texte per Screenreader vorlesen lassen.“

Farbenblindheit bedeutet, dass eine Person bestimmte Farben nicht oder nur schwer voneinander unterscheiden kann.

„Wegen der Farbenblindheit einiger Nutzer kennzeichnen wir Fehlermeldungen zusätzlich mit einem Symbol, nicht nur mit roter Farbe.“

Leichte Sprache ist eine besonders einfache Form von Deutsch mit kurzen Sätzen und bekannten Wörtern.

„Die wichtigsten Schritte im Formular fassen wir zusätzlich in Leichter Sprache zusammen.“

Inklusion bedeutet, dass ein Produkt so gestaltet ist, dass möglichst alle Menschen es unabhängig von ihren Einschränkungen nutzen können.

„Inklusion ist für uns kein Extra am Ende des Projekts, sondern ein Kriterium schon im ersten Wireframe.“

Eine Prüfstelle ist eine unabhängige Einrichtung, die kontrolliert, ob ein Produkt bestimmte Vorgaben erfüllt.

„Die Prüfstelle bestätigt schriftlich, dass unsere App die Anforderungen der Barrierefreiheit erfüllt.“

Ein Barrierefreiheitstest prüft systematisch, ob eine Website oder App auch von Menschen mit Einschränkungen genutzt werden kann.

„Vor dem Rollout planen wir einen Barrierefreiheitstest mit Nutzern, die einen Screenreader verwenden.“

Eine Barriere ist ein Hindernis, das manche Nutzer davon abhält, ein Produkt vollständig zu verwenden.

„Der zu geringe Kontrast der Schaltfläche ist eine Barriere für Nutzer mit Sehschwäche.“