Texte non agrandissable à 200% : RGAA 10.4, correction CSS

Q: Les unités rem suffisent-elles pour valider le critère ?

Les rem sont une bonne base car ils respectent la taille de police définie dans le navigateur. Mais il faut aussi que les conteneurs soient flexibles ( min-height , pas height ). L'un sans l'autre ne suffit pas.

C'est quoi

Les personnes malvoyantes agrandissent la taille du texte via les paramètres de leur navigateur ou de leur système d'exploitation.

Le critère porte sur l'agrandissement du texte seul (pas de la page entière) jusqu'à 200% par rapport à la taille par défaut du navigateur.

Les problèmes courants :

Texte défini en pixels (font-size: 14px) : il ignore les préférences de taille de police si le navigateur n'agrandit que le texte.
Conteneur à hauteur fixe (height: 40px) : le texte agrandi déborde ou est masqué par overflow: hidden.
Texte tronqué par white-space: nowrap ou overflow: hidden sur un conteneur inflexible.

Qui est touché

Les personnes malvoyantes qui agrandissent le texte via les réglages navigateur ou système pour améliorer leur lisibilité.
Les personnes âgées dont la sensibilité visuelle diminue et qui dépendent d'un texte plus grand pour lire confortablement.

Impact business

Un texte coupé ou masqué à 200% prive l'utilisateur d'une partie de l'information de la page. Si c'est un label de formulaire, une instruction d'erreur ou un intitulé de navigation qui disparaît, l'utilisateur ne peut plus accomplir son objectif.

L'agrandissement du texte est l'une des personnalisations les plus utilisées par les personnes malvoyantes qui ne recourent pas encore à un lecteur d'écran.

Sources des chiffres

Comment le détecter

Navigateur : dans Chrome ou Firefox, va dans les paramètres de police et augmente la taille de police par défaut à 32px (le double de 16px). Parcours la page et vérifie qu'aucun texte ne déborde, n'est masqué ou tronqué.
Zoom texte uniquement : dans Firefox, désactive "Utiliser le zoom complet de la page" (Affichage > Zoom > Zoom texte uniquement) et zoome à 200%.
Audit Mynto : le scanner détecte les hauteurs fixes en pixels sur des conteneurs contenant du texte.

Comment corriger

Avant - CSS

/* Hauteur fixe en pixels : le texte agrandi déborde */
.bandeau-promo {
  height: 40px;
  overflow: hidden;
  font-size: 14px;
}

Après - CSS

/* Hauteur minimale en em, overflow visible */
.bandeau-promo {
  min-height: 2.5em;
  overflow: visible;
  font-size: 0.875rem;
}

Remplace les hauteurs fixes en px par min-height en em ou rem, pour que le conteneur s'adapte quand le texte grossit.

Utilise rem pour les tailles de police plutôt que px : un rem est relatif à la taille de police racine du navigateur, que l'utilisateur peut ajuster dans ses réglages.

Evite overflow: hidden sur des conteneurs contenant du texte, sauf si tu es certain que le texte ne peut pas déborder (ce qui n'est jamais garanti après agrandissement).

Sur WordPress, Gutenberg génère parfois des conteneurs à hauteur fixe dans les colonnes ou les bandeaux. Préfère des blocs en min-height et vérifie les CSS du thème actif.

Questions fréquentes

Quelle est la différence entre zoom page et agrandissement texte ?

Le zoom page (Ctrl + molette) agrandit tout - texte ET mise en page. Le critère RGAA 10.4 cible l'agrandissement du texte seul, que proposent Firefox et les paramètres système. Les deux doivent rester utilisables, mais le critère cible spécifiquement le texte.

Les unités rem suffisent-elles pour valider le critère ?

Les rem sont une bonne base car ils respectent la taille de police définie dans le navigateur. Mais il faut aussi que les conteneurs soient flexibles (min-height, pas height). L'un sans l'autre ne suffit pas.

Que faire des polices d'icônes définies en pixels ?

Pour les polices d'icônes décoratives, les pixels sont acceptables car le critère porte sur le texte informatif. Si une icône porte du sens, ajoute un texte alternatif masqué visuellement via .sr-only.

Cette erreur est-elle sur ton site ?

Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.

Texte non agrandissable à 200%