Stell dir vor, du bist blind. So hören Sie dieses Bild: « D O . , VoiceOver. . « ». « D O . , VoiceOver. . « ».

Das Telefon ist seit langem eine Fortsetzung von mir und ich stelle mir ein Leben ohne ein paar Dutzend Anwendungen vor, die ich jeden Tag verwende. Aber was ist mit demjenigen, der das Telefon nicht in die Hand nehmen oder auf den Bildschirm schauen kann? IOS-Funktionen eröffnen diese Möglichkeiten im Alltag für Menschen mit eingeschränkter Mobilität, Seh- und Hörfähigkeit. Mit ihrer Hilfe können Sie Textgröße und Kontrast erhöhen, Mono-Audio erstellen und Animationen entfernen. Sie können mit der Benutzeroberfläche ohne Bildschirm arbeiten - nach Gehör (für Blinde) oder sogar nur die Stimme steuern (wenn die Person in der Bewegung eingeschränkt ist).

Sie können jede Anwendung und sogar einige Spiele anpassen. Heute werde ich Ihnen erzählen, wie iOS-Entwickler die ersten Schritte in diese Richtung unternehmen.

Sprachsteuerung: Steuern Sie Ihre Stimme

Ab iOS 13 kann das Telefon per Sprache gesteuert werden. Sprachsteuerung vereinfacht das Leben und gibt Menschen mit eingeschränkter Mobilität ein neues Maß an Freiheit. Sehen Sie sich das Video an, in dem Apple zeigt, wie es funktioniert:

Weitere Informationen zum Verwalten des Telefons finden Sie in den folgenden Videos:

1. Sprachnavigation auf Ihrem iPhone (So navigieren Sie mit der Sprachsteuerung auf Ihrem iPhone).
2. Verwenden von Diktaten und Bearbeiten von Text mit der Sprachsteuerung auf Ihrem iPhone .

Durch Aktivieren dieser Funktion können Sie Befehle an das Telefon senden. Leider funktioniert es bisher nur mit Englisch. Beispiel: Sie sagen "Tippen Sie auf Kaufen" und die Schaltfläche "Kaufen" wird gedrückt. Zur Steuerung von Schaltflächen mit Symbolen (ohne Namen in Form von Wörtern) kann die Option "Zahlen anzeigen" bestellt werden. Alle Schaltflächen sind mit digitalen Signaturen versehen. Jetzt können wir "Tipp fünf" sagen und die fünfte Taste wird gedrückt.

Wenn Sie mit komplexen Elementen (Karten, Diagrammen) arbeiten möchten, können Sie das Telefon auffordern, das Raster anzuzeigen. Anschließend kann der Ort auf der Karte anhand der Zellennummer ausgewählt werden.

Es stehen viele Gesten zur Verfügung. Eine vollständige Beschreibung aller Funktionen finden Sie in den Einstellungen des Telefons: Einstellungen → Eingabehilfen → Sprachsteuerung → Befehle anpassen.

VoiceOver: Steuerungsgesten

Damit Blinde Ihre Anwendung verwenden können, müssen Sie sie mit VoiceOver anpassen. Ein paar Unterschiede zum normalen Gebrauch:

1. Anstatt auf den Bildschirm zu schauen, gleitet ein Finger. Wenn der Finger auf der Taste ist, sagt das Telefon seinen Namen und stellt ihn in Form eines schwarzen Rahmens scharf. Danach können Sie zweimal überall drücken, die Taste wird gedrückt. Sie können auch mit einem Wisch nach links oder rechts zwischen benachbarten Elementen wechseln.
2. Es stehen zusätzliche Gesten zur Verfügung: zur Navigation, für wichtige Aktionen, für komplexe Steuerelemente, zum Beispiel für Schieberegler.
3. Der Bildschirm kann ausgeschaltet werden, da er nicht benötigt wird. Tippen Sie dazu dreimal auf drei Finger.

Vollständige Liste der verfügbaren Gesten.

So stellen Sie Ihre Bewerbung zur Verfügung

Voice Control und VoiceOver arbeiten mit der gleichen Technologie. Wenn wir also eine Technologie anpassen, erhalten wir Unterstützung für die zweite.

Zuerst müssen Sie ein Benutzer sein: Schalten Sie es ein, probieren Sie es selbst aus und konfigurieren Sie eine Verknüpfung (schnelles Einschalten), damit neue Funktionen einfach überprüft werden können.

Wo zu aktivieren : Sie können über Siri oder über die Einstellungen (Einstellungen → Barrierefreiheit → VoiceOver) aktivieren / deaktivieren.

So konfigurieren Sie eine Verknüpfung : Zum Schnellzugriff schalten Sie die Verknüpfung durch dreimaliges Drücken der Starttaste ein (oder bei X-Modellen durch „Ausschalten“): Einstellungen → Eingabehilfen → Eingabehilfen → Aktivieren Sie das Kontrollkästchen neben VoiceOver .

Programmierung (Theorie)

Die Grundlage für die Barrierefreiheit ist das UIAccessibilityElement-Protokoll. Um VoiceOver zu verbessern VoiceOver Sie:

• Zeichenknöpfe.
• Werte hinzufügen.
• Hinterlasse einen Hinweis.
• Gruppensteuerung.
• Korrigieren Sie die falschen Inschriften.
• Geben Sie die Art der Steuerung an: Schaltfläche, Beschriftung, Link usw.

Im Interface builder kann etwas konfiguriert werden, einige Einstellungen sind jedoch nur im Code verfügbar.

Tastennamen - .accessibilityLabel

Jeder Knopf muss einen kurzen klanglichen Namen haben. VoiceOver versichern, wenn Sie es vergessen - es wird versuchen, den Text oder den Namen des Symbols auf der Schaltfläche zu lesen, aber es stellt sich oft heraus, so lala.

Was Sie unterschreiben müssen:

• Schaltflächen mit einem Symbol, jedoch ohne Text;
• UISlider
• UIStepper ;
• Bilder Wenn möglich, ist es besser zu unterschreiben, was auf dem Bild gezeigt wird. Instagram kann es schaffen.

Werte - .accessibilityValue

Zusätzlich zum Namen können Sie einen Wert schreiben. Der Schieberegler hat beispielsweise den Namen "Helligkeit" und der Wert ist "50%". Die Schaltfläche „In den Warenkorb“ sollte die Menge oder den Endpreis anzeigen, um die Wirkung des gesamten Bildschirms zusammenzufassen und nicht zu viel zu kaufen.

Tipps - .AccessibilityHint

Wenn Sie die Aktion .accessibilityHint möchten, können Sie einen Hinweis in .accessibilityHint schreiben. Verlassen Sie sich jedoch stark auf Tipps, die sich nicht lohnen: Ständige Erklärungen sind ärgerlich, sodass einige Benutzer sie über die Einstellungen des Telefons deaktivieren.

Verallgemeinerung von Kontrollen

Standardmäßig wird jedes Steuerelement separat ausgesprochen. Dies ist unpraktisch: Die Druckzonen sind reduziert, Sie bemerken möglicherweise nichts usw. Müssen verallgemeinern. In einem Menü besteht eine Zelle beispielsweise aus einem Bild, einem Namen, einer Beschreibung und einer Preisschaltfläche. Ein solches Detail wird nicht benötigt: Sie können das kleine Bild ausblenden, den Namen und den Preis in die Zellenüberschrift und die Zusammensetzung in ihren Wert eintragen. Die Zelle wird eins, und das Menü wird zu einem normalen Satz von Produkten.

Programmierung (Demo und Übung)

Dieses Wissen reicht aus, um Ihr eigenes Programm zu verbessern. Schauen wir uns ein Beispiel für ein Menü mit Pizzen an.

Die nicht angepasste Version für Blinde sieht folgendermaßen aus:

Einige offensichtliche Probleme zu lösen:

• Ein unverständlicher Wert von 24 in der oberen rechten Ecke.
• Leerraum links und oben.
• Zu viele Elemente.
• Falsche Preisaussprache ("ab zweihundertfünfundvierzig Rubel" statt "ab zweihundertfünfundvierzig Rubel").

Werte hinzufügen

24 in der oberen rechten Ecke ist die Anzahl der Dodo-Rubel.
Es ist also notwendig zu unterschreiben:

 accessibilityLabel = "-" accessibilityValue = amountOfDodoRubles 

Dieser Code kann überall dort platziert werden, wo Sie den aktuellen Wert für den Wert haben.

Für den Stadtknopf können Sie etwas Ähnliches tun: Die Bezeichnung ist Ihre Stadt, der Wert ist Moskau. Aber Sie können es nicht tun, wie es scheint, und so ist es klar. Nicht zu übertreiben ist auch eine wichtige Aufgabe.

Wir entfernen den leeren Raum von oben

Der obere Bestand ist eine horizontale UICollectionView . In der Zelle befindet sich eine Beschriftung, die VoiceOver findet.

Wie zu beheben:

1. Machen Sie die gesamte Zelle zugänglich. Standardmäßig fungieren alle view nur als Container für andere Elemente, VoiceOver ignoriert sie. Um die view als letztes Element zu markieren, setzen Sie isAccessibilityElement = true für die Zelle. Dies kann mit der Methode awakeFromNib() . Danach wird die ganze Zelle auffallen, der leere Raum stört nicht mehr.
2. Gib der Zelle einen Namen. Sie können sich nicht mehr auf das Etikett konzentrieren, daher müssen Sie den Text manuell angeben. accessibilityLabel = specialOffer.title

Sie können es in der cellForItemAt Methode konfigurieren:

 func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let specialOffer = specialOffers[indexPath.row] let cell = collectionView.deque… cell.accessibilityLabel = specialOffer.title return cell } 

Vereinfachen Sie die Tabellenzelle

Die Zelle mit dem Produkt hat zwei Probleme: viele Elemente und eine falsche Preisbeschreibung.

Steuerelemente kombinieren

Jetzt hat die Zelle mehrere Felder: Name, Beschreibung, Preis und Bild, 4 Kontrollen pro Zelle. Wenn es 10 Produkte im Menü gibt, dann sind dies bereits 40 kleine Bedienelemente. Es ist notwendig zu verallgemeinern, dass es 10 Produkte gab, so dass es sich näher an der Bedeutung herausstellt.

Sie können vereinfachen:

1. Machen Sie die gesamte Zelle zugänglich. Wir wissen bereits, wie das geht: Setzen Sie isAccessibilityElement = true Zelle
2. In accessibilityLabel schreiben Sie das Wichtigste: den Namen und den Preis. Durch ein Komma getrennt, berücksichtigt VoiceOver die Zeichensetzung.
3. In accessibilityValue geben Sie zusätzliche Informationen an, in unserem Fall ist dies die Zusammensetzung.
4. Geben Sie an, dass die Zelle gedrückt werden kann, d. H. Dies ist im Wesentlichen eine Schaltfläche. accessibilityTraits = .button

Die Methode in der Zelle ersetzt die erforderlichen Werte:

 func refreshAccessibility(title: String?, price: String?, ingredients: String?, isProductAvailable: Bool) { isAccessibilityElement = true // 1 let price = isProductAvailable ? price : "  " accessibilityLabel = [title, price].compactMap { $0 } .joined(separator: ", ") // 2 accessibilityValue = ingredients // 3 accessibilityTraits = .button // 4 } 

Sie können nicht nur Zellen, sondern auch alle mit der Bedeutung verbundenen Steuerelemente gruppieren. Zum Beispiel sollten die Mengen- und Preisumstellung gemeinsam verarbeitet werden: die Menge geändert - ein neuer Preis genannt. Dann erscheint anstelle von vier dummen Kontrollen eine normale.

Wir beugen "Rubel"

Um "Rubel" richtig zu buchstabieren, generieren wir die richtige Zeile und setzen sie in das accessibilityLabel für den Button.

 buyButton.accessibilityLabel = String(format: NSLocalizedString(" %d ", comment: "Price button. Ex.:  150 "), price) 

Sie müssen in der Localizable.stringsDict Datei ablehnen:

Gestennavigation

Es gibt zwei zusätzliche Gesten für die Navigation: Scrub und Magic Tap.

Scrub kehrt zum vorherigen Bildschirm zurück. Um es auszuführen, streichen Sie mit zwei Fingern über den Bildschirm, als ob Sie den Buchstaben Z schreiben würden. Sie können die Eingabe auch mit einem Scrabble beenden.

Medjik Tap ruft die Hauptfunktion des aktuellen Bildschirms auf. Müssen zweimal mit zwei Fingern tippen. Sie können dem Player ein Lied hinzufügen oder einen Anruf entgegennehmen.

Medjik Tapa hat ein UX-Problem - es ist nicht klar, was es tut. Wir haben uns für diesen Weg entschieden: Wenn das Scrabble wieder auf dem Bildschirm angezeigt wird, lassen Sie den Zaubertipp entsprechend dem Skript auf den nächsten Bildschirm übersetzen. Auf der Pizzakarte wird sie in den Warenkorb gelegt. Wenn Sie sich im Warenkorb befunden haben, gelangen Sie zum Lieferungsbildschirm und von der Lieferungsumstellung zur Zahlung.

Wenn die Aktion jedoch nicht offensichtlich ist, können Sie im Tooltip der Schaltfläche über den Zaubertipp sprechen. Aber denken Sie daran: Die Hinweise werden möglicherweise nicht ausgesprochen, dies hängt von den Einstellungen ab.

Navigation anpassen

Wenn Sie auf die Schaltfläche Aktie oder Dodo-Rubel klicken, wird ein modaler Bildschirm geöffnet. Wenn wir den UINavigationController verwenden UINavigationController , müsste nichts unternommen werden. Bei modalen Bildschirmen müssen Sie jedoch beschreiben, wie sie auf zusätzliche Gesten reagieren.

Peeling hinzufügen

Nachdem der Benutzer Z firstResponder , wird die accessibilityPerformEscape Methode von firstResponder . Normalerweise ist dies der aktuelle UIViewController .

Es reicht aus, diese Methode zu implementieren, den Bildschirm zu schließen und true zurückzugeben. Dies zeigt, dass die Geste verarbeitet wurde und die responder chain nicht weiter gehen kann:

 override func accessibilityPerformEscape() -> Bool { dismiss(animated: true) return true } 

Auf ähnliche Weise können Sie auf den Zaubertipp reagieren. Wenden Sie beispielsweise eine Aktion von einer Karte an:

 override func accessibilityPerformMagicTap() -> Bool { applySpecialOffer() return true } 

So finden Sie Probleme

Anpassungsprobleme sind nicht schwer zu finden. VoiceOver Sie VoiceOver einfach ein, und Dutzende werden auf Sie VoiceOver . Aber nach einer Weile wird es schwieriger, neue Probleme zu finden, während es leicht ist, etwas Wichtiges zu übersehen, weil man Probleme nach Gehör finden muss. Es gibt verschiedene Möglichkeiten, dem Entwickler das Leben zu erleichtern.

1. Untertitel aktivieren. In iOS 13 wurde eine Einstellung angezeigt, die "Untertitel" enthält: Einstellungen → Barrierefreiheit → VoiceOver → Beschriftungsfeld.
2. Anzeigen von Untertiteln über die Sprachsteuerung. Wenn Sie VoiceOver testen, können Sie die Sprachsteuerung aktivieren, sodass alle Beschriftungen sofort sichtbar sind. Wenn es irgendwo eine Ziffer gibt, haben Sie vergessen, .accessibilityLabel zu registrieren.
3. Eingabehilfen-Inspektor. Mit dem Eingabehilfeninspektor können Sie alle Eingabehilfeneigenschaften im Simulator anzeigen. Er kann auch den aktuellen Bildschirm prüfen, um Informationen zu möglichen Problemen zu erhalten: kleine Bereiche mit Depressionen, kontrastfreie Elemente, nicht signierte Schaltflächen. Bei Bedarf kann er alle Elemente mit seiner Stimme lesen.

Das ist alles für jetzt

Wir haben einen Bildschirm angepasst. Sie müssen nur sehr wenig programmieren, um die Barrierefreiheit auf einem einfachen Niveau zu halten.

Hinter den Kulissen bleibt jedoch noch viel zu sehen: verschiedene accessibilityTraits , Eingabe, Anwendungsnavigation, custom actions , Fokusreihenfolge, accessibility notifications , Rotor und Braille. Über das nächste Mal.

Wenn Sie jetzt mehr wissen möchten, können Sie lesen:

• Eingabehilfen für iOS .
• Programmierhandbuch für Eingabehilfen für OS X.
• Entschlüsselung der Veröffentlichung von AppsCast zum Thema Barrierefreiheit .
• Mein Thread ist auf Twitter .
• Für das Web: Inclusive Components- Buch

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