Get best of the week

VoiceOver unter iOS: Jedes Steuerelement verhält sich anders

Hallo Habr! Kürzlich habe ich über die Anpassung von Anwendungen für blinde und bewegungslose Menschen gesprochen. Und habe es nicht beendet!

Heute werde ich Ihnen erklären, wie Sie mit Hilfe des Verhaltens das Verhalten von Kontrollen ändern accessibilityTraitsund das Leben der Blinden ein wenig angenehmer gestalten können. Es ist wichtig, die Arbeit dieser Merkmale zu kennen, um Ihre Krücken nicht zu schreiben.



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 begonnen , uns mit der Anpassung von Anwendungen für Blinde mithilfe von VoiceOver zu befassen: signierte Steuerelemente, gruppiert, feste Navigation. In diesem Artikel werden wir weiter gehen und die „Funktionen“ betrachten, die Kontrollen zugewiesen werden können, um ihre Arbeit für Blinde zu verbessern und im Allgemeinen die Benutzerfreundlichkeit der Anwendung zu verbessern.

Kontrollfunktionen - Merkmalssammlung


VoiceOver verfügt über eine Reihe von Standardfunktionen UITraitCollection, die Sie auf Steuerelemente anwenden können. Es ist wichtig, sie im Voraus zu kennen, um keine eigenen Lösungen zu finden. Ich habe sie in drei Typen unterteilt:

  1. Art der Steuerung.
  2. Der Zustand der Kontrolle.
  3. Besondere Eigenschaften von Steuerelementen.

Ich werde sofort auf einem Beispiel eines Bildschirms mit einer Pizzakarte zeigen:



Art der Steuerung


VoiceOver kennt einige grundlegende Elementtypen. Einige von ihnen sind bereits in Ihrem Projekt konfiguriert, aber ich werde Ihnen trotzdem davon erzählen.

Die Arten von Steuerelementen werden für die Navigation verwendet: Sie können mit dem Rotor schnell durch sie navigieren .

  • .staticText- für Inschriften, die sich nicht ändern. Der Text ist leicht zu lesen.
  • .header- Überschrift: Zur Pizza hinzufügen, Überschrift.
  • .button- Taste. Die Hauptmethode zum Signieren aktiver Steuerelemente: Ändern Sie die Komposition und die Schaltfläche.
  • .image - Bild.
  • .link- Verknüpfung. Ein seltener Gast in Anwendungen, häufig auf Websites.
  • .searchField - Suche.

Wir sehen uns ein Beispiel an:


  1. Geben Sie den Titel an. .staticTextWird automatisch für alle Beschriftungen festgelegt, aber .headerfür den Titel müssen Sie ihn manuell einfügen. Wenn dies nötig ist und .headerund .staticText.
  2. Markieren Sie die Stelle unter dem Bild. Als wir das letzte Mal alle kleinen Bilder vor VoiceOver versteckt haben, haben wir keinen Informationsgehalt verloren. Dieses Mal ist das Bild groß, es ist nicht so einfach zu verbergen: Der Ort wird leer, das ist seltsam. Wir markieren das Bild, während wir .imagees unterschreiben .accessibilityLabel = " ".

Natürlich müssen die Schließknöpfe und der Korb signiert sein, das war im letzten Artikel.

Kontrollstatus


Das Steuerelement kann drei Zustände haben: normal, ausgewählt und deaktiviert. Es ist interessant, dass sie zu unterschiedlichen Zeiten ausgesprochen werden und gleichzeitig ausgewählt werden können:



  • .selected- fügt "ausgewählt" vor dem Namen des Steuerelements hinzu. Geeignet für alle Schalter und Kontrollkästchen.
  • .notEnabled- fügt "nicht verfügbar" hinzu. Diese Einstellung ist in nicht sichtbar Interface Builderund wird nur programmgesteuert gesteuert.

Ein Beispiel für das Hinzufügen von Belägen zur Pizza:


Mithilfe von Status können Sie dem Benutzer erklären, dass Beläge hinzugefügt wurden. Es ist praktisch, direkt in der Zelle zu befestigen. accessibilityTraitsAus diesem OptionSetGrund können Einfüge- .formUnionund Löschmethoden darauf angewendet werden .formIntersection:

class ToppingCell: UICollectionViewCell {
    override var isSelected: Bool {
        didSet {
            if isSelected {
                accessibilityTraits.formUnion(.selected)
            } else {
                accessibilityTraits.formIntersection(.selected)
            }
        }
    }
    ...
}

Besondere Eigenschaften von Steuerelementen


Es gibt einige ungewöhnlichere Eigenschaften. In unserem Fall passen sie nicht auf den Pizzabildschirm, aber ich werde Ihnen trotzdem davon erzählen, da es nur wenige Informationen über sie gibt. Vielleicht sparen Sie dadurch Zeit.

  • .summaryElement — , . , , . , .
  • .updatesFrequently —  . .
  • .causesPageTurn —  . accessibilityScroll(.next) , . .firstResponder.
  • .startsMediaSession —  VoiceOver , . , . , VoiceOver .
  • .playsSound —  , ( , ).
  • .allowsDirectInteraction- zum Zeichnen und Handhaben von Gesten. Die Steuerung verarbeitet die Berührung sofort so, als ob VoiceOver ausgeschaltet wäre.
  • .keyboardKey- Die Steuerung reagiert wie eine Taste auf der Tastatur. VoiceOver verfügt in solchen Fällen über mehrere Texteingabemodi:

    - standart typing- als einfache Schaltfläche in VoiceOver: Konzentrieren Sie sich zuerst auf den Buchstaben und tippen Sie dann zweimal auf eine beliebige Stelle, um ihn zu schreiben. Sie können mit beiden Händen schneller tippen: Fahren Sie mit einem Finger auf die Tastatur (Buchstaben werden gesprochen) und berühren Sie mit dem anderen Finger, um die Tastenauswahl zu bestätigen.
    - touch typing- Einarmige Kurzwahl: Streichen Sie mit dem Finger über die Tastatur zu den Sprachtasten. Lassen Sie Ihren Finger los, um den Brief zu schreiben.
    - direct touch typing- wie ein normaler Satz, als ob VoiceOver ausgeschaltet wäre.

Video über verschiedene Eingabemethoden:


Aktivieren Sie einfach das Kontrollkästchen IB, um Verhalten hinzuzufügen. Mit dem einstellbaren Merkmal wird es einfach nicht so einfach sein, es separat zu erledigen.

Konfigurieren der leistungsstarken .anpassbaren Eigenschaft


Und das letzte, besonders wichtige Merkmal .adjustableist ein Element , das reguliert werden kann: So UIStepperund Arbeit UISlider. Wischen Sie mit diesem Steuerelement nach oben oder unten , um den Wert zu ändern (vergessen Sie nicht, dass durch Streichen nach links / rechts der Fokus auf das benachbarte Element umgeschaltet wird ). Wenn das Steuerelement über einen UIPanGestureRecognizer verfügt, können Sie zweimal tippen und das zweite Tippen gedrückt halten, sodass die Geste funktioniert und Sie sie direkt steuern können, als ob VoiceOver deaktiviert wäre.

Anwendungsbeispiele für .adjustable:

Testschalter. Der Testaufbau besteht aus fünf Schaltflächen: drei für die Auswahl der Pizza-Größe und zwei für die Art des Tests. Sie sollten gruppiert und signiert werden, sodass anstelle von fünf noch zwei übrig sind: „Größe, Durchschnitt. Einstellpunkt " und„Teig, traditionell. Einstellelement. "



Müssen in 4 Schritten tun:

  1. Stellen Sie den Container mit Schaltflächen zur Verfügung.
  2. Setzen Sie eine Eigenschaft .adjustable.
  3. Implementieren Sie Methoden zum Erhöhen und Verringern.
  4. Geben Sie den neuen Wert für zurück .accessibilityValue.

override public func awakeFromNib() {
        super.awakeFromNib()
        
        isAccessibilityElement = true // 1
        accessibilityTraits = .adjustable // 2
    }


extension SegmentedControl {
    override public func accessibilityIncrement() { // 3
        controller.selectNext(increment: +1)
    }
    
    override public func accessibilityDecrement() { // 3
        controller.selectNext(increment: -1)
    }
    
    public override var accessibilityValue: String? { // 4
        get {
            return selectedSegment?.accessibilityValue
        } set { }
    }
}

Nachdem ein Wisch aufgerufen wurde accessibilityIncrement(), erhöhen Sie jetzt den internen Zähler, und VoiceOver liest den neuen Wert aus der accessibilityValue.

Gesamtzahl der Gesamtbeträge. In diesem Block sehen wir vier Steuerelemente: Minus-Taste, Menge, Plus-Taste und Preis. Sie können viewsie zu einem Steuerelement kombinieren und zu einem Steuerelement machen: „Menge, 1, 575 Rubel. Einstellelement. " Nach einem vertikalen Wischen ändert sich die Menge, und dann wird ein neuer Wert zusammen mit dem Preis ausgesprochen.



Horizontal UICollectionView. Es stellte sich heraus, dass es .adjustablezweckmäßig ist, eine horizontale zu beantragen UICollectionView. Wählen Sie beispielsweise eine Freigabe im Menü oder ein Auto in einem Taxi.



Fazit


Diesmal haben wir die Merkmale erkannt: ihre Typen, Zustände und Verhaltensweisen. Dies ist ein Standardsatz für allgemeine Aufgaben . Für komplexe Steuerelemente können Sie .adjustable verwenden.

Schauen wir uns das nächste Mal eine Lösung für häufig auftretende Probleme an : Bypass-Reihenfolge, modale Fenster, Ladeindikatoren.

Um den nächsten Artikel nicht zu verpassen, abonnieren Sie meinen Dodo Pizza Mobile-Kanal .

Und jetzt haben wir eine freie Stelle in mobiler Richtung. Also lasse ich es einfach hier: Senior iOS Developer (Nischni Nowgorod).

More articles:


All Articles