iOS Barrierefreiheit // accessibility: VoiceOver

bisDaniel · 27. April 2021 um 10:56

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
Bei Fragen oder weiteren Hilfestellungen, meldet euch gerne bei mir!

Viele Grüße
Daniel Grodzki

Milena · 27. April 2021 um 11:39

Hi @bisDaniel
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.

bisDaniel · 3. Mai 2021 um 15:18

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

bisDaniel · 4. Mai 2021 um 11:21

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

bisDaniel · 6. Mai 2021 um 15:38

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

bisDaniel · 28. Mai 2021 um 10:00

Moin Tomorrow-Team,

im Bereich „Karten verwaltn“ gibt es die Option zwischen der persönlichen und der Together-Karte mittels Swipen zu wechseln, um Anpassungen vorzunehmen. Für VoiceOver stellt sich das als einen Container dar und nicht als zwei Separate Elemente. Wie bereits zuvor erwähnt, kann VoiceOver zwar ein wischen simulieren, es ist allerdings sehr unüblich.

Lösungsansatz:

Mittels einer VoiceOver Rotor-Aktion ist es möglich die aktuelle UI und UX beizubehalten. Für die VoiceOver-Navigation würde das bedeuten, dass man mit einem Auf- oder Abwärtswischen auf dem Container zwischen der Auswahl wechseln kann. Hierbei ist wichtig zu verstehen, dass das links oder rechts Wischen Teil der VO-Navigation ist. Die VO-Markierung (ein Fokus-Cursor) springt dabei entweder zum vorherigen oder nächsten UI-Element. Das auf oder abwärts Wischen ist eine Interaktion mit dem Element, auf dem sich die VO-Markierung befindet, so denn eine VO-Rotor-Aktion hinterlegt ist.
Alternativ kann man die Karten aus dem Container befreien, sodass sie individuelle Elemente sind. Diese sollten natürlich dann auch aussagekräftige VO-Labels bekommen.
Möglich wäre auch eine Tab-Leiste, wie sie auch im „Profil“-Bereich verwendet wird, so dass man zwischen der eigenen und der Together-Karte umschalten kann.

LG Daniel

Milena · 31. Mai 2021 um 13:10

Lieben Dank @bisDaniel! Ist alles an unsere iOS-Entwickler*innen weitergegeben worden!

bisDaniel · 15. April 2023 um 11:31

Hey liebes Tomorrow-Team,

ich wollte einmal diesen Thread wiederbeleben und euch weiteres Feedback zur Barrierefreiheit mit dem VoiceOver Screen Reader unter iOS geben.

Bei Optionsfeldern, bei denen eine Option unter mehreren angewählt werden kann, bekommt VoiceOver kein Feedback zurück, welche der Optionen aktuell ausgewählt wurde. Das ließe sich mit einem accessibility-Label für VoiceOver lösen, dass den aktuellen Status z.B. mit dem Wort „selected“ bzw. „ausgewählt“ ergänzt. Sehende Personen haben hier natürlich die visuelle Umrandung.

Folgend einige Screenshots aus der App bei denen das der Fall ist:

Für Fragen und Tests steh ich natürlich immer gerne zur Verfügung

LG Daniel

Lauritz · 24. April 2023 um 15:03

Danke für das Feedback Daniel! Ist weitergegeben