Das Testen von Websites und nativen Apps auf Mobilgeräten ist genauso wichtig wie das Testen auf einem Desktop. Vielleicht sogar noch kritischer, da so viele Menschen nur über Handheld-Geräte auf das Internet zugreifen.
Unabhängig davon, ob Sie ein Erlebnis für den Browser, eine native Anwendung oder beides über React Native erstellen, ist das Wissen, wie Sie Ihre App testen, ein entscheidender Teil des Projektlebenszyklus.
Sehen wir uns an, wie man auf den beiden Hauptplattformen testet; iOS und Android.
Bevor du anfängst
Es ist wichtig, dass Sie sich mit den Grundlagen der Verwendung eines mobilen Screenreaders vertraut machen, bevor Sie einen zum ersten Mal aktivieren. Andernfalls bleiben Sie möglicherweise stecken und wissen nicht, wie Sie zurückkehren sollen.
Sowohl iOS als auch Android verfügen über einen ähnlichen Basissatz an Gesten, wenn es um die Navigation geht. Suchen und Aktivieren eines Steuerelements auf dem Bildschirm. Es gibt zwei grundlegende Methoden:
- Erkunden: Platzieren Sie einen einzelnen Finger irgendwo auf dem Bildschirm und ziehen Sie ihn herum, um Inhalte zu entdecken. Dies veranlasst den Bildschirmleser, das Element anzukündigen, das sich gerade unter Ihrem Finger befindet. Es steht Ihnen frei, in jede Richtung zu erkunden.
- Wischen: Verwenden Sie einen einzelnen Finger und wischen Sie an einer beliebigen Stelle auf dem Bildschirm nach rechts. Dadurch kann der Bildschirmleser Inhaltselemente auf dem Bildschirm in der Reihenfolge von oben nach oben und von links nach rechts lokalisieren und ankündigen. Wischen Sie nach links, um Elemente in umgekehrter Reihenfolge zu finden.
Sobald sich ein Inhalt im Screenreader-Fokus befindet, tippen Sie zweimal auf eine beliebige Stelle auf dem Bildschirm, um ihn zu aktivieren .
iOS
Jedes iOS- (und iPadOS-) Gerät wird mit einem Screenreader namens VoiceOver geliefert. Wenn Sie in einem mobilen Browser testen, wäre die typische Kopplung mit Safari .
Inbetriebnahme
Um VoiceOver zu starten, gehen Sie zu Einstellungen → Bedienungshilfen → VoiceOver. Lesen Sie den Abschnitt „ Bevor Sie beginnen “ über die Grundlagen mobiler Screenreader.
Um beim Testen Zeit zu sparen, können Sie VoiceOver per Shortcut ein- und ausschalten, indem Sie dreimal die Home-Taste des iPhone/iPad drücken . Um diese Funktion zu aktivieren, gehen Sie zu Einstellungen → Allgemein → Barrierefreiheit → Barrierefreiheitsverknüpfung.
Gemeinsame Gesten
Bei aktiviertem VoiceOver sind verschiedene Gesten verfügbar. Die folgende Tabelle zeigt die verfügbaren Gesten, geordnet nach Einzel- bis Mehrfinger-Anforderungen.
| Aktion | Geste |
|---|---|
| Element auswählen/lesen | Berühren/einmaliges Antippen |
| Aktiviert das aktuell ausgewählte Element | Doppeltippen |
| Zum nächsten Element wechseln | Wische nach rechts |
| Zum vorherigen Element wechseln | Nach links wischen |
| Ziehen Sie das aktuell ausgewählte Element | Doppeltippen + lange drücken |
| Lesen unterbrechen/fortsetzen | Tippen mit zwei Fingern |
| Lesen Sie alle Elemente vom oberen Rand des Bildschirms | Wischen Sie mit zwei Fingern nach oben |
| Lesen Sie alle Elemente ab der aktuellen Position | Wischen Sie mit zwei Fingern nach unten |
| Text auswählen/abwählen | Öffnen/Schließen mit zwei Fingern |
| Scrollen Sie nach oben/unten | Wischen Sie mit drei Fingern nach oben/unten |
| Zur nächsten/vorherigen Seite navigieren | Wischen Sie mit drei Fingern nach links/rechts |
| Wählen Sie das erste oder letzte Element auf dem Bildschirm aus | Tippen Sie mit vier Fingern oben oder unten auf den Bildschirm |
VoiceOver-Rotor
Wenn Sie mit VoiceOver auf macOS vertraut sind, haben Sie wahrscheinlich den Rotor verwendet, um über bestimmte Elemente wie Überschriften oder Links zu navigieren. Dasselbe Konzept existiert für mobile Geräte, obwohl die Ausführung etwas anders ist.
So verwenden Sie den Rotor:
- Verwenden Sie eine Drehgeste mit zwei Fingern auf dem Bildschirm. Jede Option wird laut vorgelesen, während Sie Ihre Finger drehen.
- Sobald Sie die gewünschte Option gefunden haben:
- Lassen Sie Ihre Finger los, um auszuwählen.
- Wenn es sich um eine Option handelt, können Sie den Wert iterieren (z. B. Lautstärke oder Sprechgeschwindigkeit), nach oben oder unten wischen, um den Wert des ausgewählten Elements zu erhöhen/zu verringern.
Hinweis: Die unter dem Rotor verfügbaren Optionen sind kontextabhängig; nicht immer sind alle Optionen verfügbar.
Testen mit VoiceOver in einem Simulator
Wenn Ihre native App im Xcode-Simulator ausgeführt wird, gibt es drei Möglichkeiten, die Benutzeroberfläche auf Barrierefreiheitsprobleme zu testen.
1. Zugänglichkeitsinspektor
Der Xcode Accessibility Inspector ist ein Tool, das einem Webinspektor in einem modernen Browser ähnelt. Verwenden Sie es, um Teile der App-Benutzeroberfläche zu inspizieren, um Dinge wie eine Komponentenbezeichnung und label oder einen state role testen.
Öffnen Sie den Accessibility Inspector, indem Sie zu Xcode → Open Developer Tool → Accessibility Inspector gehen. Klicken Sie im Fenster Barrierefreiheitsinspektor auf das Fadenkreuzsymbol ( Punktprüfungsschaltfläche ) und bewegen Sie dann den Mauszeiger über die zu testende Benutzeroberfläche.
Im Basisbereich des Fensters können Sie nützliche Informationen sammeln. Überprüfen Sie die Daten im Abschnitt „Erweitert“ auf weitere technische Details, z. B. den aktuellen Komponentenstatus.
2. macOS-VoiceOver
Während VoiceOver nicht direkt im Xcode-Simulator verfügbar ist, ist es möglich, VoiceOver von macOS aus auszuführen, um Ihre App zu testen.
Setzen Sie dazu den Tastaturfokus auf das Simulatorfenster und aktivieren Sie dann VoiceOver. Von hier aus können Sie den virtuellen Cursor verwenden, um sich zwischen den Elementen auf dem Bildschirm zu bewegen. Um mit anklickbaren Elementen in der App zu interagieren, verwenden Sie die VO + Leertaste .
3. Laden der App auf ein Gerät
Die letzte Möglichkeit zum Testen besteht darin, die App auf Ihr eigenes physisches Gerät zu laden. Damit sollten Sie in der Lage sein, VoiceOver nativ zu verwenden und andere Tests durchzuführen, z. B. die Verwendung des Rotors.
- Schließen Sie Ihr iPhone oder iPad an Ihren macOS-basierten Computer an.
- Aktivieren Sie in Xcode die Schaltfläche Ziel ausführen.
- Wählen Sie Ihr Gerät oben im Gerätemenü aus.
Gesten
Sie können im iOS-Simulator zoomen/wischen, indem Sie die Opt -Taste gedrückt halten und mit dem Mauszeiger klicken und ziehen.
Android
Die meisten Android-Geräte werden mit einem Screenreader namens TalkBack geliefert (falls nicht, können Sie ihn über die Android Accessibility Suite installieren). Wenn Sie in einem mobilen Browser testen, erfolgt die Kopplung normalerweise mit Chrome .
Inbetriebnahme
Das Starten von TalkBack kann je nach Hersteller des Android-Telefons leicht abweichen. Gehen Sie für Google Pixel-basierte Telefone zu Einstellungen → Eingabehilfen → TalkBack. Lesen Sie den Abschnitt „ Bevor Sie beginnen “ über die Grundlagen mobiler Screenreader.
Um beim Testen Zeit zu sparen, können Sie TalkBack per Shortcut ein- und ausschalten, indem Sie beide Lautstärketasten gedrückt halten . Um diese Funktion zu aktivieren, gehen Sie zu Einstellungen → Barrierefreiheit → TalkBack → TalkBack Shortcut.
Gemeinsame Gesten
Während TalkBack aktiviert ist, sind verschiedene Gesten verfügbar. In der folgenden Tabelle sind die verfügbaren Gesten aufgeführt, geordnet nach Einzel- bis Mehrfinger-Anforderungen, einschließlich Wischgesten.
| Aktion | Geste |
|---|---|
| Element auswählen/lesen | Berühren/einmaliges Antippen |
| Aktiviert das aktuell ausgewählte Element | Doppeltippen |
| Zum nächsten Element wechseln | Wische nach rechts |
| Zum vorherigen Element wechseln | Nach links wischen |
| Scrollen Sie nach oben/unten | Zwei-Finger-Wischen nach oben/unten |
| Zum ersten Element auf dem Bildschirm springen | Hoch-runter schieben |
| Zum letzten Element auf dem Bildschirm springen | Nach unten schieben |
| Scrollen Sie einen Bildschirm nach oben | Schieben Sie von links nach rechts |
| Scrollen Sie einen Bildschirm nach unten | Schieben Sie von rechts nach links |
| Kehren Sie zum Startbildschirm zurück | Nach oben links schieben |
| Aktivieren Sie die Zurück-Taste/schließen Sie die App | Nach unten links schieben |
Testen mit TalkBack in einem Emulator
Wenn Ihre native App im Android-Emulator ausgeführt wird, können Sie den TalkBack-Screenreader zum Testen ausführen. TalkBack wird jedoch nicht standardmäßig installiert.
Installieren Sie TalkBack
Sie können TalkBack auf zwei Arten installieren:
- Melden Sie sich bei Ihrem Google-Konto im Emulator an und installieren Sie TalkBack von Google Play oder
- Laden Sie die Talkback-APK -Datei herunter von:
apk
Sobald Sie TalkBack installiert haben, aktivieren Sie es in den Barrierefreiheitseinstellungen. Verwenden Sie beim Ausführen den App-Umschalter, um zwischen der Einstellungs-App und Ihrer App zu wechseln.
Gesten
Sie können im Android-Emulator zoomen/wischen, indem Sie die Cmd -Taste gedrückt halten und mit dem Mauszeiger klicken und ziehen.
Die Inhaltserkennung kann auf zwei Arten durchgeführt werden:
- Verwenden Sie den Mauszeiger zum Klicken und Halten (langes Drücken) und bewegen Sie den Mauszeiger über den Bildschirm. Dies entspricht der Verwendung Ihres Fingers auf einem tatsächlichen Gerät.
- Verwenden Sie die Maus, um durch den Inhalt zu „wischen“ (ich fand dies umständlich/schwieriger/umständlicher als auf einem tatsächlichen Gerät und kann zu unerwarteten Ergebnissen führen.)
Unter „ Testen mit Screenreadern“ finden Sie Tipps zum Testen mit Desktop-Screenreadern!