Tipps für den Weg zur barrierearmen Mobilitäts-App

Von A nach B zu kommen, kann generell schon eine Herausforderung sein. Das fängt schon bei der Frage an, welche Verkehrsmittel mir zur Verfügung stehen. Wann stehen mir diese zur Verfügung und dann letztendlich, wie kann ich diese nutzen? Ein App kann ein nützliches Helferlein sein, um die Nutzenden bei der Beantwortung dieser Fragen zu unterstützen. Unser Anspruch ist es, dass es nicht nur eine Unterstützung, sondern auch ein Begeistern ist. Im Folgenden wollen wir ein paar praktische Tipps für die Entwicklung von barrierearmen Apps geben, ganz konkret am Beispiel der Mainzer Mobilitäts-App.

“Barrierearm” vs. “barrierefrei”

Aber vorab noch die Frage – warum eigentlich “barrierearm” und nicht “barrierefrei”? Wir haben den Anspruch, barrierefreie Apps zu gestalten und zu entwickeln. In Gesprächen mit verschiedenen Zielgruppen hat sich allerdings gezeigt, dass wir für die eine Zielgruppe sicherlich schon eine barrierefreie App zur Verfügung stellen, aber für die andere noch davon entfernt sind. Als Beispiel unterstützt unsere App die Vorlesefunktion, bei iOS VoiceOver und bei Android TalkBack. Bei der Umsetzung haben wir eng mit dem Zentrum für Zentrums für selbstbestimmtes Leben behinderter Menschen Mainz (ZSL) zusammengearbeitet, so dass wir eine valide Vorlesefunktion anbieten können. Wenn wir nun die Zielgruppe Menschen mit Unterstützungsbedarf anschauen, sind allerdings Aufgaben, wie zum Beispiel eine “Verbindung von A nach B suchen”, noch zu komplex. In Zukunft möchten wir auch hier barrierefrei sein und stehen deshalb im Austausch mit dieser Zielgruppe, um das Bedienkonzept dementsprechend anzupassen und umzusetzen.

Implementierung barrierearme Apps

Wir unterscheiden bei der Entwicklung und Konzeption in betriebssystemseitige und appseitige Barrierefreiheit.

Betriebssystemseitige Barrierefreiheit

Die Betriebssysteme iOS und Android liefern von Haus aus Funktionen, mit denen man Apps auch mit einer Sehschwäche bedienen kann. Das heißt allerdings nicht, dass man einfach sagt: “Unterstütze das jetzt und fertig!”, es müssen trotzdem noch einige Anpassungen vorgenommen werden.

Vorlesefunktion ist nicht gleich Vorlesefunktion

Bedient man Apps mit der Vorlesefunktion fällt auf, dass entweder gar nichts oder nur sehr kryptisch vorgelesen wird, oder aber, dass es auch positive Beispiele mit semantisch sinnvollen Gruppierungen und Reihenfolge der vorzulesenden Inhalte gibt. Um letzteres zu erreichen, bedarf es einer engen Zusammenarbeit zwischen Testenden, dem Bereich UX Design, der für das Bedienkonzept und Layout verantwortlich ist, und der Entwicklung.

Beim Layout achten wir darauf, dass keine Elemente übereinander gelagert sind. Sollte das doch der Fall sein, dann wird ein Layout abhängig davon, ob die Vorlesefunktion aktiv ist, optimiert dargestellt. In unserem Beispiel ist die Startansicht schlecht zu bedienen, daher zeigen wir eine optimierte Darstellung an. Außerdem werden Inhalte, die nicht genutzt werden können, ausgeblendet, bzw. andere hilfreiche Inhalte eingeblendet.

Bei der Auszeichnung der einzelnen Elemente gehen wir nach folgendem Prinzip vor:

1. Beschreiben „Was macht das Element?“ und „Was ist das Element?“. Konkret vergeben wir einen Text für ein Label (L), eine Beschreibung (B), die optional ist und eine Rolle (R). Außerdem kann man noch sagen, ob das Element versteckt sein soll.
   Als Beispiel
   L: Zwischenhalte anzeigen
   B: Zum Einblenden doppeltippen
   R: Taste

2. Nach dem Beschreiben gehen wir über die gesamte Ansicht und geben eine sinnvolle Reihenfolge und gegebenenfalls eine Gruppierung vor, also zum Beispiel „Bus 132 in Richtung Mainz Lerchenberg fährt in 5 Minuten ab. Abfahrt laut Fahrplan.”

Dark Mode

Der Dark Mode ist nicht nur schick und schont den Akku, sondern erleichtert auch erheblich die Benutzung der App. Unsere Entwickler:innen programmieren die App so, dass verschiedene Farbvorgaben verwendet werden können. Im Design erstellen wir einen Satz an Screens, die das Farbschema für den Dark Mode vorgeben. Icons und Grafiken werden eingefärbt, sodass diese in zwei Ausführungen – einmal für den Dark Mode und einmal für den Light Mode – vorliegen.

“Der Dark-Mode ist jetzt aktiv und das ist für mich eine Wohltat (optisch).“ Zitat vom ZSL

Dynamische Schriftgrößen

Last but not least: Für die betriebssystemseitige Barrierefreiheit unterstützen wir die Anpassung der Schriftgröße. Hier ist es wichtig, dass das Layout sich dynamisch an die von den Nutzenden eingestellten Schriftgröße anpasst. Als Vorgabe für die Entwicklung erstellen wir Beispiel-Screens, auf denen beschrieben ist, wie Umbrüche, neue Anordnungen oder auch Abkürzungen mit “…” umgesetzt werden sollen. Beispielsweise ist eine Abkürzung bei einer IBAN in der Mitte sinnvoller als am Ende, um diese zuordnen zu können.

Appseitige Barrierefreiheit

Die appseitige Barrierefreiheit beschreibt alles, was in der App gemacht wird, um auf verschiedene Bedürfnisse einzugehen.

Einstellungen Barrierefreiheit

In der Zusammenarbeit mit dem ZSL hinsichtlich der Verortung der Einstellungen für die Barrierefreiheit in der App, haben wir das Menü so angepasst, dass diese schnell auffindbar sind. Dort können Anpassungen an der Oberfläche, die weiter gehen als die oben beschriebenen, vorgenommen werden. Speziell im Kontext der Mobilität bieten wir hier zusätzlich noch Einstellungen an, die sich auf die Verbindungsauskunft beziehen.

Kontrastreicher Modus

Hat man dem Dark Mode implementiert, ist der Schritt zu einem extra Modus mit kontrastreichen Farben nur noch einen Katzensprung entfernt. Wir bieten in der Mainzer Mobilitäts-App diesen extra Modus an, da bei der Verwendung der Corporate-Design-Farben der Mainzer Mobilität die WCAG 2.0-Vorgaben nicht eingehalten werden können. Schaltet man allerdings in den kontrastreichen Modus, so werden WCAG 2.0-konforme Kontrastverhältnisse verwendet.

Als Tipp für alle Designer:innen, die mit Adobe XD, Figma oder Sketch arbeiten, empfehlen wir das Stark Plug-in zum Überprüfen des Kontrasts. Unser kleines Highlight: Die verschiedenen Farbmodi lassen sich zur Laufzeit der App umschalten, ohne dass diese neu gestartet werden muss.

Individuelle Einstellungen

Die in der ISO 9241-110: Grundsätze zur Dialoggestaltung beschriebene Individualisierbarkeit setzen wir mit Routenoptionen und Einstellungen zur App um. Konkret können die Nutzenden festlegen, ob sie zum Beispiel einen ebenerdigen Einstieg bevorzugen oder wie lange die minimale Umstiegszeit sein soll. Diese Einstellungen werden dann bei der Verbindungsauskunft berücksichtigt. Dies sind nur zwei kleine Beispiele. Natürlich kann man an dieser Stelle auch noch viel weiter denken und zum Beispiel den Anwendungsfall “Gib mir eine Info, wo ich einsteigen soll, damit ich gleich beim Aufzug bin.” anzeigen lassen.

Und los gehts

Letztendlich ist festzustellen, dass das Thema Mobilität und barrierearme App perfekt zusammen passen. Es macht unglaublich Spaß im Austausch mit der Zielgruppe zu analysieren, wie das Mobilitätsverhalten und die Smartphone-Nutzung ist, um dann an einem bestmöglichen Ergebnis zu arbeiten. Ein zweiter wichtiger Aspekt ist, dass man die Vorzüge und vor allem auch Bordmittel der Endgeräte voll nutzt und somit eine sinnvolle, barrierearme User Experience schafft. Wir freuen uns jedenfalls jedes Mal, wenn wir wieder ein Schrittchen mehr in Richtung barrierefreie Mobilitäts-App gehen können und glauben dennoch, dass sehr viel Potential noch gar nicht ausgeschöpft ist. Wir wollen jedenfalls dieses Potential immer weiter heben und hoffentlich gibt es ja dann nächstes Jahr einen Artikel zum Thema Mobilitäts-App für Menschen mit Unterstützungsbedarf.