RGAA 10.4 — Dans chaque page web, le texte reste-t-il lisible lorsque la taille des caractères est augmentée jusqu'à 200% ?

Texte non lisible à 200% de zoom

Le problème

Le texte non redimensionnable survient lorsque le contenu textuel ne s'adapte pas correctement lorsqu'un utilisateur augmente la taille de police jusqu'à 200% dans les paramètres du navigateur. Le critère RGAA 10.4 (correspondant au WCAG 1.4.4, niveau AA) exige que le texte puisse être redimensionné jusqu'à 200% sans perte de contenu ou de fonctionnalité, et sans nécessiter de défilement horizontal.

Ce problème est causé par l'utilisation de tailles de police en pixels fixes (px), de conteneurs à hauteur fixe qui tronquent le contenu agrandi, de propriétés CSS comme `overflow: hidden` sur des éléments de taille fixe, et de mises en page rigides qui ne s'adaptent pas à l'augmentation de la taille du texte.

Il est important de distinguer le zoom du navigateur (qui agrandit tout proportionnellement) de l'augmentation de la taille de texte seule (qui n'agrandit que le texte). Le critère RGAA 10.4 concerne principalement l'augmentation de la taille du texte, bien que les deux doivent fonctionner correctement.

Impact sur les utilisateurs

Pour les utilisateurs malvoyants qui augmentent systématiquement la taille du texte pour pouvoir lire, un texte qui ne se redimensionne pas ou qui est tronqué à 200% les exclut du contenu. Si un paragraphe est coupé en milieu de phrase à cause d'un `overflow: hidden` sur un conteneur à hauteur fixe, l'information est perdue.

Ce problème touche des millions de personnes : environ 2,2 milliards de personnes dans le monde ont une déficience visuelle, et beaucoup utilisent le zoom ou l'augmentation de taille de texte comme adaptation quotidienne. Les personnes âgées sont particulièrement concernées.

Le texte qui déborde de son conteneur sans possibilité de défilement, ou qui se superpose à d'autres éléments, rend la page non seulement illisible mais potentiellement inutilisable -- boutons cachés, formulaires tronqués, navigation inaccessible.

Votre site a-t-il ce problème ?

106 critères RGAA analysés en 5 minutes par notre IA.

Testez votre site gratuitement

Exemple de code

Avant (non conforme)

/* Taille de police fixe en pixels */
body { font-size: 14px; }
h1 { font-size: 24px; }

/* Conteneur à hauteur fixe */
.card {
  height: 200px;
  overflow: hidden; /* Tronque le contenu agrandi */
}

/* Texte qui ne s'adapte pas */
.hero-text {
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
}

Après (conforme)

/* Taille de police en unités relatives */
body { font-size: 1rem; }
h1 { font-size: 1.5rem; }

/* Conteneur à hauteur adaptable */
.card {
  min-height: 200px; /* min- au lieu de height fixe */
  overflow: visible;
}

/* Texte qui s'adapte */
.hero-text {
  font-size: 1rem;
  white-space: normal;
  overflow-wrap: break-word;
}

Comment Scrutia détecte ce problème

Scrutia simule l'augmentation de la taille de police à 200% sur chaque page et vérifie que le contenu reste lisible et fonctionnel. Il détecte les éléments dont le texte est tronqué (overflow: hidden sur conteneurs de taille fixe), les superpositions de texte, et les contenus qui nécessitent un défilement horizontal. Le rapport identifie les éléments problématiques et propose des correctifs CSS spécifiques.

Questions fréquentes

Dois-je utiliser rem ou em au lieu de px ?

Oui, pour les tailles de police. Les unités rem et em sont relatives et s'adaptent quand l'utilisateur modifie la taille de texte par défaut du navigateur. Les pixels sont absolus et ne répondent pas à ce réglage. Utilisez rem pour les tailles de police et em pour les marges et paddings relatifs au texte.

Le zoom du navigateur est-il différent de l'augmentation de la taille de texte ?

Oui. Le zoom (Ctrl/Cmd + +) agrandit tout proportionnellement, y compris les images et les mises en page. L'augmentation de la taille de texte (dans les paramètres du navigateur) n'agrandit que le texte. Les deux doivent fonctionner, mais le critère RGAA 10.4 cible spécifiquement la taille de texte.

Comment éviter le troncage à 200% ?

Remplacez height par min-height sur les conteneurs, supprimez overflow: hidden sauf quand c'est vraiment nécessaire, utilisez des unités relatives pour les tailles de police, et testez systématiquement à 200% de zoom. Évitez white-space: nowrap sur du texte qui peut s'allonger.

Les frameworks CSS comme Tailwind gèrent-ils ce problème ?

Tailwind utilise rem par défaut pour les tailles de texte (text-sm, text-base, text-lg), ce qui est un bon départ. Cependant, les conteneurs de taille fixe (h-48, h-64) et overflow-hidden doivent être utilisés avec précaution. Testez toujours à 200%.

Votre site a-t-il ce problème ?

Scrutia audite votre site sur 106 critères RGAA en 5 minutes. Navigation clavier, composants ARIA, focus visible, contrastes, et bien plus.

Lancer un audit gratuit