VoiceOver : qu'est-ce que c'est, gestes de contrôle et fonctionnalités sur iOS

Qu'est-ce que VoiceOver ?

VoiceOver est un lecteur d'écran intégré aux systèmes d'exploitation Apple. Il est conçu pour les utilisateurs aveugles et malvoyants et permet une interaction complète avec l'appareil sans contact visuel. VoiceOver vocalise tous les éléments de l'interface : boutons, liens, texte, images, notifications et éléments système.

La technologie a été présentée pour la première fois en 2005 pour macOS et est apparue sur iOS avec l'iPhone 3GS en 2009. Depuis lors, VoiceOver est devenu une partie intégrante de l'écosystème Apple et l'un des principaux arguments en faveur de l'accessibilité de la plateforme. VoiceOver est intégré au niveau système, ce qui signifie qu'il fonctionne dans n'importe quelle application sans intégration supplémentaire de la part du développeur, bien que la qualité de la vocalisation dépende directement de la manière dont l'application utilise l'API d'accessibilité iOS.

VoiceOver prend en charge plus de 40 langues avec une synthèse vocale naturelle et s'adapte aux paramètres vocaux régionaux. Sur iOS, VoiceOver utilise les moteurs vocaux de Siri pour le français et plusieurs autres langues, garantissant un son le plus naturel possible et une intonation correcte en fonction de la ponctuation et du contexte.

Comment fonctionne VoiceOver ?

VoiceOver intercepte les événements tactiles et les interprète différemment de la saisie standard iOS. Lorsqu'un utilisateur touche l'écran, VoiceOver n'active pas l'élément sous le doigt, mais le vocalise d'abord. Ce n'est qu'après un double toucher que l'élément s'active. Cette différence clé permet aux utilisateurs aveugles d'explorer l'interface sans risque de clics accidentels.

Ordre de lecture et navigation

VoiceOver lit les éléments de l'interface dans un ordre logique : de gauche à droite, de haut en bas. L'ordre de lecture est hérité de la hiérarchie des vues iOS, mais le développeur peut le modifier via la propriété accessibilityElements pour les dispositions complexes. L'utilisateur peut naviguer entre les éléments en balayant vers la droite (suivant) et vers la gauche (précédent), ainsi qu'en touchant un élément spécifique pour le faire vocaliser.

À chaque déplacement, VoiceOver énonce le type d'élément (bouton, lien, titre), son nom (accessibilityLabel), son état (sélectionné, désactivé) et son indice (accessibilityHint). Si l'élément contient une valeur — par exemple, un curseur de volume — VoiceOver la vocalise également. Les Accessibility Traits (UIAccessibilityTraits) informent en outre l'utilisateur sur le comportement de l'élément : s'il s'agit d'un bouton, d'un interrupteur, d'un champ de recherche ou d'une touche de clavier.

Le rotor VoiceOver

Le rotor est un cadran de réglage virtuel qui change le mode de navigation de VoiceOver. L'utilisateur fait tourner le rotor avec deux doigts (comme un bouton de volume) et sélectionne un mode : mots, caractères, titres, liens, points d'entrée, lignes de tableau et autres. Le mode titres permet de basculer rapidement entre H1-H6 sur les pages Web et dans les applications, tandis que le mode caractères énonce le texte lettre par lettre, utile lors du remplissage de formulaires ou de la saisie de codes de vérification.

Le développeur peut ajouter des modes personnalisés au rotor via l'API UIAccessibilityCustomRotor. Par exemple, dans une application de notes, on peut ajouter un rotor « Notes favorites » ou « Modifications récentes ». Les rotors personnalisés accélèrent considérablement la navigation dans des applications spécifiques et sont considérés comme une meilleure pratique d'accessibilité sur iOS.

Gestes de contrôle VoiceOver

VoiceOver utilise son propre ensemble de gestes qui ne correspondent pas aux gestes standards iOS. La plupart des gestes sont effectués avec trois doigts au lieu d'un — cela évite les conflits avec le fonctionnement normal et permet à VoiceOver de fonctionner simultanément avec la saisie standard.

Le geste de double toucher est le principal moyen d'activer les éléments dans VoiceOver. Si un élément nécessite une action spéciale (par exemple, faire glisser), VoiceOver utilise la séquence « toucher — double toucher et maintenir » pour entrer en mode de déplacement. Cela permet d'effectuer des gestes complexes comme le glisser-déposer sans voir l'écran. VoiceOver prend également en charge le geste « double toucher à deux doigts » pour annuler une action et le « triple toucher » pour activer/désactiver le rideau d'écran (Screen Curtain).

VoiceOver dans le développement mobile

Un développeur d'applications iOS peut considérablement améliorer l'interaction avec VoiceOver via l'API UIAccessibility. Les paramètres d'accessibilité de base sont ajoutés dans Interface Builder (Identity Inspector → Accessibility), mais les interfaces complexes nécessitent une configuration programmatique dans le code.

Accessibility Label et Traits

La propriété accessibilityLabel définit le texte que VoiceOver prononce pour l'élément. Si aucun libellé n'est défini, VoiceOver utilise le texte du bouton ou l'espace réservé du champ de texte. Pour les éléments sans texte (icônes, vues personnalisées), le libellé est obligatoire. La propriété accessibilityTraits définit le type d'élément : bouton, titre, interrupteur, champ de recherche, touche de clavier, valeur change, lien et autres.

let profileButton = UIButton(type: .custom)
profileButton.setImage(UIImage(named: "avatar"), for: .normal)
profileButton.isAccessibilityElement = true
profileButton.accessibilityLabel = "Profil utilisateur"
profileButton.accessibilityTraits = .button
profileButton.accessibilityHint = "Ouvre l'écran des paramètres du profil"

Le drapeau isAccessibilityElement active la prise en charge de VoiceOver pour les vues personnalisées — par défaut, il est vrai uniquement pour les éléments standard (UIButton, UILabel, UITextField). Le paramètre accessibilityHint ajoute un indice : VoiceOver le prononce après une pause si l'utilisateur s'attarde sur un élément. L'indice doit décrire le résultat de l'action, pas l'instruction : « Ouvre l'écran des paramètres » au lieu de « Appuyez pour ouvrir ».

Regroupement et ordre des éléments

Pour les écrans complexes où le groupe logique d'éléments ne correspond pas à l'ordre visuel, on utilise accessibilityElements — un tableau qui définit l'ordre de lecture. Par exemple, une fiche produit contient une image, un nom, un prix et un bouton « Ajouter au panier ». Si ces éléments sont disposés de manière chaotique dans la hiérarchie des vues, accessibilityElements établit l'ordre correct pour VoiceOver.

let productCard = UIView()
let productImage = UIImageView()
let productName = UILabel()
let productPrice = UILabel()
let addToCartButton = UIButton()

productCard.accessibilityElements = [
    productImage, productName, productPrice, addToCartButton
]

Pour combiner plusieurs éléments en un seul élément accessible, on utilise UIAccessibilityContainer ou accessibilityFrame pour remplacer la zone tactile. Cela est utile lorsqu'une cellule de tableau contient plusieurs composants d'interface mais représente logiquement un seul élément — VoiceOver doit vocaliser la cellule entière dans son ensemble, sans parcourir son contenu individuellement.

Configuration de l'accessibilité pour VoiceOver

La configuration correcte de l'accessibilité pour VoiceOver nécessite une attention à plusieurs aspects : balisage sémantique, mises à jour dynamiques, gestion des éléments personnalisés et tests avec un vrai lecteur d'écran.

Balisage sémantique dans SwiftUI

Dans SwiftUI, l'accessibilité est configurée via les modificateurs .accessibilityLabel(), .accessibilityValue(), .accessibilityHint() et .accessibilityAddTraits(). SwiftUI hérite automatiquement de l'accessibilité des éléments standard, mais les composants personnalisés nécessitent une configuration explicite. Par exemple, un curseur personnalisé doit indiquer sa valeur et son format de changement à VoiceOver.

Slider(value: $volume, in: 0...100)
    .accessibilityLabel("Volume sonore")
    .accessibilityValue(
        Text("\(Int(volume)) pour cent")
    )
    .accessibilityAddTraits(.adjustsAudioForAccessibility)
    .accessibilityAdjustableAction { direction in
        switch direction {
        case .increment: volume = min(volume + 5, 100)
        case .decrement: volume = max(volume - 5, 0)
        }
    }

Le modificateur accessibilityAdjustableAction ajoute la possibilité de modifier les valeurs avec les gestes VoiceOver : balayer vers le haut pour augmenter, balayer vers le bas pour diminuer. Sans ce modificateur, le curseur reste inaccessible pour le contrôle par le lecteur d'écran. Une configuration similaire est requise pour les steppers personnalisés, les sélecteurs et autres éléments qui modifient leur valeur.

Mises à jour dynamiques et notifications

Lorsque le contenu à l'écran change dynamiquement (une notification apparaît, l'état de chargement se met à jour, un prix change), VoiceOver doit recevoir une notification via UIAccessibility.post. Sans cet appel, le lecteur d'écran ne saura pas les changements et l'utilisateur manquera des informations importantes. Pour SwiftUI, on utilise le modificateur .accessibilityAnnouncement().

UIAccessibility.post(
    notification: .announcement,
    argument: "Prix réduit de 20 pour cent"
)

// SwiftUI
Text("Prix mis à jour")
    .accessibilityAnnouncement(Text("20% de réduction"))

Les notifications VoiceOver doivent être utilisées à bon escient : des annonces excessives irritent l'utilisateur, tandis que leur absence rend l'application inaccessible. La stratégie optimale consiste à n'annoncer que les changements qui affectent le flux de travail actuel de l'utilisateur : mises à jour du panier, état de chargement, erreur de validation de formulaire, notification de chat. Les changements d'arrière-plan (heure sur le panneau, taux de change) ne nécessitent pas d'annonce — l'utilisateur les vérifiera lui-même si nécessaire.

Les tests VoiceOver sont effectués sur un appareil physique avec le lecteur d'écran activé ou un simulateur iOS avec l'option Accessibility Inspector. Il est important de tester des scénarios d'utilisation complets : effectuer une inscription, passer une commande, trouver un produit par recherche sans contrôle visuel. Si le parcours est navigable sans retour visuel — VoiceOver est correctement configuré.