Zoom et redimensionnement du texte : agrandir sans casser la page
En bref — un site qui reste lisible quand on l'agrandit
Des millions de personnes — basse vision, presbytie, simple confort — agrandissent le texte ou zooment la page pour lire. Votre boutique doit rester utilisable dans ce cas : les prix, les boutons et le tunnel d'achat ne doivent ni disparaître, ni se chevaucher, ni forcer un défilement horizontal. L'European Accessibility Act (norme EN 301 549 / WCAG 2.1 AA) l'exige depuis le 28 juin 2025. Les points clés :
- Le texte s'agrandit jusqu'à 200 % sans perte de contenu ni de fonction (critère 1.4.4) ;
- Pas de défilement horizontal : le contenu se réorganise en une colonne (reflow, critère 1.4.10) ;
- Le pincement-zoom reste autorisé sur mobile — ne désactivez pas le zoom (critère 1.4.4) ;
- L'espacement du texte reste modifiable sans rien couper (critère 1.4.12) ;
- Pas de texte sous forme d'image, qui se pixelise au zoom (critère 1.4.5) ;
- Rien n'est tronqué : pas de hauteur fixe qui coupe le texte agrandi.
Bonne nouvelle : un site construit avec des unités relatives et une mise en page fluide passe ces règles presque sans effort.
Une cliente de 55 ans presse Ctrl et + deux fois pour lire confortablement : si votre site se met alors à déborder de l'écran, à faire disparaître le bouton « Payer » ou à superposer le prix sur la photo, elle n'achètera pas. Le redimensionnement et le zoom sont parmi les besoins d'accessibilité les plus courants — et l'un des plus faciles à respecter quand on connaît les règles. Voici les six points WCAG que l'EAA impose pour qu'un e-commerce reste lisible quand on l'agrandit, et comment les vérifier en deux minutes.
Pourquoi le zoom est un test d'accessibilité majeur
Agrandir le texte est le réflexe naturel de toute personne qui voit mal : basse vision, fatigue oculaire, presbytie après 45 ans, écran trop petit. Beaucoup zooment le navigateur à 150 %, 200 % ou plus en permanence. Un site qui « casse » à ce moment-là — texte coupé, colonnes empilées de travers, défilement horizontal, boutons hors écran — exclut une part énorme de sa clientèle, et souvent les acheteurs au pouvoir d'achat le plus élevé.
L'EAA s'appuie sur l'EN 301 549, fondée sur les WCAG 2.1 niveau AA, applicables au commerce électronique depuis le 28 juin 2025. Le zoom et le redimensionnement relèvent surtout de quatre critères : 1.4.4 (Redimensionnement du texte), 1.4.10 (Réorganisation / reflow), 1.4.12 (Espacement du texte) et 1.4.5 (Texte sous forme d'image). Aucun n'exige une refonte : ils demandent surtout d'éviter quelques mauvaises pratiques de mise en page.
Les 6 règles pour un site lisible au zoom
Zoomer ne doit faire perdre ni contenu ni fonction
Une personne doit pouvoir agrandir le texte jusqu'à 200 % (zoom du navigateur, Ctrl/Cmd + +) sans qu'aucun texte, bouton ou information ne disparaisse ou devienne inutilisable. La clé : des unités relatives (rem, em, %) pour les tailles de police et les conteneurs, plutôt que des pixels figés et des hauteurs verrouillées. Ne bloquez jamais le zoom et ne réduisez pas la police en réaction au zoom.
rem/em, conteneurs qui grandissent avec le texte ; à 200 %, tout reste visible et cliquable.px dans une boîte à height fixe : à 150 % le texte déborde ou est coupé.Le contenu se réorganise en une seule colonne
Au zoom fort (l'équivalent d'une fenêtre de 320 px de large, soit environ 400 % de zoom sur un écran courant), le contenu doit se réorganiser pour tenir sans défilement horizontal : une seule colonne, on ne fait défiler que verticalement. C'est exactement ce que fait une mise en page « responsive » bien conçue. Évitez les largeurs fixes en pixels, les grilles multi-colonnes rigides et les éléments plus larges que l'écran.
width: 1200px figé : au zoom, il faut faire défiler horizontalement pour lire chaque ligne.Le pincement-zoom doit rester possible
Sur mobile, le geste de pincement pour zoomer est vital pour beaucoup d'utilisateurs. Or une balise <meta name="viewport"> avec user-scalable=no ou maximum-scale=1 le désactive — une erreur fréquente, parfois héritée d'un thème ou d'un plugin. Laissez les utilisateurs zoomer : une balise viewport saine se limite à width=device-width, initial-scale=1.
<meta name="viewport" content="width=device-width, initial-scale=1">....content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> : le zoom mobile est bloqué.Augmenter l'interligne ne doit rien couper
Certaines personnes dyslexiques ou malvoyantes utilisent une extension ou un réglage qui augmente l'interligne, l'espacement des lettres, des mots et des paragraphes pour mieux lire. Votre contenu doit absorber ces réglages sans que du texte soit tronqué ou recouvert. Concrètement : évitez les hauteurs fixes sur les blocs de texte (boutons, étiquettes, cartes produit) et préférez min-height à height, avec un débordement qui s'adapte.
height fixe avec overflow:hidden : le texte espacé est rogné.Le vrai texte reste net à n'importe quel zoom
Un texte intégré dans une image (bandeau promo « -20 % », caractéristiques d'un produit, guide des tailles en JPG) devient flou et pixelisé dès qu'on l'agrandit, contrairement au vrai texte HTML qui reste net. Le critère 1.4.5 demande d'utiliser du vrai texte plutôt que des images de texte, sauf cas particulier (logo, ou personnalisation visuelle essentielle). Bonus : le vrai texte est aussi lu par les lecteurs d'écran et indexé par Google.
Les éléments fixes ne doivent pas manger l'écran
Au zoom, les barres collantes (en-tête fixe, bandeau cookies, bouton de chat) prennent proportionnellement beaucoup de place et peuvent recouvrir le contenu ou le rendre inaccessible. Vérifiez qu'à 200 % on peut toujours atteindre et utiliser le tunnel d'achat, fermer les pop-ups et lire les messages. Évitez aussi les contenus apparaissant au survol (info-bulles) qui disparaissent dès qu'on bouge : ils doivent rester affichables et fermables (critère 1.4.13).
Récapitulatif des critères pour le zoom et le redimensionnement
| Point à vérifier | Niveau | Critère WCAG |
|---|---|---|
| Texte agrandissable à 200 % sans perte | AA | 1.4.4 |
| Reflow sans défilement horizontal (320 px / 400 %) | AA | 1.4.10 |
| Pincement-zoom non désactivé (viewport) | AA | 1.4.4 |
| Espacement du texte modifiable sans casse | AA | 1.4.12 |
| Vrai texte plutôt qu'image de texte | AA | 1.4.5 |
| Contenu non masqué / info-bulles persistantes | AA | 1.4.10 · 1.4.13 |
viewport qui bloque le zoom mobile. Pour « protéger » une mise en page, on ajoute parfois user-scalable=no ou maximum-scale=1 — souvent sans le savoir, car c'est livré par un thème ou un plugin. Résultat : sur smartphone, impossible de pincer pour agrandir, là où le besoin est le plus fort. La correction tient en une ligne : retirez ces paramètres et gardez width=device-width, initial-scale=1.
viewport et ne transforme pas une image de texte en vrai texte : ce sont des choix de code et de mise en page. Rappel : la FTC américaine a sanctionné un éditeur d'overlay d'un million de dollars pour des allégations de conformité trompeuses. Voir pourquoi les overlays ne suffisent pas.Comment vérifier le zoom de votre site
Trois tests rapides, faisables sur n'importe quel ordinateur :
- Zoom navigateur à 200 % (Ctrl/Cmd + +) : parcourez une fiche produit et le tunnel d'achat. Tout doit rester visible, lisible et cliquable.
- Zoom à 400 % ou fenêtre réduite à 320 px de large : vérifiez l'absence de défilement horizontal — on ne doit scroller que verticalement.
- Sur mobile : essayez de pincer pour zoomer. Si rien ne bouge, votre balise
viewportbloque le zoom.
Un scan automatique repère certains de ces problèmes (notamment la balise viewport qui désactive le zoom et le texte sous forme d'image sans alternative), mais le test au zoom réel reste le plus parlant.
→ Méthode complète : comment tester l'accessibilité de son site. Voir aussi l'accessibilité mobile et le contraste des couleurs, étroitement liés à la lisibilité.
Vérifiez l'accessibilité de votre boutique gratuitement
DeclareAccess analyse une page de votre site avec le moteur axe-core selon les WCAG 2.1 AA, repère les manquements (zoom bloqué, texte en image, contraste, structure, formulaires…) et génère la déclaration d'accessibilité prête à publier — modèle français (RGAA), allemand (BFSG), italien ou espagnol. Gratuit, sans carte bancaire.
Rapport WCAG par e-mail sous 24 h ouvrées.
C'est noté. Votre client e-mail va s'ouvrir avec la demande pré-remplie — il vous suffit de l'envoyer.
Questions fréquentes
Faut-il fixer une taille de police minimale ?
L'EAA (via les WCAG 2.1 AA) n'impose pas de taille de police minimale en pixels. Ce qu'elle exige, c'est que l'utilisateur puisse agrandir le texte jusqu'à 200 % sans perte (critère 1.4.4) et personnaliser l'espacement (1.4.12). En pratique, partir d'une base lisible (autour de 16 px / 1 rem) en unités relatives et ne jamais bloquer le zoom suffit à respecter ces critères. Un corps de texte très petit reste une mauvaise pratique de confort, même s'il n'est pas formellement interdit.
Quelle différence entre « redimensionner le texte » et « zoomer la page » ?
Le redimensionnement du texte agrandit uniquement la police (réglage du navigateur ou du système). Le zoom de la page agrandit tout (texte, images, espacements) — c'est le Ctrl + + le plus courant. Les WCAG couvrent les deux : le critère 1.4.4 vise l'agrandissement à 200 %, et le 1.4.10 (reflow) vise le comportement au zoom fort, sans défilement horizontal. En pratique, une mise en page fluide en unités relatives répond aux deux.
Mon site est « responsive » : suis-je déjà conforme ?
C'est un excellent point de départ, car le reflow (1.4.10) repose sur les mêmes principes que le responsive. Mais « responsive » ne garantit pas tout : il faut aussi vérifier que le zoom n'est pas bloqué sur mobile (balise viewport), qu'aucun bloc à hauteur fixe ne coupe le texte agrandi, et qu'il n'y a pas d'image de texte. Le mieux est de tester réellement à 200 % et 400 %.
Pourquoi éviter user-scalable=no dans la balise viewport ?
Parce qu'il désactive le pincement-zoom sur mobile : une personne malvoyante ne peut plus agrandir la page pour lire un prix ou remplir le paiement. C'est un échec direct du critère 1.4.4. Ce paramètre est souvent ajouté par un thème ou un plugin sans intention de nuire : il suffit de le retirer et de garder width=device-width, initial-scale=1.
Un guide des tailles en image pose-t-il problème ?
Oui, à double titre. Au zoom, une image de tableau se pixelise et devient illisible (échec du 1.4.5) ; et un lecteur d'écran ne peut pas lire ses chiffres. La bonne pratique est de publier le guide des tailles en vrai tableau HTML : net à tout zoom, lisible par les technologies d'assistance et indexé par Google. Voir notre guide des tableaux de données accessibles.