Get best of the week

VoiceOver unter iOS: Lösen häufiger Probleme

Wenn Sie versuchen, die Anwendung für Blinde anzupassen, geht häufig etwas schief: Entweder geht die Reihenfolge verloren, oder der Fokus wird nicht erreicht. Auf der anderen Seite gibt es UX, das leicht zu übersehen ist, da Sie keine Kenntnis von möglichen Problemen haben. In diesem Artikel werden typische Probleme und ihre Lösungen behandelt.



Die Anpassung der iOS-Anwendung ist ein großes Thema, alles passte nicht in einen Artikel, deshalb veröffentliche ich sie in einer Reihe.

  1. Sprachsteuerung und VoiceOver: So passen Sie die Anwendung für Blinde oder Stillstehende an .
  2. VoiceOver unter iOS: Jedes Steuerelement verhält sich anders.
  3. VoiceOver unter iOS: Lösen häufiger Probleme.
  4. Der Unterschied zwischen der Implementierung von VoiceOver-, Voice Control- und UI-Tests. (In Bearbeitung)

Im ersten Teil haben wir uns mit der Anpassung von Anwendungen für Blinde mit VoiceOver befasst: signierte Steuerelemente, gruppiert, feste Navigation. Im zweiten Teil gingen wir weiter und untersuchten die „Merkmale“, die Kontrollen zugewiesen werden können, um ihre Arbeit für Blinde zu verbessern und die Benutzerfreundlichkeit der Anwendung allgemein zu verbessern.

Heute werden wir weiter an der Anpassung des Pizza-Bildschirms arbeiten: Wir werden die Durchforstungsreihenfolge ändern, die Kaufinformationen zusammenfassen, das modale Fenster reparieren und die Ladeanzeige verbessern.

Steuert die Nachbestellung


Wenn Sie für VoiceOver nicht die richtige Reihenfolge für die Übergabe von Steuerelementen festlegen, werden die Elemente höchstwahrscheinlich in der falschen Reihenfolge umgangen und ausgelesen, wie Sie möchten. Dies geschah beispielsweise mit den Schaltflächen „Schließen“ und „Zum Warenkorb“.

Der Bildschirm wird gescrollt und die Schaltflächen befinden sich oben UIScrollView. Es stellt sich heraus, dass VoiceOver zuerst versucht, alle darin enthaltenen Elemente zu umgehen, UIScrollViewund erst dann die oberen Schaltflächen findet. Für den Benutzer ist dieses Verhalten von VoiceOver falsch: Die Schaltflächen befinden sich oben, daher sollten Iteration und Bewertung mit ihnen beginnen.

Lassen Sie uns zunächst herausfinden, wie VoiceOver die Reihenfolge der Steuerelemente bestimmt. Er macht es so: Nimmt Elemente von einer Eigenschaft accessibilityElements. Standardmäßig sind alle viewvorhanden isAccessibilityElement = true.

Jetzt können wir die Schaltflächen am Anfang setzen, indem wir Folgendes überschreiben accessibilityElements:

override var accessibilityElements: [Any]? {
    get {
        var elements = [Any]()
            
        elements.append(contentsOf: [closeButton, cartButton])
        elements.append(contentsOf: contentScrollView.accessibilityElements)
            
        return elements
    }
    set { }
}

Gruppieren Sie durch shouldGroupAccessibilityChildren


In der Regel versucht VoiceOver, Elemente in einer natürlichen Reihenfolge zu lesen - von links nach rechts, von oben nach unten:



Wenn Sie Steuerelemente gruppiert haben, muss VoiceOver zum nächsten Element in der Gruppierung springen und nicht in Lesereihenfolge. Setzen Sie .shouldGroupAccessibilityChildren = true, und die Reihenfolge beginnt, die Nähe der Elemente zu berücksichtigen. Die Eigenschaft muss viewfür alle Elemente als übergeordnetes Element festgelegt werden.



Zeigen Sie auf das erste zu fokussierende Element


Ein weiteres Problem mit der Lesereihenfolge besteht darin, dass VoiceOver beim ersten Öffnen des Bildschirms das Element oben links auswählt. Meistens ist dies die Zurück-Taste. Auf diese Weise können Sie einerseits schnell zum vorherigen Bildschirm zurückkehren, wenn Sie einen Fehler machen. Auf der anderen Seite verlieren wir auf diese Weise unser Verständnis dafür, auf welchem ​​Bildschirm wir uns befinden. Sie können die Situation korrigieren, wenn Sie den Fokus manuell auf das gewünschte Steuerelement einstellen.

Was macht Apple?
Es ist seltsam, dass UINavigationControllerder Fokus auf die Schaltfläche "Zurück" gelegt wird. Ich könnte ihn auf den Titel des sich öffnenden Bildschirms setzen. Aus der Sicht der Bequemlichkeit scheint es mir richtig, sich auf den Titel oder das erste Steuerelement zu konzentrieren, sodass wir mehr Informationen über den neuen Bildschirm geben. Sie können mit einer Peeling- Geste zurückkehren .

Sie können den Fokus mithilfe der Alarmfunktion neu anordnen UIAccessibility.post(notification: …). Es werden zwei Parameter benötigt:

  • Eine der Arten UIAccessibility.Notification.
  • Das Objekt, auf das die Warnung angewendet werden soll. Meistens ist dies eine Zeile mit Text oder einem Objekt, das nach der Benachrichtigung ausgewählt werden muss.

Sie können den Header in viewDidLoad fokussieren:

override func viewDidLoad() {
    super.viewDidLoad()
        
    UIAccessibility.post(notification: .screenChanged,
                         argument: titleLabel);
}

Sie können das Objekt übertragen, auf das Sie den Fokus legen möchten, oder den auszusprechenden Text.

Arten von Warnungen für Objekte


  • .screenChanged — , . - .
  • .layoutChanged — . , , «» .
  • .announcement — . . , . , .

    DispatchQueue.main.asyncAfter(deadline: .now() + .milliseconds(100)) {
		UIAccessibility.post(notification: .announcement,
                         argument: text)
}
  • .pageScrolled — .UIScrollView « 3 5», . , , .
  • .pauseAssistiveTechnology .resumeAssistiveTechnology —  VoiceOver.

Modale Fenster nativ anzeigen


Bei der Arbeit mit VoiceOver können (und werden) alle in der Entwicklung zulässigen Pfosten abgeschossen werden. Zum Beispiel haben wir einen Nachrichten-Feed erstellt und damit die Nachrichten von unten beginnen, haben wir beschlossen, UITableViewalle Zellen umzudrehen und dann umzudrehen. Optisch ist alles in Ordnung, aber die Liste wird in VoiceOver mit drei Fingern auf den Kopf gestellt.

Wir hatten auch das Problem, dass wir die Zutaten in keiner Weise ändern konnten, da es nicht möglich war, den Fokus auf das Fenster zu richten. Es geschah, weil wir die Ansicht zeigten und nicht UIViewControllermit einem speziellen UIPresentationController.VoiceOver, den es adressierte .firstResponder, und unserer viewnicht.



Wenn keine Zeit zum Umschreiben vorhanden ist, können Sie viewdie Eigenschaft für festlegen accessibilityViewIsModal. Dann wird sich VoiceOver nur darauf konzentrieren view.

override var accessibilityViewIsModal: Bool {
    get { return true }
    set {}
}

Um ehrlich zu sein, hat es bei mir und uns nie funktioniert UIPresentationController.

Unsichtbare Rahmen ausrichten


Die Lesereihenfolge wird nach Frames gezählt und führt manchmal zu unerwarteten Ergebnissen. Zum Beispiel haben wir den Rahmen der Schaltfläche "i" vergrößert, um das Klicken zu vereinfachen. Es stellte sich jedoch heraus, dass es höher als der Rahmen für den Pizzanamen war, sodass das erste Fokuselement die Schaltfläche „i“ war. Obwohl es klein ist, ist es rechts und im Allgemeinen nicht so wichtig.



Sie können die Lesereihenfolge ändern accessibilityElements, aber ich werde einen anderen Weg zeigen. VoiceOver verwendet die Eigenschaft accessibilityFrame, standardmäßig entspricht sie dem üblichen Frame. Es gibt verschiedene Lösungen:

  1. Überschreiben Sie die Steuerunterklasse und geben Sie einen reduzierten Wert zurück.
  2. Stellen Sie den richtigen Rahmen außen ein.
  3. Stellen Sie den Rahmen einfach so ein, dass er bündig mit der Beschriftung abschließt.

Es ist jedoch wichtig, dass sich dieser Rahmen in den Koordinaten des Bildschirms befindet. Für die einfache Konvertierung gibt es eine Funktion UIAccessibility.convertToScreenCoordinates.

Es kann auch zum Kombinieren von Steuerelementen verwendet werden. Zum Beispiel müssen Sie den Umschalter und seine Signatur kombinieren, damit das Element größer wird, es einfacher zu klicken ist und unnötige Duplikate verschwinden.

override func layoutSubviews() {
        super.layoutSubviews()
        repeatSwitch.accessibilityLabel = repeatLabel.text
        repeatSwitch.accessibilityFrame = UIAccessibility.convertToScreenCoordinates(
                repeatSwitch.frame.union(repeatLabel.frame).insetBy(dx: -12, dy: -12),
                in: repeatSwitch.superview!)
}

Ich habe den Fokus auch mit vergrößert .inset, es ist bequemer zu drücken.



Mit dem Rahmen AccessibilityContainerkönnen Sie Grafiken und Tabellen zur Verfügung stellen.

Fassen Sie die Hauptaktion zusammen


Hier geht es mehr um UX, aber ich werde es Ihnen trotzdem sagen. Eine Person mit normaler Sicht liest leicht alle Einstellungen vom Bildschirm, aber für diese blinde Person müssen Sie alle Steuerelemente manuell sortieren. Sie können den Vorgang vereinfachen und alle Änderungen auf der Schaltfläche Kaufen zusammenfassen.

Zum Beispiel, um die Schaltfläche "Kaufen" zu erhalten. Speck hinzufügen, Jalapenos entfernen. Preis 434₽ », Sie müssen nichts Ungewöhnliches in den Code schreiben, sammeln Sie einfach die Zeile mit hinzugefügt / entfernt:

accessibilityTraits = .button
accessibilityLabel = ""
accessibilityValue = " ,  .  434₽"

Und vergessen Sie nicht, die Download-Anzeige zu unterschreiben


Wenn Sie nach dem Hinzufügen eines Produkts zum Warenkorb die Benutzeroberfläche kurz blockieren und etwas herunterladen, vergessen Sie nicht, die Download-Anzeige verfügbar zu machen:

  1. Verwenden Sie die Warnung, um sich auf die Anzeige zu konzentrieren.
  2. Geben Sie dem Fokus einen Namen. Zum Beispiel Laden.
  3. Setzen Sie es accessibilityViewIsModal.
  4. Lassen Sie mich wissen, wenn der Download abgeschlossen ist.

Wenn Sie nach dem Laden einen neuen Bildschirm anzeigen, wechselt VoiceOver selbst den Fokus, sodass klar wird, dass der Download beendet wurde. In komplizierteren Fällen können Sie dies explizit sagen oder sogar Vibrationen hinzufügen .

Was macht Apple?
Interessanterweise funktioniert Safari in iOS 13 damit: Während des Ladens einer Seite wird jede Sekunde ein Klick ausgeführt, und wenn eine Seite geladen wird, ist dies * woop-dumm *. Leider ist dies von der API-Seite noch nicht verfügbar. Wir warten auf iOS 14.


Um den Bildschirm anzupassen, haben wir verschiedene Ansätze verwendet: Die Reihenfolge der Schaltflächen wurde geändert, das erste Element für den Fokus angegeben, das modale Fenster korrigiert, die Einstellungen auf der Hauptschaltfläche zusammengefasst und an der Benutzerfreundlichkeit der Anwendung gearbeitet. Dieses Wissen reicht aus, um nahezu jede Anwendung anzupassen. Gehen Sie geradeaus.

Das nächste Mal werde ich über den Unterschied zwischen der Implementierung von VoiceOver-, Voice Control- und UI-Tests sprechen.
Um den nächsten Artikel nicht zu verpassen, abonnieren Sie meinen Dodo Pizza Mobile-Kanal .

More articles:


All Articles