Comment rendre VoiceOver plus convivial dans votre application iOS

Avec quelques modifications au cours du développement, vous pouvez créer une meilleure expérience VoiceOver pour vos utilisateurs.

Depuis que Apple a introduit pour la première fois les fonctionnalités d'accessibilité à iOS il y a environ cinq ans, la société a étendu ces fonctionnalités aux applications tierces en créant un riche ensemble d'API d'accessibilité. Ces API permettent aux développeurs de créer des applications d'assistance qui touchent un nombre beaucoup plus grand d'utilisateurs.

Mais rendre votre application accessible n’est qu’un début. Vous devez également faire preuve d'empathie quant à la manière dont un utilisateur peut avoir besoin de naviguer dans le contenu d'accessibilité de vos applications.

En parlant principalement de VoiceOver, réfléchissez aux moyens de réduire la charge de navigation que l’accessibilité peut ajouter à une expérience. De plus, gardez à l'esprit le comportement de VoiceOver pour un utilisateur lorsqu'il annonce le contenu d'un écran à un autre ou d'un composant à un autre.

Dans ce tutoriel, nous allons vous montrer comment regrouper vos éléments d'accessibilité dans des vues complexes. Cela réduit la quantité de glissement des éléments à l'écran et rend le processus de navigation un peu moins encombrant pour les utilisateurs.

Avant de commencer, assurons-nous d’avoir certains principes fondamentaux.

Propriétés d'accessibilité, apprendre à les aimer

Les propriétés d’accessibilité sont essentielles pour rendre votre contenu disponible à une communauté plus large. Les propriétés d’accessibilité sur lesquelles nous allons nous concentrer ici sont: AccessibilityElement, shouldGroupAccessibilityChildren, accessibilityLabel et accessibilityHint.

  • isAccessibilityElement: Assez simple, non? Cette valeur indique à iOS s'il s'agit ou non d'un élément auquel une application d'assistance peut accéder.
  • shouldGroupAccessibilityChildren: Indique si VoiceOver doit regrouper les éléments qui sont des enfants du destinataire, quelles que soient leurs positions à l’écran (cellules UICollectionView et UITableView).
  • accessibilityLabel: C’est ce que VoiceOver annoncera pour un élément d’accessibilité donné. C'est une étiquette concise qui identifie l'élément d'accessibilité.
  • accessibilityHint: En règle générale, il s'agit d'une description de ce qu'un élément d'accessibilité particulier est ou peut faire. Par exemple, “Appuyez deux fois pour voir” ou “Bouton”.

Activer VoiceOver dans votre produit Apple peut être effectué de deux manières:

  • Manuellement: sur votre appareil, accédez à Paramètres> Général> Accessibilité> VoiceOver et appuyez sur VoiceOver pour l'activer. C’est facile à faire une fois, mais effectuer ces étapes plusieurs fois de suite au cours des tests devient fastidieux. Heureusement, il existe un raccourci!
  • Raccourci VoiceOver: sur votre appareil, sélectionnez Paramètres> Général> Accessibilité> Raccourci Accessibilité et assurez-vous que VoiceOver est sélectionné. Maintenant, tout ce que vous avez à faire pour activer ou désactiver VoiceOver est d'appuyer trois fois sur le bouton Accueil. Génial, non?!

Si vous vous demandez si cela ne fonctionnera pas dans le simulateur iOS. Vous devrez tester vos ajouts d'accessibilité sur un périphérique physique.

Je l'ai? Génial, commençons.

Combinaison de contenu d'accessibilité dans des groupes

Comme je l'ai déjà mentionné, la navigation dans les éléments d'accessibilité peut rapidement devenir une activité fastidieuse. Imaginez devoir glisser à gauche et à droite entre chaque étiquette et image contenue dans un UICollectionViewController ou UITableViewController. Pas amusant, non? Que pouvez-vous faire pour rendre cela un peu plus supportable?

Une des façons que j'aime résoudre ce problème est de considérer chaque cellule dans ces cas comme un seul élément. Maintenant, imaginez si vous pouviez glisser à gauche et à droite entre chaque cellule lorsque celle-ci lit tout son contenu et non pas étiquette par étiquette. C’est vrai, la riche API d’accessibilité d’Apple nous permet de le faire en un tour de main.

Voyons comment nous pouvons le faire avec un UICollectionView.

Tout d'abord, dans votre code, définissez les propriétés d'accessibilité pour votre vue de collection. Voir l'exemple ci-dessous.

// Accessibilité
collectionView.isAccessibilityElement = false
collectionView.shouldGroupAccessibilityChildren = true

Ici, nous demandons à l’application d’aide d’agir comme si la vue Collection n’était pas là. Ainsi, il ne sera pas sélectionné car un utilisateur glisse dans sa vue parent lorsque VoiceOver est activé. Je sais que cela semble contre-intuitif, mais ne vous inquiétez pas. Nous allons ensuite définir chaque élément de cette vue de collection en tant qu’élément d’accessibilité.

Dans cet exemple, nous allons appliquer l’accessibilité à une UICollectionViewCell qui affiche des informations sur un album de musique. Chaque cellule aura une image, un titre d'album et un nom d'artiste.

@IBOutlet var imageView: UIImageView!
@IBOutlet var titleLabel: UILabel!
@IBOutlet var artistLabel: UILabel!

Tout d’abord, nous allons configurer notre cellule:

fonction finale configure (modèle cellWithModel: Album) {
    si letworkName = model.artworkName {
        imageView.image = UIImage (nommé: artworkName)
    }
    artistLabel.text = model.artist? .name
    titleLabel.text = model.title
    applyAccessibility ()
}

Ensuite, appliquez les propriétés d'accessibilité à chaque UICollectionViewCell:

fonction finale applyAccessibility () {
    isAccessibilityElement = true
    accessibilityLabel = “\ (titleLabel.text!) \ (artistLabel.text!)”
    accessibilityHint = “Double tap pour jouer.”
    imageView.isAccessibilityElement = false;
    artistLabel.isAccessibilityElement = false;
    titleLabel.isAccessibilityElement = false;
}

Comme vous pouvez le constater, chaque cellule est définie en tant qu'élément d'accessibilité, ce qui l'ajoute à la liste des éléments d'accessibilité pour sa vue parent. Cela signifie que lorsqu'un utilisateur glisse dans les éléments de la vue de collection, chaque élément aura l'occasion de décrire son contenu.

Ensuite, nous avons ajouté non seulement le texte titleLabel, mais également le texte artistLabel à la propriété accessibilityLabel de la cellule. Ainsi, lorsque VoiceOver s'adresse à l'utilisateur, il entend le contenu des deux labels dans notre cellule d'album au lieu de l'un ou l'autre. Et, bien sûr, nous définissons la propriété accessibilityHint afin que les utilisateurs puissent savoir ce qui se passera lorsqu’ils effectuent l’action de double frappe. Gardez à l’esprit que des indications d’accessibilité seront toujours prononcées après une brève pause après la lecture du label accessibility d’un élément. Vous ne l'entendrez pas tout de suite.

Enfin, dans la cellule de l’album, nous définissons la valeur isAccessibilityElement de chaque élément enfant sur false. Bien sûr, définir une cellule en tant qu'élément d'accessibilité rendra par défaut ses enfants aux éléments de non-accessibilité.

Ouf, maintenant après tout ça, voyons comment ça marche. Cette vidéo montre ce qui se produirait si nous ne faisions pas toutes les étapes ci-dessus, puis montrait un exemple d'application des propriétés d'accessibilité.

Les éléments de cellules groupées non seulement sonnent mieux lorsqu’ils sont lus par VoiceOver, ils réduisent également la navigation.

Rendre accessible UICollectionViewCells comme un humain

Très souvent, je remarque que les développeurs se précipitent sur l'accessibilité au sein de leurs applications. Cela peut être dû à un certain nombre de facteurs, mais le contenu de la propriété accessibilityLabel a tendance à nécessiter une légère touche d'amour.

Dans l'exemple précédent sur la définition du label accessibility de notre cellule d'album, vous remarquerez qu'elle lit directement son contenu assez rapidement dans certains cas. Mais si nous écrivions nos étiquettes de la même manière que nous parlons? Ajouter une virgule, voire une conjonction, peut aider à rendre l’étiquette un peu meilleure pour votre public en créant des pauses dans la dictée de VoiceOver.

Voici un exemple simple d’ajout d’une virgule à l’étiquette accessibility pour nos cellules d’album.

accessibilityLabel = “\ (titleLabel.text!), \ (artistLabel.text!)”

C’est subtil mais efficace. Regardez cette courte vidéo pour voir quelle différence cela peut faire. Dans la vidéo, les cellules de gauche ne contiennent pas de virgules, contrairement aux cellules de droite.

Travailler avec l'accessibilité à l'esprit

Apple a fait le premier pas et a fourni aux développeurs la possibilité de créer des applications assistées. Continuez cet effort en ajoutant l'accessibilité dans vos flux de travail de développement. C’est plus facile que vous ne le pensez et les utilisateurs de votre application vous en remercieront!

Pour plus d'informations sur la conception et le développement, abonnez-vous à BPXL Craft et suivez Black Pixel sur Twitter.

Black Pixel est une agence de création de produits numériques. En savoir plus sur blackpixel.com.