Daten sind nur dann wertvoll, wenn sie für jeden verständlich sind. Oft konzentrieren wir uns im Dashboard-Design auf „Aesthetic Minimalism" oder komplexe Diagrammtypen, vergessen dabei aber eine entscheidende Nutzergruppe: Menschen mit Sehbehinderungen, Farbfehlsichtigkeiten oder kognitiven Einschränkungen.
Ich habe mein aktuelles Fleet-Management-Dashboard einer Barrierefreiheits-Kur unterzogen. Ich zeige den Vorher-Nachher-Vergleich und warum „hübsch" nicht immer „nutzbar" bedeutet.
Barrierefreiheit ist kein Feature, das man am Ende hinzufügt. Es ist Teil der Basis für exzellentes UX-Design.
Die Transformation: Was sich geändert hat (und warum)
1. Diagrammtyp: Weg vom „Donut", hin zur Balkengrafik
Vorher: Im ersten Entwurf dominierten Donut-Charts für abgelaufene Termine. Das Problem: Donut- und Tortendiagramme sind für das menschliche Auge schwer zu interpretieren. Wir müssen Winkel und Flächen vergleichen, was kognitiv anstrengend ist. Zudem sind die Legenden oft weit von den Datenpunkten entfernt, was die Orientierung erschwert. Die Informationen wirkten gedrungen, viele kleine Details lenkten ab.
Nachher: Die Donuts wurden durch horizontale Balkendiagramme ersetzt. Balken nutzen die effizienteste visuelle Variable: die Länge. Sie lassen sich präzise vergleichen. Die Labels stehen nun direkt neben den Balken (Direct Labeling), was den „Cognitive Load" massiv senkt. Die Typografie ist klarer, die Abstände großzügiger. Die Liste der „Next Readings" ist tabellarisch aufbereitet, was für Screenreader wesentlich einfacher zu interpretieren ist als lose verteilte Textboxen.
2. Farbwahrnehmung und Kontraste
Vorher: Die Farbpalette bestand aus verschiedenen Rot-, Braun- und Grüntönen. Für Menschen mit einer Rot-Grün-Schwäche (Deuteranopie/Protanopie) verschwimmen diese Farben zu einem Einheitsbrei, sodass die Bedeutung der Daten verloren geht.
Nachher: Die Farben wurden konsolidiert und mit klaren Kontrasten wie einer schwarzen Outline kombiniert. Wichtig dabei: Farbe nie als alleiniges Mittel zur Informationsübermittlung zu nutzen. Im neuen Design ist die Farbe egal, da alle Informationen wie auf der linken Seite klar strukturiert und kompakt sind oder wie rechts durch den Einsatz von Patterns eindeutig unterscheidbar sind.
3. Double Encoding schafft Sicherheit
Vorher: Die Risikobewertung war eine abstrakte gestapelte Box.
Nachher: Vorgabe war ein Ampel-System – mit einer entscheidenden Ergänzung: Symbolen. Das rote Ausrufezeichen im Kreis ist auch dann als Warnung erkennbar, wenn der Nutzer gar keine Farben sehen kann. Das nennt man „Double Encoding" (Farbe + Form). Zur einfachereren Tabellarischen Darstellung wurde die Ampel horizontal angeordnet.
Was ein barrierefreies Dashboard noch ausmacht
Über die visuelle Gestaltung hinaus gibt es Säulen für Barrierefreiheit, die oft übersehen werden:
Screenreader-Tauglichkeit
Ein Dashboard muss im Code logisch strukturiert sein. Jedes Diagramm benötigt einen Alt-Text (z. B. „Balkendiagramm zeigt 67 abgelaufene Auslesetermine"). Biete hinter jedem Diagramm eine verborgene oder umschaltbare Datentabelle an, denn Screenreader-Nutzer erfassen Tabellen viel schneller als Bildbeschreibungen.
Tastaturnavigation
Kann der/die Nutzer/in nur mit der Tab-Taste durch das Dashboard navigieren? Jeder interaktive Punkt muss einen deutlich sichtbaren Fokus-Status haben und die Reihenfolge muss logisch von oben links nach unten rechts verlaufen.
Wording
Barrierefreiheit bedeutet auch einfache Sprache: keine unnötigen Akronyme, klare Überschriften, die bereits die Erkenntnis vorwegnehmen. Z. B. statt „Termine" lieber „67 Termine sind überfällig". Bei einem Poweruser-Tool nicht immer einfach.
Fazit
Die Umstellung zeigt: Barrierefreiheit macht das Design nicht schlechter, sondern präziser. Die neue Version ist noch nicht perfekt, aber fokussierter, schneller scanbar und für eine deutlich größere Zielgruppe zugänglich.