Get best of the week

VoiceOver sur iOS: résolution des problèmes courants

Lorsque vous essayez d'adapter l'application pour les aveugles, souvent quelque chose ne va pas: soit la commande sera perdue, alors le focus ne sera pas là. D'un autre côté, il y a l'UX, qui est facile à manquer car vous ne connaissez pas les problèmes possibles. Dans cet article, nous traiterons des problèmes typiques et de leurs solutions.



L'adaptation de l'application iOS est un gros sujet, tout ne rentre pas dans un seul article, donc je les publie en série.

  1. Voice Control et VoiceOver: comment adapter l'application pour les aveugles ou les alambics .
  2. VoiceOver sur iOS: chaque contrôle se comporte différemment.
  3. VoiceOver sur iOS: résolution des problèmes courants.
  4. La différence entre l'implémentation de VoiceOver, le contrôle vocal et les tests d'interface utilisateur. (En cours)

Dans la première partie, nous avons traité l'adaptation des applications pour les aveugles à l'aide de VoiceOver: contrôles signés, regroupés, navigation fixe. Dans la deuxième partie, nous sommes allés plus loin et avons examiné les «fonctionnalités» qui peuvent être données aux contrôles afin d'améliorer leur travail pour les aveugles et d'améliorer généralement la convivialité de l'application.

Aujourd'hui, nous continuerons à travailler sur l'adaptation de l'écran de pizza: nous allons modifier l'ordre d'exploration, résumer les informations d'achat, corriger la fenêtre modale et améliorer l'indicateur de chargement.

Réorganisation des commandes


Si vous ne définissez pas l'ordre correct de passage des commandes pour VoiceOver, il est très probable qu'il contourne et lit les éléments dans le mauvais ordre comme vous le souhaitez. Par exemple, cela s'est produit avec les boutons «fermer» et «au panier».

L'écran défile et les boutons sont au-dessus UIScrollView. Il s'avère que VoiceOver essaie d'abord de contourner tous les éléments à l'intérieur UIScrollViewet ne trouve ensuite que les boutons du haut. Pour l'utilisateur, ce comportement de VoiceOver sera incorrect: les boutons sont en haut, donc l'itération et la notation doivent commencer par eux.

Pour commencer, voyons d'abord comment VoiceOver détermine l'ordre des contrôles. Il le fait de cette façon: prend des éléments d'une propriété accessibilityElements. Par défaut, viewils sont tous là isAccessibilityElement = true.

Maintenant, nous pouvons mettre les boutons au début en remplaçant accessibilityElements:

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

Regrouper via shouldGroupAccessibilityChildren


En règle générale, VoiceOver essaie de lire les éléments dans un ordre naturel - de gauche à droite, de haut en bas:



si vous avez groupé des contrôles, vous avez besoin de VoiceOver pour passer à l'élément le plus proche du regroupement et non dans l'ordre de lecture. Set .shouldGroupAccessibilityChildren = true, et la commande commencera à prendre en compte la proximité des éléments. La propriété doit être définie comme parent viewpour tous les éléments.



Pointez le premier élément à focaliser


Un autre problème d'ordre de lecture est lorsque VoiceOver ouvre l'écran pour la première fois, il sélectionne l'élément en haut à gauche. Le plus souvent, c'est le bouton de retour. D'une part, cela vous permet de revenir rapidement à l'écran précédent en cas d'erreur. D'un autre côté, c'est ainsi que nous perdons notre compréhension de l'écran sur lequel nous sommes. Vous pouvez corriger la situation si vous définissez manuellement la mise au point sur le contrôle souhaité.

Que fait Apple?
C'est étrange que ça UINavigationControllermette l'accent sur le bouton "Retour", je pourrais le mettre sur le titre de l'écran qui s'ouvre. Du côté de la commodité, il me semble juste de me concentrer sur le titre ou le premier contrôle, nous donnons donc plus d'informations sur le nouvel écran. Vous pouvez revenir en arrière avec un geste de gommage .

Vous pouvez réorganiser la mise au point à l'aide de la fonction d'alerte UIAccessibility.post(notification: …). Il prend deux paramètres:

  • Une des espèces UIAccessibility.Notification.
  • Objet auquel l'alerte doit être appliquée. Le plus souvent, il s'agit d'une ligne de texte ou d'un objet qui doit être sélectionné après la notification.

Vous pouvez mettre l'accent sur l'en-tête dans viewDidLoad:

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

Vous pouvez transférer l'objet sur lequel vous souhaitez mettre le focus ou le texte à prononcer.

Types d'alertes pour les objets


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

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

Afficher les fenêtres modales en mode natif


Lorsque vous travaillez avec VoiceOver, vous pouvez (et allez) tirer sur tous les montants autorisés dans le développement. Par exemple, nous avons créé un flux de messages et pour que les messages commencent par le bas, nous avons décidé de retourner UITableViewpuis de retourner toutes les cellules. Visuellement, tout va bien, mais la liste défilera à l'envers avec trois doigts dans VoiceOver.

Nous avons également été confrontés à un problème que nous ne pouvions pas modifier les ingrédients en aucune façon, car il n'était pas possible de mettre l'accent sur la fenêtre. Cela s'est produit parce que nous avons montré la vue, et non UIViewControlleravec un UIPresentationController.VoiceOver spécial qu'elle traite .firstResponder, et la nôtre viewne l'a pas été.



S'il n'y a pas de temps pour la réécriture, vous pouvez viewdéfinir la propriété pour accessibilityViewIsModal. Ensuite, VoiceOver se concentrera uniquement sur cela view.

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

Pour être honnête, cela n'a jamais fonctionné pour moi, et nous UIPresentationController.

Aligner les cadres invisibles


L'ordre de lecture est compté par images, parfois il donne des résultats inattendus. Par exemple, nous avons agrandi le cadre du bouton «i» pour le rendre plus facile à cliquer. Mais il s'est avéré être plus élevé que le cadre du nom de la pizza, donc le bouton «i» s'est avéré être le premier élément de mise au point. Même s'il est petit, il est à droite et n'est généralement pas si important.



Vous pouvez modifier l'ordre de lecture accessibilityElements, mais je vais montrer une manière différente. VoiceOver utilise la propriété accessibilityFrame, juste par défaut, elle correspond au cadre habituel. Il existe plusieurs solutions:

  1. Remplacez la sous-classe de contrôle et renvoyez une valeur réduite.
  2. Réglez le bon cadre à l'extérieur.
  3. Ajustez simplement le cadre de sorte qu'il affleure l'inscription.

Mais il est important que ce cadre soit dans les coordonnées de l'écran. Pour une conversion simple, il existe une fonction UIAccessibility.convertToScreenCoordinates.

Il peut également être utilisé pour combiner des commandes. Par exemple, vous devez combiner le sélecteur et sa signature, afin que l'élément devienne plus grand, il sera plus facile de cliquer dessus, la duplication inutile disparaîtra.

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!)
}

J'ai également agrandi la mise au point en utilisant .inset, il est plus pratique d'appuyer sur.



En utilisant le cadre et AccessibilityContainervous pouvez mettre à disposition des graphiques et des tableaux.

Résumer l'action principale


C'est plus sur UX, mais je vous le dirai quand même. Une personne avec une vision normale lit facilement tous les paramètres de l'écran, mais pour cette personne aveugle, vous devez trier manuellement toutes les commandes. Vous pouvez faciliter le processus et résumer toutes les modifications dans le bouton Acheter.

Par exemple, pour obtenir le bouton "Acheter". Ajouter le bacon, retirer les jalapenos. Prix ​​434₽ », vous n'avez pas besoin d'écrire quoi que ce soit d'inhabituel dans le code, il suffit de collecter la ligne avec ajouté / supprimé:

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

Et n'oubliez pas de signer l'indicateur de téléchargement


Si après avoir ajouté un produit au panier vous bloquez brièvement l'interface et téléchargez quelque chose, n'oubliez pas de rendre l'indicateur de téléchargement disponible:

  1. Utilisez l'alerte pour vous concentrer sur l'indicateur.
  2. Donnez un nom au focus. Par exemple, chargement.
  3. Mettez-le accessibilityViewIsModal.
  4. Faites-moi savoir lorsque le téléchargement est terminé.

Si après le chargement, vous affichez un nouvel écran, VoiceOver changera lui-même de focus, il deviendra donc clair que le téléchargement est terminé. Dans les cas plus compliqués, vous pouvez le dire explicitement ou même ajouter des vibrations .

Que fait Apple?
Fait intéressant, Safari fonctionne avec cela dans iOS 13: pendant le chargement d'une page, il fait un clic toutes les secondes, et lorsqu'une page se charge, il fait * woop-dumb *. Hélas, du côté de l'API, ce n'est pas encore disponible, nous attendons iOS 14.


Pour adapter l'écran, nous avons utilisé différentes approches: nous avons changé l'ordre des boutons, indiqué le premier élément de mise au point, corrigé la fenêtre modale, résumé les paramètres du bouton principal et travaillé sur la commodité de l'application. Cette connaissance est suffisante pour adapter presque toutes les applications. Aller de l'avant.

La prochaine fois, je parlerai de la différence entre l'implémentation de VoiceOver, le contrôle vocal et les tests d'interface utilisateur.
Afin de ne pas manquer le prochain article, abonnez-vous à ma chaîne Dodo Pizza Mobile .

More articles:


All Articles