Série RGAA en pratique · Épisode 3 · 6 min

Zoom, reflow et responsive accessible

Ton site tient-il le zoom ? Dans cet épisode, on décortique trois critères de la thématique 10 du RGAA : le texte agrandi jusqu’à 200 % sans perte (10.4), le reflow en fenêtre étro…

Publié le 9 septembre 2026.Consulter la transcription de la vidéo Voir sur YouTube (nouvelle fenêtre)

Chapitres

Transcription

Texte intégral de la narration de l’épisode.

Situations du quotidien

Imagine que tu lis mal les petits caractères. Ton réflexe : agrandir le texte, ou zoomer sur la page. Sur beaucoup de sites, tout part de travers. Le texte grossit et déborde hors de son bloc, des mots se cachent derrière d’autres. Sur mobile, tu te retrouves à faire glisser la page à la fois de haut en bas et de gauche à droite pour lire une seule phrase. Et parfois, pire : le zoom est carrément bloqué. Ces trois blocages ont des critères RGAA précis, dans la thématique 10, la présentation de l’information. On les regarde ensemble.

Zoom, reflow et espacement

Trois critères, une même idée : l’utilisateur doit pouvoir adapter l’affichage à ses besoins sans rien perdre. Le critère 10.4 encadre l’agrandissement du texte jusqu’à 200 %. Le critère 10.11 encadre le reflow : rester lisible dans une fenêtre étroite, sans avoir à défiler dans les deux sens. Et le critère 10.12 garantit que l’utilisateur peut modifier l’espacement du texte, entre les lignes, les lettres, les mots, sans que ça casse. Ce ne sont pas des détails de confort : c’est ce qui rend un site utilisable quand on a une basse vision, ou tout simplement quand on est sur un petit écran.

Le texte double, la page tient

Premier critère, le 10.4. Son intitulé demande que le texte reste lisible quand la taille des caractères est augmentée jusqu’à 200 %, au moins. Concrètement : tu agrandis, et rien ne doit se perdre. Sur une page bien faite, quand le texte double, le bloc qui le contient s’étire, les lignes se recomposent, et tu lis tout jusqu’au bout. Sur une page fragile, le texte grossit mais son conteneur garde une hauteur fixe : les mots se chevauchent, une phrase se cache derrière un bouton, ou un texte est carrément coupé. Et il existe un piège encore plus radical, surtout sur mobile : empêcher purement et simplement l’agrandissement. Regardons ça dans le code.

Le zoom bloqué, dans le code

Le coupable se cache dans l’en-tête de la page, la balise meta viewport. À gauche, deux réglages qui condamnent le critère 10.4 : user-scalable égale no, qui interdit le zoom, et maximum-scale égale un, qui plafonne l’agrandissement. Sur mobile, l’utilisateur ne peut tout simplement plus agrandir la page pour lire. À droite, la version saine : on déclare la largeur de l’appareil et l’échelle de départ, et on laisse le zoom entièrement libre. La règle est simple : jamais de user-scalable égale no, jamais de maximum-scale bridé.

Une fenêtre étroite, une seule direction

Deuxième critère, le 10.11, le reflow. Son intitulé vise deux situations : une fenêtre réduite à 320 pixels de large pour un contenu qui se lit horizontalement, et une fenêtre réduite à 256 pixels de haut pour un contenu qui se lit verticalement. Dans ces conditions, tout doit rester disponible sans imposer de défilement dans les deux dimensions à la fois. En clair : quand la fenêtre est étroite, tu ne devrais avoir à défiler que dans un seul sens, en général vers le bas. Un bon site réorganise son contenu en une seule colonne. Un site fragile garde un tableau large figé, une image qui déborde ou une mise en page en colonnes rigides : tu es obligé de faire glisser la page de gauche à droite pour chaque ligne. Une astuce pour tester sur ordinateur : zoomer fort, jusqu’à 400 %, ramène la zone de lecture autour de cette largeur de 320 pixels. Le zoom à 400 % n’est pas un seuil du RGAA en soi, c’est un geste pratique pour reproduire la fenêtre étroite du critère. Et attention : un site peut être responsive et rater quand même le reflow, si un élément se coupe ou force un défilement latéral.

Ce qui casse le zoom et le reflow

Récapitulons les pièges qui reviennent le plus. À éviter : bloquer le zoom dans la balise viewport, ça condamne le critère 10.4 d’entrée. Éviter aussi les largeurs figées en pixels qui ne se replient jamais, et le texte enfermé dans une image, qui devient flou et illisible dès qu’on agrandit. À faire à la place : laisser le zoom libre, utiliser des unités souples et des points de rupture qui font repasser la mise en page en une seule colonne quand c’est étroit, et garder du vrai texte, stylé en CSS. Bonne nouvelle : ces deux critères se vérifient largement à l’œil. Tu agrandis, tu réduis ta fenêtre, tu regardes ce qui casse. Pas besoin d’outil compliqué pour repérer un texte coupé ou un défilement en diagonale.

L’utilisateur ré-espace, en CSS

Troisième critère, le 10.12, l’espacement du texte. Certaines personnes, notamment dyslexiques, aèrent le texte pour mieux lire : plus d’espace entre les lignes, entre les mots, entre les lettres. Le critère fixe des valeurs de test précises que ta page doit encaisser sans rien perdre. L’interligne poussé à 1,5 fois la taille de la police. L’espace après chaque paragraphe porté à 2 fois la taille de la police. L’espacement des lettres à 0,12 fois la taille de la police. Et l’espacement des mots à 0,16 fois la taille de la police. Si, en appliquant ces réglages, du texte se coupe, se chevauche ou disparaît derrière un autre bloc, le critère n’est pas respecté. La cause est presque toujours la même : une hauteur fixe imposée à un conteneur de texte, ou un débordement masqué en CSS. Laisse tes blocs de texte grandir en hauteur, et le problème disparaît.

Checklist

Checklist express, quatre gestes à faire sur tes pages clés. Un : agrandis le texte à 200 % et vérifie que rien n’est coupé ni caché. Réduis ensuite ta fenêtre jusqu’à 320 pixels de large : tu ne devrais défiler que dans un seul sens. Sur un grand écran, zoome fort, jusqu’à 400 %, pour retrouver cette fenêtre étroite sans changer d’appareil. Enfin, force un espacement du texte plus généreux et regarde si la page encaisse. Ces quatre gestes te font couvrir la plus grande partie de la thématique 10 sur le zoom et le reflow, en quelques minutes.

CTA

À toi de jouer. Prends une page importante de ton site et malmène-la un peu : agrandis, réduis la fenêtre, ré-espace le texte. Note les endroits où ça se coupe ou où tu défiles en diagonale, puis corrige avec des unités souples et des conteneurs qui grandissent en hauteur. Pour analyser une page et prioriser tes corrections d’accessibilité, rendez-vous sur RGAA Checker point com.

Approfondir dans le guide

Cet épisode aborde ces critères du RGAA 4.1.2. Ouvre leur fiche pour la méthode de test détaillée, les cas particuliers et les exemples.

Passer à l’action

La vidéo pose le cadre. Pour repérer des pistes d’amélioration sur un site réel, lance une analyse ou explore le guide des 106 critères.

Analyser un site Guide RGAA