iOS Barrierefreiheit // accessibility: VoiceOver

Liebes Tomorrow-Team,

ich bin ein blinder Nutzer von Tomorrow und nutze VoiceOver auf iOS. VoiceOver ist ein Screen Reader, der die Inhalte auf dem Bildschirm vorlesen kann. Damit dies optimal funktioniert, müssen kleine Anpassungen bei der Programmierung der App vorgenommen werden. Ich habe die App einmal umfangreich auf ihre Zugänglichkeit für VoiceOver getestet:

TAB: KONTOÜBERSICHT

Fehlende VoiceOver-Labels bei Buttons:
Viele Buttons haben kein VoiceOver-Label und lesen stattdessen den Namen der Bilddatei vor. Einzelnen Elementen kann man VoiceOver-Labels geben. Die Labels werden nicht visuell dargestelt und nur für VoiceOver relevant und sichtbar. Sie ähneln dem Alttext in HTML. Folgende Buttons benötigen ein VO-Label:
- Profile-Button (ohne Profilfoto) = „IcProfile“ → VO-Label: „Profil“
- Profile-Button (mit Profilfoto) = „Taste“ → VO-Label: „Profil“
- Insights-Button = „IcInsights“ → VO-Label: „Insights“
- Mehr-Button (neben „Geld senden“ und „Insights“) = „IcMore“ → VO-Label: „Mehr“
- Suchen-Button (im Bereich der Umsätze) = „IcSearch“ → VO-Label: „Suchen“

Im Bereich zwischen Kontostand und „Geld senden“-Button liest VoiceOver folgendes vor: „Du hast diesen Monat 100 Meter hoch 2 mit Tomorrow geschützt.“ Besser wäre natürlich „Quadratmeter“ statt „Meter hoch 2“.

TAB: POCKETS

Beim Erstellen eines Pockets sind die Grafiken für VoiceOver nicht erreichbar. Dort wäre es Sinnvoll, dass beim Beheben des Problems auch gleich entsprechende Alttexte / VoiceOVer-Labels vergeben werden (Baum mit Laterne, Berg im Nebel, Hochhaus, Kind mit Regenschirm etc.).

Beim tippen auf ein Pocket in der Pocket-Übersicht liest VoiceOver „Urlaub, 400,00€, 1000 €, gespart, Ziel“. Optimaler wäre „Urlaub, 400,00 € von 1000,00 € gespart.“ Zudem würde ich den Status in Prozent auch noch mit rein nehmen. „Urlaub, 400,00€ von 1000,00 € gespart. Sparziel zu 40 Prozent erreicht“.

In allen Bereichen, die über einen Zurück- oder Schließen-Button verfügen, wäre es praktisch auch die VoiceOver-Geste für „Zurück“ zu unterstützen. In iOS wird diese als „Zickzack Geste mit zwei Fingern für zurück“ betitelt. Blinde nutzer können also zwei Finger auf das Display auflegen und dann eine Zickzack-Bewegung ausführen und es verhält sich analog zu einem Zurück- oder Schließen-Button.

TAB: IMPACT

Fehlende VoiceOver-Labels bei Buttons:

  • Info-Button = „IcInfo“ → VO-Label: „Info“

Visuell steht z.B.: „93 Kilogramm weniger CO2 durch deine Unterstützung von Kleinbauern.“ Für VoiceOver ist dieser Satz leider in zwei Elemente unterteilt und das Wort CO2 wird auch nicht optimal vorgelesen: 1. Element „93 Kilogramm“ dann muss manuell zum nächsten 2. Element navigiert werden „weniger CO tiefgestellt 2 durch deine Unterstützung von Kleinbauern.“

Ich hoffe das Feedback hilft und findet seinen Weg in zukünftige Updates :slight_smile:
Bei Fragen oder weiteren Hilfestellungen, meldet euch gerne bei mir!

Viele Grüße
Daniel Grodzki

14 Like

Hi @bisDaniel :slight_smile:
Vielen lieben Dank für dein sehr wertvolles Feedback und die Mühe, die du in das intensive Testen der App gesteckt hast. Ich leite deine Erkenntnisse direkt an unsere Entwicklerinnen weiter. Sollten noch Rückfragen aufkommen, würde ich noch einmal auf dich zukommen.

6 Like

In diesem Punkt muss ich mich verbessern, in den meisten Bereichen wird diese Funktion unterstützt. War evtl. ein Bug von iOS. Im Menü unter dem Mehr-Button (Umsätze durchsuchen, Kontoauszug, Freund:in einladen) funktioniert die VoiceOver-Geste „Zurück“ allerdings tatsächlich nicht und es existiert auch keine Alternative wie ein Zurück-, Schließen- oder Abbrechen-Button.

Bei der Nutzung ohne VoiceOver lässt sich das Menü durch ein Tippen oberhalb des Menüs bzw. durch ein wischen schließen. Die Wischgesten lassen sich mit VoiceOver zwar auch simulieren, aber das Wissen darüber ist nicht sehr verbreitet. Viele Nutzer:innen von VoiceOver kämen an dieser Stelle also nicht mehr aus dem Menü raus, es sei denn sie wählen eine der Menü-Optionen aus.

Lösungsansätze: (am besten eine Kombination aus diesen)

  • VoiceOver-Geste für „Zurück“ implementieren
  • Zurück-, Schließen- oder Abbrechen-Button (mit VO-Label) einbauen
  • Einen nur für VoiceOver sichtbaren Button einbauen. Häufig wird dafür auch der Bereich oberhalb des Menüs genutzt, sodass die ursprüngliche Idee beibehalten wird. Sehende Nutzer:innen tippen auf diesen Bereich und das Menü schließt sich. Blinde Nutzer:innen tippen auf diesen Bereich und VoiceOver liest z.B. „Schließen“ vor. Und dann können sie besagte Funktion ausführen.

LG Daniel :slight_smile:

2 Like

Seit gestern nutze ich Together. Der Umschalter zwischen dem eigenen Konto und dem gemeinsamen Konto kann nicht mit VoiceOver bedient werden. VoiceOver erkennt beide Button als ein einziges Element. Es wird „Dein Konto, ausgewählt, Gemeinsam 0,00€“ vorgelesen d.h. es wird aktuell mein Konto + Umsätze angezeigt. Beim Versuch die Schaltfläche zu aktivieren passiert nichts.

Lösungsansatz:

  • Es sollten für VoiceOver-erkennbar zwei Separate Elemente sein. Im Bereich Profil habt ihr das beispielsweise vorbildlich umgesetzt. Dort lässt sich ja ebenfalls zwischen „DeinKonto“ und „Gemeinsam“ umschalten, um sich die jeweilige IBAN anzeigen zu lassen.

LG Daniel :slight_smile:

6 Like

Moin Tomorrow-Team,

im Bereich der Insights werden die Kategorien, deren Beträge und deren prozentuale Anteile aufgelistet. Die Kategorie und der zugehörige Betrag sind für VoiceOver optimal in einem Element Zusammen gefasst, sodass z.B. " Shopping, -20,00€" vorgelesen wird. Der zugehörige Prozentwert („Status: 40%“) ist allerdings ein eigenes VO-Element. Ich persönlich finde es sehr praktisch, wenn möglichst viele Elemente, bei denen es selbstverständlich auch Sinn ergibt, zusammen gefasst werden, sodass es in Summe weniger Elemente für VoiceOver sind. Je mehr einzelne Elemente es sind, desto fummliger wird es leider in der Bedienung mit einem Screen Reader. Es besteht zudem das Risiko das nicht klar wird, welche Elemente sich jeweils aufeinander beziehen. „Shopping, -20,00€“, „Status: 40%“, „Lebensmittel, -25,00€“. Beziehen sich die 40% auf Shopping oder Lebensmittel? In der Tomorrow-App ist es tatsächlich nicht direkt problematisch, da es sehr gradlinig aufgereiht ist und VoiceOver die korrekte Reihenfolge einhält. Das ist in komplexeren Designs bei anderen Apps oftmals ganz katastrophal. Es bleibt allerdings auch hier ein gewisses Restrisiko bzgl. der Verwechslungsgefahr.

Lösungsansatz:

  • Kategorie, Betrag und Prozentwert in ein VO-Element/Container packen. VoiceOver könnte dann z.B. folgendes vorlesen: „Shopping, -20,00€, Das sind 40% deiner Gesamtausgaben für diesen Monat.“

LG Daniel :slight_smile:

2 Like