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

Texte illisible au zoom 200%

Le problème

Le critère 10.4 du RGAA exige que le texte reste lisible et fonctionnel lorsque l'utilisateur augmente la taille des caractères jusqu'à 200% au minimum. Les personnes malvoyantes utilisent fréquemment le zoom du navigateur ou les paramètres de taille de texte de leur système d'exploitation pour agrandir le contenu. Si le site n'est pas conçu pour supporter cet agrandissement, le texte peut se superposer à d'autres éléments, être tronqué par des conteneurs à taille fixe, ou déborder en dehors de la zone visible. Les causes les plus fréquentes de ce problème sont l'utilisation de hauteurs fixes en pixels sur les conteneurs de texte (height: 200px avec overflow: hidden), les tailles de police en unités absolues (px) au lieu d'unités relatives (rem, em), et les mises en page rigides qui ne s'adaptent pas à l'agrandissement du contenu. Un conteneur avec une hauteur fixe et un overflow: hidden va tout simplement couper le texte qui dépasse quand la taille de police augmente. L'utilisateur voit le début du paragraphe mais la suite est invisible et inaccessible. Les menus de navigation sont souvent les premiers éléments à poser problème au zoom. Un menu horizontal avec des items de largeur fixe voit ses textes se superposer ou se couper quand la taille de police augmente. Les en-têtes de tableau, les boutons avec une largeur fixe et les étiquettes de formulaire sont aussi des points sensibles. La solution consiste à utiliser des unités relatives (rem pour les tailles de police, em ou % pour les espacements), à éviter les hauteurs fixes sur les conteneurs de texte, et à tester systématiquement le rendu à 200% de zoom. Les propriétés CSS comme min-height au lieu de height, overflow: visible au lieu de overflow: hidden, et les media queries pour adapter la mise en page au zoom sont les outils principaux.

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

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

Testez votre site gratuitement

Impact sur les utilisateurs

En France, environ 1,7 million de personnes souffrent de déficience visuelle. Parmi elles, beaucoup utilisent le zoom du navigateur quotidiennement pour pouvoir lire le contenu web. Si un site devient inutilisable au zoom 200%, ces personnes sont exclues. Le texte tronqué par un overflow:hidden est de l'information perdue — l'utilisateur ne sait même pas ce qu'il manque. Le texte superposé est illisible car les caractères se chevauchent et deviennent un amas indéchiffrable. Les boutons dont le texte dépasse deviennent confus : l'utilisateur ne peut pas lire l'intitulé complet du bouton. Les personnes âgées sont aussi très concernées par ce problème. Avec l'âge, l'acuité visuelle diminue naturellement et le zoom devient une nécessité, pas un confort. Un site qui ne supporte pas le zoom exclut de fait les seniors, un segment démographique en forte croissance parmi les internautes.

Exemple de code

Avant (non conforme)
<style>
  .card {
    width: 300px;
    height: 200px;
    overflow: hidden;
  }
  .nav-item {
    font-size: 14px;
    width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .btn {
    font-size: 12px;
    padding: 8px 16px;
    width: 150px;
    overflow: hidden;
  }
</style>
Après (conforme)
<style>
  .card {
    max-width: 300px;
    min-height: 200px; /* min-height au lieu de height */
    overflow: visible;  /* visible au lieu de hidden */
  }
  .nav-item {
    font-size: 0.875rem;  /* rem au lieu de px */
    min-width: 120px;     /* min-width au lieu de width */
    white-space: normal;  /* normal au lieu de nowrap */
  }
  .btn {
    font-size: 0.75rem;
    padding: 0.5em 1em;   /* em au lieu de px */
    min-width: 150px;     /* min-width au lieu de width */
    overflow: visible;
  }
</style>

Questions fréquentes

Comment tester le zoom 200% sur mon site ?
Dans votre navigateur, utilisez Ctrl + (ou Cmd + sur Mac) pour zoomer. Zoomez jusqu'à 200% (indiqué dans la barre d'adresse ou les paramètres du navigateur). Parcourez chaque page et vérifiez que tout le texte reste lisible, qu'aucun contenu n'est tronqué, et que les fonctionnalités restent utilisables. Testez aussi le zoom texte seul via les paramètres de taille de police du navigateur.
Quelle différence entre le zoom navigateur et le zoom texte ?
Le zoom navigateur (Ctrl +) agrandit tout (texte, images, mise en page) proportionnellement. Le zoom texte (paramètres de taille de police du navigateur) n'agrandit que le texte, sans modifier la taille des images ni la mise en page. Le critère RGAA 10.4 concerne principalement le zoom texte. C'est le test le plus exigeant car la mise en page doit s'adapter à un texte plus grand dans les mêmes conteneurs.
Quelles unités CSS utiliser pour les tailles de police ?
Utilisez rem comme unité principale pour les tailles de police. Le rem est relatif à la taille de police racine (html), ce qui permet à l'utilisateur de contrôler la taille du texte via les paramètres du navigateur. Évitez les px pour les tailles de police car ils ne respectent pas les préférences utilisateur dans tous les navigateurs. Les em sont utiles pour les paddings et marges relatifs à la taille du texte.
Mon menu horizontal se casse au zoom. Comment le corriger ?
Utilisez flexbox avec flex-wrap: wrap pour que les items du menu passent à la ligne suivante quand l'espace est insuffisant. Remplacez les largeurs fixes par des min-width. Évitez white-space: nowrap sur les items qui contiennent du texte. Envisagez de passer à un menu hamburger au-delà d'un certain seuil de zoom via une media query.

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