Imaginez que vous êtes aveugle. Voici comment vous entendez cette image: « D O . , VoiceOver. . « ». « D O . , VoiceOver. . « ».

Le téléphone est depuis longtemps une continuation de moi, et j'imagine mal ma vie sans quelques dizaines d'applications que j'utilise tous les jours. Mais qu'en est-il de celui qui ne peut pas prendre le téléphone dans sa main ou regarder l'écran? Les fonctionnalités IOS ouvrent ces possibilités dans la vie de tous les jours pour les personnes à mobilité, vision et audition limitées. Avec leur aide, vous pouvez augmenter la taille et le contraste du texte, faire du mono-audio, supprimer des animations. Vous pouvez travailler avec l'interface sans écran - à l'oreille (pour les aveugles) ou même contrôler uniquement la voix (si la personne est limitée dans ses mouvements).

Vous pouvez adapter n'importe quelle application et même certains jeux. Aujourd'hui, je vais vous dire comment les développeurs iOS font les premiers pas dans cette direction.

Contrôle vocal: contrôlez votre voix

À partir d'iOS 13, le téléphone peut être contrôlé par la voix. La commande vocale simplifie la vie et offre un nouveau niveau de liberté aux personnes à mobilité réduite. Regardez la vidéo, Apple y montre comment cela fonctionne:

Vous pouvez en savoir plus sur la gestion du téléphone dans ces vidéos:

1. Navigation vocale sur votre iPhone (Comment naviguer avec la commande vocale sur votre iPhone).
2. Comment utiliser la dictée et modifier le texte avec la commande vocale sur votre iPhone .

En activant cette fonction, vous pouvez émettre des commandes sur le téléphone. Hélas, jusqu'à présent, cela ne fonctionne qu'avec l'anglais. Par exemple, vous dites «appuyez sur acheter» et le bouton d'achat est enfoncé. Pour contrôler les boutons avec des icônes (sans noms sous forme de mots), «afficher les numéros» peut être commandé et tous les boutons auront des signatures numériques. Maintenant, nous pouvons dire «appuyez sur cinq» et le cinquième bouton sera enfoncé.

Pour travailler avec des éléments complexes (cartes, graphiques), vous pouvez demander au téléphone d'afficher la grille, puis l'emplacement sur la carte peut être sélectionné par le numéro de cellule.

Il y a beaucoup de gestes disponibles. Vous pouvez voir une description complète de tout dans les paramètres du téléphone: Paramètres → Accessibilité → Contrôle vocal → Personnaliser les commandes.

VoiceOver: contrôler les gestes

Pour que les personnes aveugles utilisent votre application, vous devez l'adapter à l'aide de VoiceOver. Quelques différences par rapport à une utilisation normale:

1. Au lieu de regarder l'écran, un doigt glisse. Lorsque le doigt est sur le bouton, le téléphone prononce son nom et se concentre dessus sous la forme d'un cadre noir. Après cela, vous pouvez appuyer deux fois n'importe où, le bouton sera enfoncé. Vous pouvez également basculer entre les éléments adjacents avec un balayage vers la gauche ou la droite.
2. Des gestes supplémentaires sont disponibles: pour la navigation, pour les actions importantes, pour les contrôles complexes, par exemple, les curseurs.
3. L'écran peut être désactivé, car il n'est pas nécessaire. Pour ce faire, appuyez trois fois sur trois doigts.

Liste complète des gestes disponibles.

Comment rendre votre application disponible

Voice Control et VoiceOver fonctionnent sur la même technologie, donc en adaptant une, nous obtenons une assistance pour la seconde.

Vous devez d'abord être un utilisateur: allumez-le, essayez par vous-même et configurez un raccourci (allumage rapide) pour qu'il soit facile de vérifier les nouvelles fonctionnalités.

Où activer : vous pouvez activer / désactiver via Siri ou via les paramètres (Paramètres → Accessibilité → VoiceOver).

Comment configurer un raccourci : pour un accès rapide, activez le raccourci en appuyant trois fois sur le bouton d'accueil (ou «désactiver» pour les modèles X): Paramètres → Accessibilité → Raccourci d'accessibilité → Cochez la case à côté de VoiceOver .

Programmation (théorie)

La base de l'accessibilité est le protocole UIAccessibilityElement. Pour améliorer VoiceOver vous devez:

• Boutons de signe.
• Ajoutez des valeurs.
• Laissez un indice.
• Contrôles de groupe.
• Corrigez les mauvaises inscriptions.
• Indiquez le type de contrôle: bouton, inscription, lien, etc.

Quelque chose peut être configuré dans le Interface builder , mais certains paramètres ne sont disponibles que dans le code.

Noms des boutons - .accessibilityLabel

Chaque bouton doit avoir un nom sonore court. VoiceOver assurera si vous oubliez - il essaiera de lire le texte ou le nom de l'icône sur le bouton, mais il s'avère souvent comme tel.

Ce que vous devez signer:

• Boutons avec une icône, mais sans texte;
• UISlider
• UIStepper ;
• Les photos Si possible, il vaut mieux signer ce qui est montré sur l'image. Instagram peut le faire.

Valeurs - .accessibilityValue

En plus du nom, vous pouvez écrire une valeur. Par exemple, le curseur aura le nom «luminosité» et la valeur sera «50%». Le bouton «Ajouter au panier» doit indiquer la quantité ou le prix final afin de résumer l'effet de tout l'écran et de ne pas en acheter trop.

Conseils -. Accessibilité

Si vous souhaitez clarifier davantage l'action, vous pouvez écrire un indice dans .accessibilityHint . Mais comptez beaucoup sur des conseils qui n'en valent pas la peine: les explications constantes sont ennuyeuses, donc certains utilisateurs les désactivent via les paramètres du téléphone.

Généralisation des contrôles

Par défaut, chaque contrôle est prononcé séparément. Cela n'est pas pratique: les zones de pression sont réduites, vous ne remarquerez peut-être pas quelque chose, etc. Besoin de généraliser. Par exemple, dans un menu, une cellule se compose d'une image, d'un nom, d'une description et d'un bouton de prix. Un tel détail n'est pas nécessaire: vous pouvez masquer la petite image, écrire le nom et le prix dans l'en-tête de la cellule et la composition dans sa valeur. La cellule deviendra une et le menu se transformera en un ensemble normal de produits.

Programmation (démo et pratique)

Cette connaissance est suffisante pour commencer à améliorer votre propre programme. Regardons un exemple de menu avec des pizzas.

La version non adaptée pour les aveugles ressemble à ceci:

Quelques problèmes évidents à résoudre:

• Une valeur incompréhensible de 24 dans le coin supérieur droit.
• Espace vide à gauche et en haut.
• Trop d'éléments.
• Prononciation incorrecte du prix ("à partir de deux cent quarante-cinq roubles" au lieu de "à partir de deux cent quarante-cinq roubles").

Ajouter des valeurs

24 dans le coin supérieur droit est le nombre de roubles Dodo.
Il faut donc signer:

 accessibilityLabel = "-" accessibilityValue = amountOfDodoRubles 

Ce code peut être placé partout où vous avez la valeur actuelle pour value.

Pour le bouton ville, vous pouvez faire quelque chose de similaire: l'étiquette est votre ville, la valeur est Moscou. Mais vous ne pouvez pas le faire, semble-t-il, et c'est donc clair. Ne pas en faire trop est également une tâche importante.

Nous supprimons l'espace vide d'en haut

Le stock en haut est un UICollectionView horizontal. Il y a une étiquette à l'intérieur de la cellule, c'est ce que trouve VoiceOver .

Comment réparer:

1. Rendre le contrôle de la cellule entière accessible. Par défaut, toutes les view agissent uniquement comme des conteneurs pour d'autres éléments; VoiceOver ignore. Pour marquer la view comme élément final, définissez isAccessibilityElement = true sur la cellule. Cela peut être fait dans la méthode awakeFromNib() . Après cela, toute la cellule commencera à se démarquer, l'espace vide n'interfère plus.
2. Donnez un nom à la cellule. Vous ne pouvez plus vous concentrer sur l'étiquette, vous devez donc spécifier manuellement le texte. accessibilityLabel = specialOffer.title

Vous pouvez le configurer dans la méthode cellForItemAt :

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

Simplifiez la cellule du tableau

La cellule avec le produit a deux problèmes: beaucoup d'éléments et une description de prix incorrecte.

Combiner les commandes

Maintenant, la cellule a plusieurs champs: nom, description, prix et image, 4 contrôles par cellule. S'il y a 10 produits dans le menu, c'est déjà 40 petits contrôles. Il faut généraliser qu'il y avait 10 produits, donc ça se rapproche du sens.

Vous pouvez simplifier:

1. Rendre le contrôle de la cellule entière accessible. Nous savons déjà comment procéder: définissez isAccessibilityElement = true cellule
2. Dans accessibilityLabel écrivez la chose la plus importante: le nom et le prix. Séparé par une virgule, VoiceOver prend en compte la ponctuation.
3. Dans accessibilityValue spécifiez des informations supplémentaires, dans notre cas, c'est la composition.
4. Indiquez que la cellule peut être pressée, c'est-à-dire c'est essentiellement un bouton. accessibilityTraits = .button

La méthode à l'intérieur de la cellule substitue les valeurs nécessaires:

 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 } 

Vous pouvez regrouper non seulement les cellules, mais également tous les contrôles liés à la signification. Par exemple, le changement de quantité et de prix doit être traité ensemble: a changé la quantité - dit un nouveau prix. Ensuite, au lieu de quatre contrôles stupides, une normale apparaîtra.

Nous inclinons des "roubles"

Pour épeler "roubles" correctement, nous générons la ligne correcte et la mettons dans le accessibilityLabel d' accessibilityLabel pour le bouton.

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

Vous devez décliner dans le fichier Localizable.stringsDict :

Navigation gestuelle

Il existe deux gestes auxiliaires pour la navigation: gommage et tapotement magique.

Scrub revient à l'écran précédent. Pour l'exécuter, faites glisser l'écran avec deux doigts, comme si vous écriviez la lettre Z. Vous pouvez également terminer la saisie avec un scrabble.

Medjik tap appelle la fonction principale de l'écran actuel. Besoin de taper deux fois avec deux doigts. Vous pouvez inclure une chanson dans le lecteur ou répondre à un appel.

Medjik tapa a un problème UX - ce n'est pas évident. Pour nous, nous avons décidé de cette façon: si le scrabble revient à l'écran, laissez le robinet magique se traduire sur l'écran suivant en fonction du script. Sur la carte à pizza, cela l'ajoutera au panier, si vous étiez dans le panier, vous irez à l'écran de livraison, et du changement de livraison au paiement.

Mais si l'action n'est pas évidente, vous pouvez parler du robinet magique dans l'info-bulle du bouton. Mais rappelez-vous: les indices peuvent ne pas être prononcés, cela dépend des paramètres.

Adapter la navigation

Si vous cliquez sur le titre ou sur le bouton Dodo-roubles, un écran modal s'ouvrira. Si nous UINavigationController l' UINavigationController , alors rien ne devrait être fait. Mais pour les écrans modaux, vous devez décrire comment ils réagissent aux gestes supplémentaires.

Ajouter un gommage

Une fois que l'utilisateur dessine Z, la méthode d' accessibilityPerformEscape de firstResponder . Il s'agit généralement de l' UIViewController actuel.

Il vous suffit d'implémenter cette méthode, de fermer l'écran et de renvoyer true, montrant que le geste a été traité et que vous pouvez responder chain plus loin:

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

De la même manière, vous pouvez répondre au robinet magique. Par exemple, appliquez une promotion à partir d'une carte:

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

Comment trouver des problèmes

Les problèmes d'adaptation ne sont pas difficiles à trouver, il suffit d'activer VoiceOver et des dizaines vous arroseront. Mais après un certain temps, il deviendra plus difficile de trouver de nouveaux problèmes, alors qu'il est facile de manquer quelque chose d'important, car vous devez trouver des problèmes à l'oreille. Il existe plusieurs façons de faciliter la vie du développeur.

1. Activez les sous-titres. Dans iOS 13, un paramètre est apparu qui inclut des "sous-titres": Paramètres → Accessibilité → VoiceOver → Panneau de sous-titres.
2. Affichez les légendes via la commande vocale. Lors du test de VoiceOver, vous pouvez activer le contrôle vocal, puis toutes les étiquettes seront immédiatement visibles. S'il y a un chiffre quelque part, vous avez oublié d'enregistrer .accessibilityLabel .
3. Inspecteur d'accessibilité. L'inspecteur d'accessibilité vous permet de voir toutes les propriétés d' accessibility dans le simulateur. Il peut également auditer l'écran actuel, vous apprendrez ainsi les problèmes possibles: petites zones de dépression, éléments non contrastés, boutons non signés. Si nécessaire, il peut lire tous les éléments avec sa voix.

C'est tout pour l'instant

Nous avons adapté un écran. Vous devez programmer très peu, maintenir l'accessibilité au niveau de base est facile.

Mais il reste beaucoup dans les coulisses: différents accessibilityTraits , la saisie, la navigation dans les applications, custom actions , l'ordre de mise au point, accessibility notifications , le rotor et le braille. La prochaine fois.

Si vous voulez en savoir plus maintenant, vous pouvez lire:

• Guide d'accessibilité pour iOS .
• Guide de programmation de l'accessibilité pour OS X.
• Décryptage de la version d'AppsCast sur l'accessibilité .
• Mon fil est sur Twitter .
• Pour le Web: livre sur les composants inclusifs

Pour ne pas manquer le prochain article, abonnez-vous à la chaîne Dodo Pizza Mobile.