Wenn Menschen auf Barrieren stoßen - sei es durch Behinderung, Alter oder Situation -, wird ihnen volle gesellschaftliche Teilhabe und ein selbstbestimmtes Leben erschwert. Ziel digitaler Barrierefreiheit ist es, allen Menschen zu ermöglichen, Benutzeroberflächen ohne Hilfe zu verstehen und zu bedienen. In diesem Artikel zeige ich vier Bereiche, mit denen man diesem Ziel deutlich näher kommt.
Barrierefreiheit bedeutet Zugänglichkeit bzw. die Abwesenheit von Barrieren bei Produkten und Dienstleistungen und spielt besonders im Bereich digitaler Angebote eine wichtige Rolle. Ein zentraler Schritt hin zu einer Gesellschaft, in der ALLE Menschen selbstbestimmt leben können, ist die barrierefreie Zugänglichkeit von Informationen und Produkten. Davon profitieren nicht nur Menschen mit Behinderungen. Barrieren können jeden betreffen - dauerhaft, etwa durch Alter oder Beeinträchtigung, vorübergehend durch Verletzungen oder situativ im Alltag. Ein Blick in die WCAG (Web Content Accessibility Guidelines) hilft dabei, Produkte und Services zugänglicher zu gestalten.
Im Zuge des Barrierefreiheitsstärkungsgesetzes, das ab Mitte 2025 greift, habe ich mir auch unsere eigene Website genauer angesehen: Wo sind wir bereits gut aufgestellt, wo gibt es noch Potenzial? Das Feld der Barrierefreiheit ist groß. In diesem Beitrag möchte ich deshalb einige Bereiche zeigen, die sich in der Praxis vergleichsweise leicht umsetzen lassen und die Zugänglichkeit von Websites, Software und Apps deutlich verbessern. Barrierefreiheit gehört für uns fest zum App Design und ist kein nachträgliches Add-on, sondern Teil des Gestaltungsprozesses.
Schauen wir uns also die vier ausgewählten Bereiche an:
Brauchst du Unterstützung bei einem Designprojekt?
Bei Cayas Software bringen wir gerne unsere Erfahrung mit ein - gemeinsam mit unserem UI/UX-Design-Team.
Mehr zu unseren Designleistungen
Farben spielen in Kommunikation und Alltag eine wichtige Rolle. Dabei darf man aber nicht vergessen, dass Farben nicht von allen Menschen gleich wahrgenommen werden. Menschen mit Farbsehschwäche haben beispielsweise Schwierigkeiten, bestimmte Farben sicher zu unterscheiden. Damit Informationen dennoch eindeutig verstanden werden, sollten Farbinformationen immer durch Text und/oder Symbole ergänzt werden. Ein gutes Beispiel sind Fußgängerampeln: Das gehende oder stehende Männchen unterstützt die Farbe und macht den Status auch für Personen mit Farbsehschwächen verständlich.
Die Grafik links zeigt, wie eine Person ohne Einschränkung eine Fußgängerampel wahrnimmt. Rechts sieht man die Perspektive einer Person mit Rot-Grün-Schwäche. Ohne die ergänzenden Symbole wäre der Ampelstatus deutlich schwerer zu erfassen.
Was im Straßenverkehr gilt, gilt auch im digitalen Raum: Informationen müssen für alle verständlich zugänglich sein. In einer Software-Anwendung reicht es zum Beispiel nicht aus, ein fehlerhaftes Eingabefeld nur mit einem roten Rahmen zu markieren. Zusätzlich braucht es textliche und möglichst auch symbolische Hinweise, damit die Bedeutung des Fehlers klar vermittelt wird.
Wie die Grafik zeigt, wird das fehlerhafte Eingabefeld nicht nur rot umrandet, sondern zusätzlich hellrot hinterlegt und mit einer textlichen Fehlermeldung versehen. Ein ergänzendes Symbol unterstützt diese Information. Ohne diese Mehrfachcodierung wäre die Fehlermeldung nicht für alle Nutzer verständlich.
Ein weiterer wichtiger Punkt ist der Kontrast zwischen Schriftfarbe und Hintergrund. Je geringer der Kontrast, desto schlechter lassen sich beide voneinander unterscheiden. Selbst für Menschen ohne Sehbeeinträchtigung sind schwache Kontraste schwer zu lesen. Manche Farbkombinationen sind zusätzlich problematisch, weil sie die Lesbarkeit massiv verschlechtern. Weiß auf Schwarz ist in der Regel problemlos lesbar. Hellgrau auf etwas dunklerem Grau wirkt dagegen sehr schwach. Rot auf Grün ist zwar kontrastreich, erzeugt aber einen unangenehmen „Flimmereffekt“, der die Lesbarkeit stark einschränken kann.
Auch die Wahl der Schrift sollte aus einer Accessibility-Perspektive betrachtet werden. Wichtig ist, dass Buchstaben klar voneinander unterscheidbar sind. Wenn Zeichen einander zu ähnlich sehen, sinkt die Lesbarkeit. Bei manchen Schriften können beispielsweise das große I, das kleine l und die Ziffer 1 sehr ähnlich aussehen.
Eine Schrift mit klar unterscheidbaren Zeichen - wie im rechten Beispiel - ist daher sehr wichtig für die eindeutige Informationsvermittlung. Wenn zusätzlich die von den WCAG empfohlene Mindestschriftgröße eingehalten wird, lassen sich Barrieren schnell reduzieren.
Der Fokuszustand ist für Barrierefreiheit entscheidend - insbesondere für Menschen, die mit der Tastatur navigieren. Ein klarer visueller Fokus hilft Nutzern dabei, jederzeit zu verstehen, wo sie sich innerhalb einer Oberfläche befinden und wie sie sich sicher durch Formulare und Navigation bewegen können. Ein deutlich sichtbarer Fokuszustand, etwa über einen breiten Rahmen oder eine starke Hervorhebung, zeigt sofort, ob man sich gerade auf einem Link, einem Menüeintrag oder einem Formularfeld befindet.
Inzwischen hat sich diese Art der Fokusdarstellung auch bei öffentlichen Stellen etabliert. Eingabefeld, Menüpunkt oder Button werden klar, farbig und deutlich umrahmt, sodass der Fokuszustand sofort zu erkennen ist.
Es gibt viele Wege, eine Website oder Anwendung zu bedienen: per Maus, Stift, Tastatur oder Finger. Wenn eine Anwendung ausschließlich per Tastatur bedient wird, spielen Größe und Abstand von Interaktionselementen eine geringere Rolle, weil die Fokusreihenfolge die Navigation vorgibt. Bei Bedienung mit Maus, Stift oder Finger sieht das anders aus. Kleine oder dicht platzierte Elemente können dann schnell zur Hürde werden - besonders für Menschen mit motorischen Einschränkungen.
Auch hier lohnt sich der Blick in die WCAG. Dort wird eine Mindestgröße für Touch-Ziele definiert. Sie sorgt dafür, dass interaktive Elemente groß genug dargestellt und mit ausreichend Abstand zueinander platziert werden. Das reduziert Fehlbedienungen deutlich.
Ihnen gefällt, wie wir die Dinge angehen?
Dieser Blog soll einen kleinen Einblick in unseren Alltag geben, wenn wir Designaufgaben übernehmen - ganz gleich, ob wir eine App im Full-Service entwickeln oder unsere Expertise gezielt als EaaS einbringen.
Mehr zu unseren Designleistungen
Eine Website besteht aus Texten, Bildern, Videos, Audiodateien und vielem mehr. Für Menschen ohne Einschränkungen ist das in der Regel kein Problem. Damit Webinhalte aber auch für Menschen zugänglich sind, die assistive Technologien nutzen, müssen Seiten mit semantischem HTML strukturiert werden. Nur so kann ein Screenreader die Struktur einer Seite erfassen und Inhalte sinnvoll wiedergeben. Semantisches HTML ist die Grundlage digitaler Barrierefreiheit im Web. Es schafft klare Elemente, Überschriften und Abschnitte, die von assistiven Technologien interpretiert und beispielsweise per Tastatur sinnvoll durchlaufen werden können.
Damit auch Bildinhalte sprachlich vermittelt werden können, müssen Bilder und Grafiken im HTML mit Alternativtexten versehen werden. Diese können von assistiven Technologien erfasst und vorgelesen werden. Je klarer ein Bild beschrieben wird, desto besser kann sich eine sehbeeinträchtigte Person vorstellen, was darauf zu sehen ist. Diese kleine Ergänzung im Code ist ein großer Schritt Richtung Barrierefreiheit.
Zusätzlich zum semantischen HTML zeigt diese Grafik auch, wie Farbe, Form und Text gemeinsam auf mehreren Ebenen Informationen transportieren. Wenn semantisches HTML in bestimmten Fällen nicht ausreicht, kann es durch ARIA (Accessible Rich Internet Applications) ergänzt werden. ARIA-Attribute können interaktive Elemente beschreiben, Rollen definieren und zusätzliche Hinweise für assistive Technologien geben. Richtig eingesetzt verbessert ARIA die Nutzung durch Screenreader deutlich. Wichtig ist aber: ARIA ist nur eine Ergänzung und sollte sparsam verwendet werden. Während semantisch korrekte HTML-Elemente Tastaturverhalten, Rollen und Zustände bereits nativ mitbringen, muss dieses Verhalten bei ARIA-Attributen häufig zusätzlich selbst nachgebaut werden.
Um unsere eigene Website auf Barrierefreiheit zu prüfen, habe ich nach einem Online-Werkzeug gesucht, das dabei hilft, Hindernisse sichtbar zu machen. Dabei bin ich auf den Barrierefreiheitstest von Expert.de gestoßen. Das Tool überprüft wichtige Parameter wie:
Zusätzlich werden Kontrastverhältnisse geprüft, die Navigation in Tabellen und Listen bewertet, Untertitel in Videos erkannt und kontrolliert, ob eine gültige Sprache für Screenreader angegeben wurde. Zur Prüfung muss lediglich die URL der zu testenden Seite eingegeben werden. Anschließend wird das Ergebnis in Listenform ausgegeben.
Bei der Prüfung unserer eigenen Website haben wir festgestellt, dass an einigen Stellen der Kontrast zwischen Schriftfarbe und Hintergrund nicht ausreichend war. Außerdem gab es kleinere Inkonsistenzen in der Navigation, die sich schnell beheben ließen. Da automatisierte Tests nur bestimmte Accessibility-Probleme erkennen, empfehlen sich zusätzlich immer auch manuelle Tests. Genau das habe ich ebenfalls gemacht: Maus beiseite, Website nur mit der Tastatur bedient. Dabei fiel auf, dass der Fokuszustand noch nicht durchgängig genug ausgeprägt war und hier Verbesserungspotenzial besteht.
Wenn man sich ernsthaft mit barrierefreien Websites beschäftigt, wird schnell klar: Es geht nicht nur darum, eine schöne Seite zu gestalten. Auch geeignete Farben, Schriften und sinnvolle Elementgrößen tragen dazu bei, Websites, Anwendungen und Software für alle Menschen zugänglicher zu machen. Mit wenigen gezielten Maßnahmen lässt sich bereits viel erreichen. Wer visuelle Regeln einhält und Inhalte technisch sauber strukturiert, verbessert nicht nur die Zugänglichkeit des Produkts, sondern auch seine Reichweite. Denn mehr Menschen fühlen sich angesprochen und verstanden. Wenn Barrierefreiheit also von Anfang an in die Konzeption eines Produkts oder einer Website einfließt, ist das ein großer Schritt in Richtung wirklich guter User Experience.
Wenn Sie es bis hier geschafft haben, gehen wir davon aus, dass Sie ein gewisses Interesse an unserer Arbeit gewonnen haben. Das freut uns. Geben Sie uns gern Feedback oder sprechen Sie mit uns über Ihr Projekt.
Lassen Sie uns reden
Digitale Barrierefreiheit bedeutet, Informationen und Benutzeroberflächen so zu gestalten, dass sie von möglichst allen Menschen verstanden und genutzt werden können - unabhängig von Behinderung, Alter oder Nutzungssituation.
Besonders wirksam sind gute Kontraste und lesbare Schrift, klar erkennbare Fokuszustände, ausreichend große Touch-Ziele sowie semantisches HTML und sinnvolle Unterstützung für Screenreader.
Weil assistive Technologien wie Screenreader nur dann sinnvoll durch Inhalte führen können, wenn Struktur, Rollen und Bildbeschreibungen technisch sauber hinterlegt sind.
Als UI/UX Designerin bin ich für alle Themen rund um Design und Nutzungserfahrung zuständig. Unsere Kunden unterstütze ich mit meinem Gespür für intuitive Nutzungsoberflächen und charmante Design- und Farbkonzepte. In meinen Blogs werde ich Einblicke in meine Arbeit geben, über UI/UX Themen sprechen und Designtrends unter die Lupe nehmen.
In der Welt des digitalen Designs spielen Begriffe wie UX-Design, UI-Design und Usability eine zentrale Rolle. Aber was genau bedeuten diese Begriffe? Und wie tragen sie gemeinsam dazu bei, digitale Produkte nicht nur schön, sondern auch reibungslos und überzeugend nutzbar zu machen?
Mobile Apps leben von einem ansprechenden und gut strukturierten Design, das Nutzern hilft, ihre Ziele zu erreichen. In diesem Artikel zeige ich, wie sich ein älteres App-Design modern und aufgeräumt neu gestalten lässt. Dabei geht es um den Designprozess und um konkrete Entscheidungen für eine nutzerzentrierte UI und UX.