Die Vier Prinzipien barrierefreier App-Entwicklung nach WCAG

Das Thema barrierefreie App-Entwicklung ist eng mit den sogenannten Web Content Accessibility Guidelines (WCAG) verbunden. Die WCAG-Richtlinien sind der anerkannte Standard für barrierefreie digitale Inhalte. Obwohl diese ursprünglich für das Web entwickelt wurden, lassen sie sich auf Mobile Apps anwenden und sind die Grundlage für die meisten Gesetze mit Bezug auf Barrierefreiheit - inklusive des europäischen Barrierefreiheitsstärkungsgesetzes (BFSG), welches im Juni in Kraft tritt. Die WCAG gliedern Barrierefreiheit in vier Kategorien: Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit.
Inhaltsverzeichnis
- Wahrnehmbarkeit: Ermöglichen Sie die Nutzung aller App Funktionen über mehr als nur einen Sinn
- Aussagekräftige Alternativtexte für Icons und Bilder
- Formularfelder mit Label und Eingabehinweisen
- Ausreichende Farbkontraste
- Zoombare und anpassbare Inhalte
- Bedienbarkeit: App Eingaben über Touchscreen und alternative Eingabegeräte
- Verständlichkeit: Stellen Sie sicher dass Ihre App-Inhalte leicht zugänglich sind
- Robustheit: Erstellen Sie konsistente App Erfahrungen - egal auf welchem Gerät oder Betriebssystem
Diese Kategorien können auch auf die barrierefreie App-Entwicklung angewendet werden:
Wahrnehmbarkeit: Ermöglichen Sie die Nutzung aller App Funktionen über mehr als nur einen Sinn
Alle Inhalte und Bedienelemente einer App sollten für Nutzer wahrnehmbar sein. Diese Definition umfasst neben dem Sehsinn auch auditive oder taktile Wahrnehmungsmöglichkeiten. Konkret bedeutet dies: Eine App sollte Textalternativen für jedes Nicht-Text-Element wie zum Beispiel Bilder oder Icons, die zur Benutzung der App genutzt werden, bereitstellen. Dies ermöglicht es Nutzern, mit beeinträchtigtem Sehvermögen eine App z.B. mit einem Screenreader zu benutzen. Medieninhalte wie Videos und Audio-Formate sollten optional auch mit Untertiteln abgespielt werden können (oder Transkripte verfügbar sein).
Aussagekräftige Alternativtexte für Icons und Bilder
Alle non-verbalen Inhalte, also auch Bilder oder Icons, benötigen einen aussagekräftigen Alternativtext (Accessibility-Label). Ganz wie bei ALT Bildern bei der Webentwicklung beschreibt diese, was zu sehen ist oder welche Funktion ein Icon oder Button hat.
Formularfelder mit Label und Eingabehinweisen
Formulareingabefelder sollten ebenfalls mit einem sichtbaren Label versehen oder mit einem Accessibility Hint beschrieben werden. Dies optimiert die App-Nutzung per Screenreader
Ausreichende Farbkontraste
Um die einfache Bedienbarkeit Ihrer App auch für Nutzer mit eingeschränktem Sehvermögen oder mit Rot-Grün Sehschwäche möglich zu machen, sind ausreichend große Farbkontraste wichtig. In der Praxis stellen schwache Kontraste viele Nutzer vor große Probleme. Besonders wenn Smartphones im Freien benutzt werden, wo direkte Sonneneinwirkung die Nutzung ohnehin schon erschwert, können unzureichend starke Kontraste Probleme verursachen. Stellen Sie also sicher, dass der Kontrast zwischen Text und Hintergrund mindestens 4,5:1 bei normalem Fließtext (und 3:1 bei großen Überschriften) beträgt. Das gilt ebenso für Icons oder Bedienelemente. Verwenden Sie am besten kontrastreiche Farbpaletten und testen Sie die Darstellung auch im Dark Mode falls unterstützt. Auch sollten Farben allein nie der einzige Informationsträger sein. Das funktioniert zwar bei Verkehrsampeln, aber nur weil die Anordnung der Farben hinlänglich bekannt ist. Das heißt, anstatt von Hinweisen wie „rote Felder sind Pflichtfelder“ sollte zusätzlich ein Symbol zur Kennzeichnung genutzt werden.
Zoombare und anpassbare Inhalte
Auch sollten App-Inhalte anpassbar sein. Skalierbare Schriftgrößen oder Zoom-Funktionen, die ohne Qualitätsverlust arbeiten, spielen hierbei eine wichtige Rolle. Idealerweise unterstützt Ihre App die Einstellungen des Betriebssystems: Wenn ein Nutzer in den Geräteeinstellungen eine größere Schrift wählt, sollte Ihre App diese Einstellung respektieren und das Layout entsprechend anpassen (Responsive Design innerhalb der App). Layouts sollten flexibel sein, damit bei 200% Vergrößerung keine Inhalte abgeschnitten sind.
Bedienbarkeit: App Eingaben über Touchscreen und alternative Eingabegeräte
Die App muss auch für Nutzer mit körperlichen Einschränkungen bedienbar sein. Tastaturzugänglichkeit ist hierbei ein zentrales Kriterium: Nutzer sollten ihre App auch vollständig ohne Touchscreen, nur mit einer Tastatur oder anderen alternativen Eingabegeräten nutzen können. Dafür müssen alle interaktiven Elemente per Tabulator erreichbar sein und deutlich einen Tastaturfokus anzeigen. Ein weiterer wichtiger Aspekt sind zeitliche Limits oder automatische Abläufe. Besonders für ältere Menschen, die etwas mehr Zeit brauchen, sich über eine geladenen Bildschirm einen Überblick zu verschaffen, kann es frustrierend sein, wenn bestimmte Eingaben innerhalb eines kurzen Zeitrahmens erfolgen müssen. Dies verursacht unnötigen Stress und kann zu negativen Nutzererfahrungen führen. Hier ist es wichtig, eine App mit einer diversen Testgruppe praxisnah zu testen. Stellen Sie sicher, dass Nutzer ausreichend Zeit für Eingaben haben und dass die Möglichkeit besteht, automatisch rotierende Inhalte einfach zu pausieren. Auch stark animierte Inhalte gilt es zu reduzieren : Nichts darf so flackern, dass es z.B. im Extremfall epileptische Anfälle auslösen könnte (max. 3 Blitze pro Sekunde). Bieten Sie – falls Ihre App viele Motion-Effekte nutzt – einen Modus „Bewegungen reduzieren“ an oder respektieren Sie die systemweite Einstellung (wie iOS „Reduce Motion“).
Ein weiterer wichtiger Punkt ist die Navigierbarkeit einer App. Generell ist es für alle Nutzer von Vorteil, wenn Ihre App eine intuitive und konsistente Navigation bietet.
Verständlichkeit: Stellen Sie sicher dass Ihre App-Inhalte leicht zugänglich sind
Inhalt und Bedienung der App müssen verständlich sein. Dazu gehören: leicht lesbarer Text (angemessene Sprache, ausgewiesene Spracheinstellung pro Seite/Screen, klare Anweisungen). Verständlichkeit bezieht sich aber auch auf interaktive Elemente, die von Nutzern als Standardelement wahrgenommen werden. Buttons z.B. sollten nicht plötzlich wie Links wirken oder umgekehrt. Es ist ebenfalls wichtig Nutzer beim Ausfüllen von Formularen oder bei der Eingabe von Daten zu unterstützen: Eingabehilfen wie eindeutige Feldbezeichnungen, verständliche Fehlermeldungen und Hinweise auf von der App akzeptiere Eingaben (z.B. durch Beispiele) helfen allen Nutzern, Formulare erfolgreich auszufüllen.
Dies erstreckt sich auch auf Hilfen bei Eingabefehlern: Formulare und Eingabefelder sollten so gestaltet werden, dass fehlerhafte Eingaben erkannt und dank einfach zu verstehender Hinweise korrigiert werden können. Erkennt die App einen fehlerhaften Input (z.B. ungültiges Datumsformat in einem Datumsfeld), muss dies verständlich kommuniziert werden– am besten in Textform in der Nähe des Feldes, mit eindeutigen Hinweisen. Vermeiden Sie es, Nutzer im Unklaren zu lassen, was an einer Eingabe falsch war. Bieten Sie, wo möglich, automatische Korrekturvorschläge, Dropdown-Auswahlfelder, oder standardisierte Eingabeoptionen an, die Nutzern eine Vorauswahl bieten, um Fehleingaben zu reduzieren. Jede Beschriftung sollte klar angeben, was erwartet wird (z.B. Format eines Datums). Diese Maßnahmen helfen nicht nur Menschen mit kognitiven Einschränkungen, sondern entlasten alle App-Nutzer.
Robustheit: Erstellen Sie konsistente App Erfahrungen - egal auf welchem Gerät oder Betriebssystem
Der Begriff Robustheit bezieht sich darauf, wie eine App von verschiedenen Nutzern und auch Eingabehilfen interpretiert wird. D.h. ganz gleich auf welchem Smartphone oder Endgerät, auf welchem Betriebssystem, oder mit welcher Hilfstechnologie (z. B. Screenreader, Spracherkennung, Braille-Ausgabe usw.) Ihre App benutzt wird, die Nutzererfahrung sollte so konsistent wie möglich sein. Technisch bedeutet das: Verwenden Sie nur zugängliche Technologien und Frameworks, die gängige Accessibility-APIs unterstützen, und halten Sie sich an etablierte UX- und Design Standards. Semantisch korrekt strukturierter Code – bzw. bei plattform-spezifischer Entwicklung die vorgesehenen UI-Komponenten von iOS/Android – stellt sicher, dass assistive Tools Ihre App Inhalte korrekt interpretieren können. Auch regelmäßige Updates der App auf neue OS-Versionen gehören dazu, damit Barrierefreiheit nicht durch veraltete Technik leidet.
Die in diesem Artikel aufgelisteten Prinzipien bilden den Kompass für jede Entscheidung beim barrierefreien App Design (mehr zu den Themen Mobile App Accessibility Testing und Webseiten auf Barrierefreiheit prüfen). Es ist wichtig, alle oben aufgeführten Anforderungen während der App-Entwicklung ausführlich zu testen, um sicherzustellen, dass z.B. Screenreader diese in einer sinnvoller Reihenfolge wiedergeben. Als Faustregel gilt: wichtige Informationen oder Funktionen sollten nie ausschließlich über nur einen Sinneskanal verfügbar sein (z.B. nicht nur durch Farbe oder nur akustische Hinweise). Dies ermöglicht es Personen mit Farbsehschwäche oder Hörbehinderung, ihre App uneingeschränkt nutzen zu können.