N'ayez plus peur du lecteur d'écran VoiceOver sur Mac !

le 26/03/2025 par Améziane Allioui

Tags: Software Engineering, Numérique Responsable, Formation, Web, Front

Que vous soyez développeuse ou développeur, UX designer ou Product Owner, vous avez déjà peut-être entendu parler du lecteur d’écran VoiceOver sur Mac.

Vous vous demandez comment l’utiliser, ou peut-être pensez-vous que c’est trop complexe pour vous.

N’ayez plus peur ! Cet article va vous expliquer comment le prendre en main et les commandes de base pour tester votre page web avec ! En bonus, un tableau récapitulatif est disponible à la fin !

Petit rappel sur le lecteur d’écran

Un lecteur d’écran est un logiciel qui retranscrit les éléments affichés à l’écran. Soit oralement via une synthèse vocale intégrée, soit en braille via une plage braille branchée à l’appareil.

Il est principalement utilisé par les personnes aveugles et malvoyantes, qui ne voient pas ou peu l’écran. On retrouve également des utilisatrices et utilisateurs avec un trouble cognitif, moteur ou auditif, et enfin sans handicap, comme le montre cette enquête datant de 2024 !

Il nous permet ainsi de naviguer d’élément en élément, et de nous donner des informations sur chacun d’entre eux, depuis n’importe quelle fenêtre de notre système d’exploitation. Dans le cas d’une page web, il se basera sur le code HTML pour donner le rôle, le nom et l’état de chacun. Par exemple : “Champ de formulaire, Votre prénom, obligatoire”, “Lien, Octo.com, visité”. Ainsi que la structure globale de la page. D’où l’importance d’employer les bonnes balises sémantiques HTML !

De même, des fonctionnalités permettent de contrôler la lecture ou d’accéder rapidement à une partie. Par exemple, on pourra lister tous les titres de la page et accéder à celui qui nous intéresse.

Pour finir, chaque système d’exploitation a ses lecteurs d’écran attitrés. Il est donc important de tester son application en tenant compte des différents usages ! Exemples : VoiceOver sur Mac et iPhone, NVDA et Jaws sur Windows, TalkBack sur Android, etc.

VoiceOver : commençons par les bases

Installer VoiceOver ? Pas besoin !

VoiceOver étant directement intégré au Mac, aucune installation n’est nécessaire. Cela équivaut aussi pour tous les appareils avec iOS.

La touche de modification VoiceOver

Avant de manipuler le lecteur, vous devez connaître la touche de modification VoiceOver, que nous désignerons par “VO” ! Combinée à d’autres touches, elle va nous permettre d’activer les raccourcis et fonctionnalités propres au lecteur d’écran, sans interférer avec celles de notre machine.

Elle correspond par défaut :

Soit aux touches ⌃ (contrôle) et ⌥ (option), enfoncées simultanément,
Soit à la touche ⇪ (verrouillage majuscule).

On peut la paramétrer dans l’Utilitaire VoiceOver, le panneau de configuration dédié, dans la catégorie “Commandes”. Il est accessible depuis la recherche Spotlight ou via le raccourci VO + F8, qui équivaudra donc aux combinaisons ⌃ + ⌥ + F8 ou ⇪ + F8.

Allumer et éteindre VoiceOver

Pour allumer ou éteindre VoiceOver, il existe différents moyens :

Le plus connu : appuyez sur ⌘ (commande) et F5 simultanément.
Sur les MacBooks, avec la touche ⌘ enfoncée, appuyez rapidement sur le bouton Touch ID trois fois.
Dans la barre de recherche Spotlight, chercher “VoiceOver”. Une ligne correspondante s'affiche dans les résultats avec une case à cocher prévue à cet effet.
Enfin, avec Siri : dire “Active VoiceOver” ou “Désactive VoiceOver”.

VoiceOver est allumé… pas de panique !

Première utilisation

La première chose qui peut surprendre lorsqu’on allume VoiceOver, est la synthèse vocale. Vous pouvez dans un premier temps baisser le volume global à l’aide de VO + -.

Ensuite, une boîte de dialogue vous propose un tutoriel pour découvrir les gestes basiques. Vous pouvez le lancer avec la barre d’espace ou revenir dessus plus tard avec VO + ⌘ + F8. Autrement, cochez l’option “Ne plus afficher ce message” et cliquez sur “Utiliser VoiceOver”.

Vous avez alors la main sur le lecteur d’écran ainsi que ses raccourcis clavier et trackpad dédiés. Dans cet article, nous nous intéresserons uniquement aux raccourcis clavier.

Mettre en pause, modifier ou désactiver la voix

Il est possible à tout moment de mettre en pause la lecture en cours et la reprendre avec la touche ⌃.

Modifier la synthèse vocale

Appuyer sur VO + ⌘ + ⇧ (majuscule), puis les flèches gauche et droite pour aller au menu “Volume”, “Débit” ou encore “Tonalité”.
En restant appuyé sur VO + ⌘ + ⇧, faire votre choix avec les flèches haut et bas :

Désactiver la synthèse vocale

Deux méthodes existent :

Aller dans l’Utilitaire VoiceOver, dans la catégorie “Parole” puis l’onglet “Voix”, et cocher la case “Désactiver la parole”.
Avec VO + H + H, ouvrir le panneau “Aide commandes”, puis dans “Audio”, sélectionner “Activation / désactivation du son VoiceOver”.

Se repérer avec VoiceOver

Lorsque VoiceOver est activé, celui-ci annoncera toujours la fenêtre dans laquelle vous vous trouvez : “Finder, Documents, fenêtre”, “Firefox, Google, fenêtre”, etc.

En parallèle, une bordure noire s’affiche. Il s’agit du curseur VoiceOver qui nous permet de savoir visuellement où est positionné le lecteur d’écran.

De même, un panneau de visualisation, dit “panneau Légende”, affiche toutes les informations énoncées par la synthèse vocale.

Testons notre page web

Que voulons-nous tester ?

Le lecteur d’écran est utilisé majoritairement par les personnes aveugles, qui naviguent uniquement au clavier. Tester son site dans les mêmes conditions nous permettra d’une part, d’avoir une expérience proche, d’autre part, de repérer et corriger les erreurs d’accessibilité.

Les différents points que nous voulons vérifier :

Les éléments sont lus dans un ordre logique et les textes compréhensibles à l’oral (attention aux symboles, emojis et mots accentués) !
Le contenu est structuré par des titres et sous-titres.
Les liens, boutons et champs de formulaire ont un intitulé explicite.
Les informations transmises visuellement (couleur, forme, icône ou image) sont accessibles via le lecteur d’écran.
Les éléments dynamiques (notification, autocomplétion, mise à jour d’une partie de la page) sont restitués.

Des notices vous ont été mises dans les ressources pour plus d’explications.

Stopper la lecture automatique

Lorsqu’on ouvre une nouvelle page, VoiceOver nous annonce son titre (balise <title>). Puis par défaut va nous la dicter intégralement, ce qui peut vite s’avérer contraignant selon sa taille.

Vous pouvez désactiver ce comportement dans l’Utilitaire VoiceOver, en allant dans la catégorie “Web”, puis l’onglet “Général”, et en décochant l’option “Lire automatiquement la page web”.

Ne rater aucun élément

Pour parcourir et tester votre page, il faut se placer au tout début de celle-ci afin de ne rien manquer.

Une méthode courante consiste à sélectionner le premier lien ou bouton à la souris pour déplacer le curseur VoiceOver dessus, puis à tabuler pour atteindre les suivants.

Elle sera insuffisante si vous avez un titre caché en tout début de page (pour le référencement). De même avec les images ou paragraphes, non interactifs et ainsi inaccessibles à la tabulation !

Voici la bonne méthode :

Ouvrir le site et lancer VoiceOver. Il se place alors sur la zone de “contenu web”, qui contient notre page.
Effectuez la commande VO + ⇧ + flèche du bas, pour rentrer à l’intérieur de cette zone et interagir avec la page.

Une fois positionné sur celle-ci, vous pouvez la lire de manière linéaire avec VO et les flèches gauche et droite !

Les fonctionnalités pour naviguer rapidement

Le Rotor

Le Rotor permet de lister les composants de notre page par type (lien, bouton, image, etc.), et d’aller directement à celui qui nous intéresse.

Parmi les catégories affichées, certaines nous seront très utiles pour atteindre rapidement une zone spécifique : les “en-têtes”, c’est-à-dire les titres h1 à h6, et les “repères”, soit les différentes zones de notre page (en-tête, contenu principal, pied de page…).

Voici comment procéder :

Ouvrir le Rotor avec VO + U.
Accéder au menu souhaité avec les flèches gauche et droite: “En-têtes”, “Liens”, “Repères”, etc.
Filtrer les résultats en tapant un mot clé. Pour les en-têtes, tapez un chiffre entre 1 à 6 pour afficher ceux du niveau correspondant (h1, h2, …) !
Enfin, sélectionnez celui qui vous intéresse avec les flèches haut et bas puis la touche Entrée.

On peut choisir d’autres catégories à afficher en allant dans l’Utilitaire VoiceOver, dans la catégorie “Web” puis “Rotor web”. Pour conclure, le Rotor est disponible depuis n’importe quelle fenêtre sur votre Mac !

Aller au prochain en-tête, lien, image, liste, tableau, etc.

La commande de base est VO + ⌘ + la lettre dédiée. Si l’on prend le cas des en-têtes, la lettre dédiée sera le H. On exécutera alors le raccourci VO + ⌘ + H pour accéder au premier en-tête, puis le prochain, jusqu’à arriver au dernier, où le lecteur d’écran nous annoncera : “Dernier en-tête [Nom de l’en-tête]”.

Pour revenir à l’en-tête précédent, on ajoutera la touche ⇧, ce qui donnera comme commande VO + ⌘ + H + ⇧. Si VoiceOver n’en trouve plus, il nous dira : “En-tête introuvable”.

Pour finir, voici d’autres lettres :

M pour les en-têtes de même niveau uniquement,
L pour les liens,
X pour les listes,
T pour les tableaux,
G pour les images.

Spécificités de certains éléments

Les tableaux

En arrivant sur un tableau, le lecteur d’écran doit nous annoncer son titre, ainsi que le nombre de lignes et de colonnes.

En continuant la navigation, nous parcourons par défaut les cellules une à une, jusqu’à atteindre la dernière. Nous pouvons naviguer entre celles-ci à l’aide de VO et des touches fléchées.

À chaque fois que l’on change de ligne ou de colonne, le lecteur doit nous annoncer l’en-tête correspondante ainsi que le numéro de position :

Il nous est possible de sortir du tableau à tout moment, avec le raccourci VO + ⇧ + flèche haut, pour continuer le reste de la page !

Si l’on veut éviter de rentrer automatiquement dedans, il faut activer le “regroupement” :

Soit pour le tableau en cours avec VO + ⌘ + = ;
Soit pour tous les tableaux par défaut : dans l’Utilitaire VoiceOver, dans la catégorie “Web”, pour le paramètre “Navigation des tableaux web”, cocher l’option “Regrouper les éléments à l’intérieur”.

Une fois l’option activée, lorsque vous serez positionné sur un tableau, il sera désormais nécessaire d’utiliser VO + ⇧ + flèche bas pour accéder à ses cellules.

Les cadres

Les cadres (ou “iframes”) permettent d’intégrer dans notre page un contenu web externe (fil d’actualité, document pdf, vidéo Youtube, ...). Pour interagir avec celui-ci, il faudra là aussi rentrer à l’intérieur du cadre avec VO + ⇧ + flèche bas, et VO + ⇧ + flèche haut pour en sortir.

Enfin, le lecteur d’écran doit nous annoncer leur titre, qui doit décrire la nature du contenu. Par exemple : “Carte de France sur Google Maps, Cadre” ou “PDF Résultats de l’année 2025, Cadre”.

Les formulaires

Pour naviguer dans un formulaire, il faudra cette fois-ci utiliser les touches classiques du clavier et non les raccourcis du lecteur d’écran. C’est en effet ainsi que la plupart des utilisateurs de lecteur d’écran procèdent.

Voici les manipulations :

Aller de champ en champ avec la touche Tabulation (et ⇧ en plus pour revenir en arrière).
Sélectionner un bouton radio dans une liste avec les flèches directionnelles.
Cocher ou décocher une case à cocher avec espace.
Sélectionner une option dans une liste déroulante avec les flèches puis la touche Entrée.

Le lecteur d’écran doit annoncer pour chaque champ le nom, les caractéristiques (obligatoire, invalide, valeur sélectionnée), le format attendu (exemple : pour un numéro de téléphone) et le message d’erreur associé. De même, pour chaque case à cocher, si elle est cochée ou non.

Enfin, si un message de confirmation ou d’erreur global s’affiche à l’écran, celui-ci doit être aussitôt lu par le lecteur d’écran.

Conclusion

Nous avons vu dans cet article les principales fonctionnalités et raccourcis de VoiceOver, ainsi que des cas spécifiques, qui vous permettront de vérifier l’accessibilité de votre page Web. Sachez qu’ils fonctionnent aussi pour un document PDF et qu’il en existe bien d’autres, que nous n’avons pas pu tous citer !

Il peut être complexe au départ de s’approprier le lecteur d’écran, mais c’est en pratiquant et en vous exerçant que vous serez de plus en plus à l’aise ! À vous de jouer désormais !

Pour finir, je vous recommande en complément cet article sur les Easy Checks, qui sont dix tests manuels simples et rapides pour évaluer l'accessibilité de votre site !

Tableau récapitulatif

Fonctionnalité	Raccourci
Touche “VO”	⌃ (contrôle) + ⌥ (option) / ⇪ (verrouillage majuscule)
Lancer ou fermer le lecteur d'écran	- ⌘ (commande) + F5 - Avec ⌘ enfoncé, taper rapidement la Touch ID trois fois.
Lancer le tutoriel	VO + ⌘ + F8
Ouvrir l’Utilitaire VoiceOver (panneau de configuration)	VO + F8
Augmenter / diminuer le volume système	VO + = / VO + (-)
Mettre en pause ou relancer la lecture	⌃
Activer ou désactiver la voix	- Utilitaire VoiceOver, aller dans la catégorie “Parole”, puis dans l’onglet “Voix”, cocher la case “Désactiver la parole”. - VO + H + H, aller dans le menu “Audio”, puis sélectionner “Activation / désactivation du son VoiceOver”.
Aller à l’élément précédent ou suivant	VO + ← ou →
Entrer ou sortir d’un groupe de contenu (contenu web, cadre, tableau, etc.)	VO + ⇧ (majuscule) + ↓ ou ↑
Rotor (lister et accéder à un lien, en-tête, zone, etc.)	VO + U, puis aller au menu souhaité avec ← ou →, et choisir un élément avec ↑ ou ↓ et Entrée.
Aller au prochain ou précédent en-tête, lien, liste, tableau...	VO + ⌘ + H, L, X, T… (+ ⇧ pour l'élément précédent)
Naviguer entre les cellules d’un tableau	VO + ↑ ou ↓ ou ← ou →
Modifier le débit, volume, tonalité, voix...	Aller au menu dédié avec VO + ⌘ + ⇧ + ← ou →, puis sélectionner la valeur avec VO + ⌘ + ⇧ + ↑ ou ↓.