Le texte de votre site reste-t-il lisible et non tronqué quand on agrandit l'affichage à 200% ou 400% ?
Critère officiel 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 (hors cas particuliers) ?
Pourquoi c'est important
De nombreux seniors et personnes malvoyantes agrandissent le texte de leur navigateur pour lire confortablement. Si le texte est rogné, si les colonnes se chevauchent ou si des boutons disparaissent dès 200%, ces utilisateurs perdent l'accès à une partie du contenu — souvent aux formulaires ou aux boutons d'action.
Exemples concrets
Ce qui est conforme
La page du formulaire de contact, agrandie à 200% puis 400%, reste entièrement lisible. Le texte s'adapte en une seule colonne, les champs de saisie restent visibles, le bouton « Envoyer » reste accessible. Aucune information n'est perdue.
Ce qui pose problème
La même page agrandie à 200% affiche les champs de formulaire qui débordent hors de l'écran à droite. Le bouton « Envoyer » est partiellement masqué par la colonne latérale. Un senior qui agrandit pour lire confortablement ne peut plus soumettre sa demande.
Comment agir
Test autonome : appuyez plusieurs fois sur Ctrl+Plus (Cmd+Plus sur Mac) jusqu'à 200%, puis jusqu'à 400%. Vérifiez que tout le texte reste lisible et qu'aucun bouton ou champ ne disparaît ou ne se chevauche. Si quelque chose se bloque ou se coupe, signalez la page exacte et le niveau de zoom problématique à votre prestataire.
Règles clés
- Utiliser rem pour les tailles de police (1rem = taille de base du navigateur, généralement 16px).
- Utiliser em ou min-height: auto pour les conteneurs — jamais height: NNpx fixe sur des conteneurs de texte.
- Tester avec le zoom texte uniquement (Firefox : Affichage > Zoom > Zoom texte uniquement, puis Ctrl++) — pas avec le zoom global.
- Tester à 200% sur tous les composants interactifs : navigation, formulaires, boutons, modals.
- overflow: hidden sur un conteneur de texte est une source d'erreur fréquente à 200%.
Erreurs fréquentes
- Tailles de police définies en px au lieu de rem ou em — le texte n'agrandit pas avec le zoom texte
- Hauteurs de conteneurs fixes en px — le texte agrandi déborde
- Boutons avec height: 40px fixe — le texte agrandi sort du bouton
- Texte dans des éléments positionnés en absolute avec overflow: hidden
- Navigation avec des éléments à hauteur fixe — les liens de navigation débordent en colonne à 200%
- CSS avec white-space: nowrap sur des textes longs — empêche le retour à la ligne nécessaire à 200%
Exemples de code
tailles en px — texte ne s'agrandit pas
✗ Non conformebody {
font-size: 16px; /* fixe en px */
}
h1 {
font-size: 32px; /* fixe en px */
}
.btn {
font-size: 14px; /* fixe en px */
height: 40px; /* hauteur fixe */
padding: 0 16px;
}Les tailles en px ne répondent pas au zoom texte du navigateur. À 200%, rien ne s'agrandit. Les conteneurs à hauteur fixe feront déborder le texte si le zoom global est utilisé.
tailles relatives — texte s'agrandit correctement
✓ Conformehtml {
font-size: 100%; /* hérite de la préférence utilisateur */
}
body {
font-size: 1rem; /* s'adapte à la base utilisateur */
}
h1 {
font-size: 2rem; /* 2× la taille de base */
}
.btn {
font-size: 0.875rem;
min-height: 2.75rem; /* min-height plutôt que height */
padding: 0.5rem 1rem; /* padding en rem */
line-height: 1.4;
}Tout en rem. html: 100% hérite de la taille de base définie par l'utilisateur dans les préférences navigateur. min-height sur le bouton permet au texte de pousser le conteneur à 200%.
conteneur à hauteur fixe avec débordement
✗ Non conforme.card-excerpt {
height: 80px;
overflow: hidden; /* masque le texte agrandi */
font-size: 14px;
}À 200% de zoom texte, le texte prend plus de place. overflow: hidden masque silencieusement la partie débordante — l'utilisateur ne voit qu'une partie du contenu sans indication qu'il est tronqué.
conteneur adaptatif
✓ Conforme.card-excerpt {
/* Pas de height fixe */
max-height: 5rem; /* limite en rem, s'adapte au zoom */
overflow: hidden;
/* Optionnel : indicateur de troncature */
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
font-size: 0.875rem;
}max-height en rem s'adapte au zoom texte. La troncature CSS (-webkit-line-clamp) limite proprement le nombre de lignes sans masquer du contenu imprévisiblement. À 200%, le texte reste sur 3 lignes mais celles-ci sont agrandies.
Référence WCAG : 1.4.4