Accessibilité iOS : développez une application inclusive pour élargir votre audience

Module 1

Créer des applications iOS inclusives

Les applications iOS sont assez complexes à développer, car vous devez faire face à une multitude de préoccupations, des spécifications produit à la mise sur le marché.

Avec toutes ces préoccupations en tête, est-ce que cela vaut la peine de rendre votre application accessible à tous les utilisateurs ? Absolument ! Dans ce guide, nous discuterons des raisons pour lesquelles vous devriez envisager d'ajouter un support d'accessibilité supplémentaire et comment vous pouvez comprendre les problématiques liées, afin que cela devienne naturel pour vous d'en tenir compte à l'avenir.

L'impact de l'accessibilité pour les utilisateurs déficients visuels sur iOS

Les utilisateurs déficients visuels sont très enclins à utiliser les nouvelles technologies, car elles peuvent les aider dans leur vie quotidienne. Ce sont des utilisateurs fidèles, que beaucoup d'applications oublient encore.

De plus, l'iPhone est l'appareil préféré des personnes qui utilisent un lecteur d'écran : 7 sur 10 l'ont comme téléphone principal, 72 % en Europe (enquête WebAIM 2024). Si vous développez des applications iOS, vous touchez donc déjà une grande partie des utilisateurs déficients visuels.

Module 2

Développer une application avec l'accessibilité en tête

L'application exemple « Escape From Blindness »

Nous allons créer une application d'Escape Room nommée « Escape From Blindness ». Pour avancer dans les niveaux, il faudra résoudre des défis portant sur l'utilisation de VoiceOver, l'outil principal qui rend iOS accessible aux utilisateurs déficients visuels.

Cette application montre un exemple simple pour présenter les idées essentielles de UIAccessibility. Elle contient quatre modes de jeu :

1. Quiz fermé : avancez en choisissant la bonne réponse.
2. Quiz ouvert : avancez en écrivant la bonne réponse dans la zone de texte.
3. Niveaux avec rotor : validez les réponses grâce au rotor VoiceOver.
4. Niveaux avec actions personnalisées : validez toutes les réponses du niveau dans n'importe quel ordre.

Module 3

Définir les spécifications du jeu

Tout le code est sur le dépôt GitHub du projet, avec son état initial et tout son historique. Chaque étape de programmation de ce guide renvoie au commit qui l'a introduite : vous lisez le code tel qu'il était à ce moment-là.

N'hésitez pas à tester le jeu final que nous allons développer en téléchargeant l'application sur l'App Store. Elle inclut certains modules de ressources que nous ne couvrirons pas dans ce tutoriel.

Nous développerons l'application dans l'ordre suivant :

1. Définir les écrans d'introduction et de fin expliquant le concept du jeu et remerciant l'utilisateur.
2. Définir l'écran d'explication de VoiceOver indiquant qu'il est essentiel pour utiliser le jeu et expliquant comment l'activer.
3. Définir le GameFlow chargé de valider les réponses et de transmettre la navigation vers le niveau ou chapitre suivant à l'AppCoordinator.
4. Définir l'AppCoordinator chargé d'assurer la navigation entre les différents écrans selon le scénario des chapitres.
5. Développer les niveaux à questions fermées.
6. Développer les niveaux à questions ouvertes.
7. Développer les niveaux basés sur le rotor.
8. Développer les niveaux utilisant des actions personnalisées.

Module 4

Le framework UIAccessibility

Avant d'aborder l'implémentation des écrans, un petit rappel sur VoiceOver.

VoiceOver est un outil d'assistance pour les personnes déficientes visuelles sur iOS et macOS. Il lit le contenu de l'écran en temps réel. Lorsqu'une application prend bien en compte l'accessibilité, l'expérience des utilisateurs de VoiceOver peut être aussi bonne, voire meilleure, que celle des autres utilisateurs.

Voici quelques notions sur UIAccessibility. Toutes les vues UIKit possèdent des propriétés dédiées à l'accessibilité. Voici les quatre que l'on retrouve dans la plupart des applications iOS :

• accessibilityLabel : texte lu par VoiceOver quand l'utilisateur pointe l'élément. Sur un UILabel, le contenu du texte devient automatiquement l'accessibilityLabel.
• accessibilityValue : information complémentaire lue après l'accessibilityLabel.
• accessibilityHint : aide optionnelle, lue après une courte pause ; l'utilisateur peut la désactiver dans les réglages de VoiceOver. Elle ne doit pas contenir d'éléments essentiels.
• accessibilityTraits : valeurs indiquant la nature de l'élément, comme Titre ou Bouton.

Regrouper des éléments et ordonner leur lecture

Vous pouvez aussi désactiver l'accessibilité d'un élément en mettant sa propriété isAccessibilityElement sur false. Une autre approche, que nous n'utiliserons pas dans cet exemple, consiste à regrouper plusieurs éléments ou à définir leur ordre de lecture, lorsque rassembler des éléments améliore l'accessibilité. Voici un exemple de hiérarchie :

containerView
 ├─ child1
 └─ child2

Pour imposer l'ordre de lecture des éléments internes, le conteneur ne doit pas être lui-même un élément accessible : sinon, VoiceOver ne lit plus ses enfants.

containerView.isAccessibilityElement = false
// VoiceOver lira child1, puis child2
containerView.accessibilityElements = [child1, child2]

Pour que VoiceOver lise au contraire le groupe d'un seul trait, faites du conteneur un élément accessible et combinez les accessibilityLabel :

containerView.isAccessibilityElement = true
containerView.accessibilityLabel = [child1.accessibilityLabel, child2.accessibilityLabel]
    .compactMap { $0 }
    .joined(separator: ", ")