8 Best Practices für barrierefreie Anwendungen
Autorinnen: Kira Kahlki & Julia Herrmann
Das Thema Barrierefreiheit ist aktuell durch das Barrierefreiheitsstärkungsgesetz (BFSG) wieder in den Fokus der Aufmerksamkeit gerückt. Die Auflage, dass ab Juni 2025 viele Anwendungen und Dienste barrierefrei sein müssen, bereitet vielen Menschen in der Digitalbranche Sorgen. Nicht wenige stehen vor einer riesigen Herausforderung und fragen sich: Wie soll ich das machen? Wie kann ich überhaupt für Barrierefreiheit sorgen?
Ab dem 28. Juni 2025 müssen einige Branchen die Web Content Accessibility Guidelines (WCAG) einhalten. Diese wurden von der Web Accessibility Initiative (WAI) des World Wide Web Consortium (W3C) herausgegeben und gliedern sich in drei Level: A (niedrigstes Level) – AAA (höchstes Level). Das BFSG fordert nun unter anderem mindestens die Einhaltung des mittleren Levels AA.
Doch auch wer nicht vom Gesetz betroffen ist, sollte diese Standards einhalten, denn sie sind für alle Nutzenden ein Gewinn, unabhängig davon, ob jemand dauerhaft oder temporär irgendwelchen Einschränkungen unterliegt.
In diesem Artikel sollen 8 Best Practices zeigen, dass man vor Barrierefreiheit keine Angst zu haben braucht und dass sich aus vielen kleinen Bausteinen ein Gesamtbauwerk zusammensetzen lässt, das die unterschiedlichsten Menschen willkommen heißt.
- Kontraste beachten
Ausreichende Kontraste sind insbesondere bei Texten enorm wichtig, um sicherzustellen, dass sie gut lesbar sind.
Das gilt natürlich insbesondere für Menschen mit einer Sehschwäche, doch auch alle anderen kennen Situationen, in denen beispielsweise die Sonne blendet oder man eine Sonnenbrille trägt:
Kann man dann keine Texte mehr lesen, so ist dies eine große Einschränkung. Daher sollte bei der Wahl der Farben immer geprüft werden, ob Vorder- und Hintergrund einen ausreichenden Kontrast aufweisen. Dies kann man einfach mithilfe verschiedener Web-Tools machen, beispielsweise dem Contrast Checker vom WebAIM. Level AA sieht für normal-großen Text einen Kontrast von 4,5:1 vor, für größeren Text (mehr als 18pt oder 14pt fett) sollte der Kontrast 3:1 nicht unterschreiten. Zum Vergleich: Schwarz und Weiß haben einen Kontrast von 21:1.
Möchte man noch einen Schritt weitergehen, so kann auch ein besonderes Hochkontrast-Theme für Menschen mit starker Seh-Einschränkung dabei helfen, Barrieren abzubauen.
Theme “Hoher Kontrast” in Teams (Quelle: Screenshot von MS Teams)
- Farbfehlsichtigkeiten und Doppelcodierungen
Doch nicht nur der Kontrast spielt bei der Farbwahl eine Rolle: Laut einer Mitteilung des Berufsverbands der Augenärzte Deutschlands e.V. leiden etwa 8 % aller Männer und 0,4 % der Frauen an einer Rot-Grün-Schwäche. Damit ist sie die häufigste, aber keinesfalls die einzige Farbfehlsichtigkeit. 
Doch genau diese Farben – Rot und Grün – gelten bei uns als negative und positive Signalfarben und werden entsprechend häufig genutzt, um einen Zustand anzuzeigen. Verlässt man sich ausschließlich auf Rot und Grün als Signalträger, so hat man schon jeden Zwölften verloren, wobei andere Farbfehlsichtigkeiten noch nicht einmal berücksichtigt sind.
Man sollte also immer darauf achten, dass Farben nicht die einzigen Signalträger sind. Sie sollten immer zusammen mit einem Icon oder (zusätzlich zum Icon) mit Text genutzt werden. Durch die Doppelcodierung können Normalsichtige weiterhin schnell die Farben abscannen, aber auch alle anderen können den Status sicher ablesen oder – per Screenreader – ablesen lassen.
- Alternativtexte
Nicht alle Menschen können ein Bild sehen, das auf einem Bildschirm angezeigt wird. Daher sollte man darauf achten, dass Bilder mit einem sogenannten Alternativtext versehen sind. Dieser wird von Screenreadern vorgelesen und ermöglicht es so auch seh-eingeschränkten Menschen, den Inhalt eines Bildes zu erfassen. Dabei gilt aber zu beachten, dass es verschiedene Arten von Bildern gibt:
Bilder, die einen Informationsgehalt besitzen: Der Inhalt eines solchen Bilds sollte knapp, aber präzise beschrieben werden.
Bilder, die eigentlich Verlinkungen sind: Hier sollte man darauf verzichten, das Bild zu beschreiben und stattdessen das Ziel des Links nennen.
Bilder, die nur Dekoration sind: Enthält ein Bild oder beispielsweise ein Icon oder Emoji keinerlei inhaltliche Bedeutung, sondern dient nur dazu, die Seite optisch aufzuwerten, sollte der Alternativtext leer gelassen werden. Dadurch überspringen Screenreader dieses Element.
- Minimale Klickflächen beachten
Für Klickflächen empfiehlt die WCAG eine minimale Klickfläche von 44x44px (Level AAA). 
Diese Größe empfiehlt sich generell, wenn man eine Anwendung auch per Touch steuern kann. Ein Finger ist sehr viel größer als ein Mouse-Zeiger und verdeckt viel mehr Inhalt. Aus diesem Grund sollten die Klickflächen groß genug sein, dass auch Menschen mit motorischen Einschränkungen, z.B. Zittern, aber auch einfach Menschen mit großen Fingern problemlos eine Schaltfläche treffen können, ohne unerwünschte andere Funktionen auszulösen.
Man sollte auch beachten, dass die Klickflächen nach Möglichkeit immer das gesamte Control-Feld umfassen, nicht nur einzelne Bereiche. So sollte beispielsweise bei einer Checkbox auch der Text klickbar sein und bei einer Kachel die ganze Fläche statt nur der Text.
Möchte man die Klickflächen optisch etwas weniger groß wirken lassen, so bietet sich das „Tip of the iceberg“-Prinzip an. Dabei ist die sichtbare Klickfläche kleiner als vorgeschrieben, die eigentliche Klickfläche ist aber größer und liegt als unsichtbarer Container um das Element herum. Dadurch gibt es auch genügend Abstand zwischen den Funktionen. So ist sichergestellt, dass auch wenn die Nutzenden die sichtbare Fläche nicht ganz genau treffen, immer noch die gewünschte Aktion ausgelöst wird.
- Tastaturbedienung einplanen
Auch abseits von Touch-Bedienung sollte man sich nicht auf eine Mouse als alleiniges Eingabegerät verlassen, sondern immer auch die reine Tastatursteuerung im Blick behalten.
Neben Menschen, die aus verschiedensten Gründen keine Mouse bedienen können, ist die reine Tastatursteuerung auch bei Power-Usern sehr beliebt, da sie (wenn sie richtig umgesetzt wurde) extrem effizient sein kann.
Das aktuell über die Tab-Taste fokussierte Element muss klar hervorgehoben und erkennbar sein. Daher sollte bei einem visuellen Design auch der Focused-Zustand aller bedienbarer Elemente definiert werden.
Auch die Reihenfolge, in der die einzelnen interaktiven Elemente durch das Drücken der Tab-Taste fokussiert werden, muss gut durchdacht sein: Zum einen muss jedes interaktive Element erreichbar sein, also beispielsweise alle Formularfelder, aber auch die Navigation und alle Buttons im Header oder Floating-Buttons. Zum anderen muss die Reihenfolge logisch und vorhersehbar sein.
Als Faustregel gilt: Man sollte die Leserichtung einhalten, also von links nach rechts und von oben nach unten. Bei Prozessen sollte man allerdings auch die einzelnen Schritte bedenken: Muss man beispielsweise ein Formular ausfüllen und möchte dieses anschließend bestätigen, so sollte nach dem letzten Formularfeld der Bestätigen-Button durch die Tab-Taste fokussiert werden – egal ob der Button unterhalb des Formulars oder vielleicht oben in einer Toolbar platziert ist.
Eine weitere enorme Erleichterung stellen Shortcuts dar. Mit ihrer Hilfe können die wichtigsten Funktionen jederzeit ausgeführt werden, ohne dass man mit der Tab-Taste lange springen muss. Bei der Vergabe von Shortcuts sollte man sich an die gängigen Standards halten, da viele Nutzende diese bereits kennen und intuitiv nutzen. Überschreibt man diese bekannten Shortcuts mit eigenen, kann dies zu Irritation und Fehlern bei der Bedienung führen. Für eine bessere Erlernbarkeit bietet es sich an die Shortcuts, falls möglich, direkt neben einer Funktion darzustellen oder in einer Übersicht, z.B. im Hilfe-Bereich, zu präsentieren.
- Hilfs-Properties setzen
Mithilfe von ARIA (Web) bzw. AutomationProperties (WPF) können einzelnen Elementen noch weitere Informationen mitgegeben werden, die auf der Oberfläche unsichtbar sind, von Screenreadern aber vorgelesen werden. So können beispielsweise Eingabefelder um Informationen ergänzt werden, die Sehende aus dem Gesamtbild herauslesen können (z.B. durch Anordnungen oder Überschriften), die für Menschen mit Seh-Einschränkungen, die sich immer Feld für Feld vortasten müssen, aber essenziell wichtig sind, um das Formular richtig auszufüllen.
Beispiel eines Formulars mithilfe von AutomationProperties in WPF (Quelle: Eigene Abbildung)
- Skalierbarkeit gewährleisten
Vor allem Web-Anwendungen werden heutzutage von vielen unterschiedlichen Menschen auf verschiedenen Geräten genutzt. Daher sollte man darauf achten, dass man beim Design und beim Testen verschiedene Geräte, verschiedene Größen und verschiedene Zoom-Stufen betrachtet. Fehlende Responsivität kann dazu führen, dass wichtige Elemente oder Informationen verloren gehen oder die Anwendung gar nicht mehr bedient werden kann.
Bei der Schriftgröße sollten relative Maßeinheiten wie „em“, „rem“ oder „%“ genutzt werden. Diese sind nicht fix, sondern orientieren sich an einem Grundwert. Erhöht der Nutzende diesen, so passen sich alle anderen Größen mit an. Auch verschiedene Gerätegrößen mit verschiedenen großen Viewports können durch eine Anpassung dieses Grundwerts schnell auf eine passende Größe gebracht werden.
- Beim Testen auf Barrierefreiheit achten
Auch beim Testen sollte die Barrierefreiheit immer im Blick behalten werden. So sollte die Anwendung auf verschiedenen Geräten und auf verschiedenen Zoom-Stufen ausprobiert und auch mit assistiven Geräten wie z.B. einem Screenreader getestet werden.
Werden Tests mit Nutzenden durchgeführt, so sollten auch Menschen mit verschiedenen Einschränkungen eingeladen werden. So kann wertvolles Feedback von echten Nutzenden gesammelt werden.
Fazit
Man sieht, auch wenn Barrierefreiheit zunächst wie eine unlösbare Aufgabe erscheint, so entpuppen sich die einzelnen Maßnahmen doch als gut machbar. Wenn man das Thema Barrierefreiheit schon rechtzeitig in der Projektplanung berücksichtigt und Design und Entwicklung Hand in Hand arbeiten, ist eine barrierefreie Anwendung kein Ding der Unmöglichkeit, sondern gut zu erreichen.
Und auch wenn man noch ganz am Anfang steht, sollte man sich nicht entmutigen lassen: Jede einzelne Anforderung, die man umsetzt, ist ein Gewinn für etliche Nutzer mit temporären oder dauerhaften Einschränkungen. So tragen wir Schritt für Schritt zu einer inklusiveren Gesellschaft bei, in der alle Menschen gleichermaßen teilhaben können.
Über die Autoren
Kira Kahlki (B.Sc.) ist Senior UX Designer bei der Shapefield GmbH und leitet als Branch Director den Firmenstandort Hamburg. Bereits seit 2016 begleitet Kira mittelständische sowie Konzernkunden bei der Gestaltung moderner Industrie-, Engineering-, Enterprise- sowie Pharma-Anwendungen. Ihr Fokus liegt im konzeptionellen und visuellen Design sowie der Nutzeranalyse.
Julia Herrmann (M.Sc.) ist ebenfalls Senior UX Designer bei der Shapefield. Ihre Schwerpunkte sind konzeptionelles Design und Usability Engineering für Industrie-, Enterprise- und Healthcare-Anwendungen. Darüber hinaus gilt Julia als Expertin für die Themen Joyfication, Gamification und Emotional Design.
