Chapitre 7.4 — Taille, zoom & reflow

⏱️ TL;DR — Beaucoup d’utilisateurs agrandissent le texte ou zooment pour lire. Ton interface doit suivre. WCAG demande : le texte redimensionnable jusqu’à 200 % sans perte de contenu ou de fonction (1.4.4), un reflow utilisable à l’équivalent d’une largeur de 320px sans défilement horizontal à 400 % de zoom (1.4.10), et un espacement du texte ajustable sans casse (1.4.12). Les réflexes gagnants : unités rem/em, layouts fluides, hauteurs non figées — et surtout ne jamais bloquer le zoom.

🎯 Objectifs

• Distinguer agrandissement du texte (1.4.4) et reflow au zoom (1.4.10).
• Comprendre l’exigence d’espacement du texte ajustable (1.4.12).
• Utiliser rem/em et des mises en page fluides plutôt que des dimensions figées.
• Ne jamais désactiver le zoom (user-scalable=no est interdit).

Trois exigences complémentaires

Elles se ressemblent mais ne testent pas la même chose.

1.4.4 — Le texte doit grossir

Un utilisateur malvoyant règle son navigateur pour agrandir le texte. Si tes tailles sont figées en pixels absolus, elles peuvent ne pas suivre certains réglages ; si tes conteneurs ont des hauteurs fixes, le texte agrandi déborde ou se fait couper.

/* ❌ Taille figée + hauteur fixe : le texte agrandi est tronqué */
.carte-titre {
  font-size: 16px;
  height: 40px;      /* coupe le texte dès qu'il grandit */
  overflow: hidden;
}
 
/* ✅ Unité relative + hauteur qui s'adapte au contenu */
.carte-titre {
  font-size: 1rem;   /* suit la taille de base choisie par l'utilisateur */
  min-height: 2.5rem;
  line-height: 1.4;
}

Deux règles d’or : des unités relatives (rem pour caler sur la préférence de l’utilisateur, em pour caler sur le parent) et jamais de hauteur figée sur un conteneur de texte — préfère min-height, laisse la boîte grandir.

1.4.10 — Le reflow

Le reflow, c’est la capacité du contenu à se ré-agencer sur une colonne étroite au lieu de forcer un défilement horizontal. Concrètement : à 400 % de zoom sur un écran classique, ta page doit rester utilisable dans l’équivalent d’une largeur de 320px — comme sur un petit mobile — sans qu’on ait à scroller de gauche à droite pour lire une phrase.

Le défilement horizontal pour lire est épuisant : il faut balayer à droite pour finir chaque ligne, puis revenir tout à gauche pour la suivante. Un layout fluide et responsive règle ça presque gratuitement.

/* ❌ Largeur fixe : provoque un scroll horizontal au zoom / sur petit écran */
.contenu {
  width: 1200px;
}
 
/* ✅ Fluide : le contenu se replie dans l'espace disponible */
.contenu {
  width: 100%;
  max-width: 75ch;      /* plafonne la longueur de ligne, sans figer */
  margin-inline: auto;
}

Utilise Flexbox/Grid avec wrap, des max-width plutôt que des width figées, et des media queries. Ce chantier recoupe entièrement le responsive : on le traite en détail en Partie 13 — Mobile, responsive & mouvement. (Exception admise par 1.4.10 : certains contenus 2D comme les grands tableaux ou les cartes peuvent nécessiter un défilement — mais c’est l’exception, pas ton layout de page.)

1.4.12 — L’espacement du texte

Certaines personnes (dyslexie, basse vision) appliquent une feuille de style qui augmente l’interligne, l’espacement des mots et des lettres, et les marges de paragraphe pour lire plus confortablement. Ton design doit encaisser ça sans que du texte se chevauche, se coupe ou disparaisse.

En pratique : évite les hauteurs fixes (encore), ne compte pas sur un line-height ultra-serré, et teste avec un bookmarklet qui force les valeurs cibles de 1.4.12. Si rien ne casse, tu es bon.

Ne JAMAIS bloquer le zoom

Le pire réflexe historique du mobile : empêcher l’utilisateur de zoomer avec les doigts pour « garder le design intact ».

<!-- ❌ INTERDIT : désactive le zoom pinch, viole 1.4.4 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1" />
 
<!-- ✅ Laisse l'utilisateur zoomer autant qu'il veut -->
<meta name="viewport" content="width=device-width, initial-scale=1" />

user-scalable=no et un maximum-scale bas privent les personnes malvoyantes du seul moyen d’agrandir sur mobile. Ne les mets jamais. Le zoom n’est pas un bug à corriger, c’est une fonctionnalité d’accessibilité essentielle.

⚠️ Piège — Les hauteurs fixes qui coupent le texte. height en dur sur un bouton, un badge, une carte ou un line-clamp trop serré : tant que le texte est court et en taille normale, tout va bien. Dès qu’on l’agrandit (1.4.4) ou qu’on force l’espacement (1.4.12), le texte déborde et se fait rogner. Le remède est presque toujours le même : remplace height par min-height et laisse la boîte respirer.

💡 Réflexe — Configure la taille de police de base en unité relative (par ex. html { font-size: 100%; }) et exprime le reste en rem. Toute ta typographie devient alors proportionnelle à la préférence de l’utilisateur, et l’agrandissement « juste marche » partout d’un coup.

🧭 Sur A11yLearn — Le catalogue d’A11yLearn plafonnait chaque carte de cours à height: 220px avec un titre en font-size: 18px. À 200 % de zoom texte, les titres longs disparaissaient sous une carte voisine et le bouton « S’inscrire » sortait du cadre. On a supprimé les hauteurs fixes (passage à min-height), converti les tailles en rem, et retiré un user-scalable=no oublié dans le <meta viewport>. Résultat : à 200 % comme à 400 %, les cartes s’allongent et se replient au lieu de tronquer — plus rien n’est perdu.

✏️ Exercices

Exercice 1 — Répare la carte. Ce CSS tronque le texte dès qu’on agrandit :

.badge {
  font-size: 14px;
  height: 24px;
  overflow: hidden;
  white-space: nowrap;
}

Réécris-le pour respecter 1.4.4 et 1.4.12.

.badge {
  font-size: 0.875rem;   /* relatif : suit la préférence utilisateur */
  min-height: 1.5rem;    /* min, pas fixe : la boîte peut grandir */
  line-height: 1.4;
  /* on retire overflow:hidden + white-space:nowrap qui coupaient le texte */
}

Exercice 2 — Le <meta viewport>. Un dev mobile a écrit <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> pour « éviter que le layout bouge ». Quel critère viole-t-il et que corriges-tu ?

🧠 Quiz de révision

Chapitre suivant : Langue & lisibilité — déclarer la langue de la page et écrire pour être réellement lu.