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) ?
Un utilisateur malvoyant règle son navigateur à 200 % de zoom texte pour lire votre contenu. Si la mise en page ne supporte pas cet agrandissement, le texte déborde de son conteneur, disparaît derrière un overflow: hidden, ou se chevauche avec d’autres éléments. La page reste visuellement présente, mais elle est devenue illisible.
Le critère 10.4 couvre trois scénarios : le zoom texte du navigateur (qui agrandit uniquement la typographie sans modifier la largeur de la fenêtre), le zoom graphique (qui agrandit tout proportionnellement), et les fonctionnalités de zoom embarquées dans la page elle-même. Les trois doivent laisser le texte lisible à 200 %. Un site qui résiste au zoom graphique mais s’effondre au zoom texte échoue quand même — le test 10.4.1 vérifie la lisibilité, le test 10.4.2 vérifie que l’agrandissement a bien lieu.
La cause la plus fréquente d’échec en audit : des conteneurs à hauteur fixe en px couplés à overflow: hidden. Quand le texte grossit, il dépasse la hauteur prévue et disparaît silencieusement. Remplacez height par min-height sur les blocs qui contiennent du texte, et utilisez des unités relatives (rem, em) pour les tailles de police. Texte coupé à 200 % : test échoué.
2 tests pour confirmer que les tailles de texte utilisent des unités relatives
Texte lisible après zoom 200 %
- Ouvrez la page dans Firefox.
- Activez le zoom texte seul : Affichage > Zoom > cochez « Zoom texte seulement », puis appuyez sur Ctrl/Cmd + jusqu’à atteindre 200 %.
- Faites défiler toute la page et vérifiez que l’intégralité du texte est visible et lisible : aucun texte ne doit être tronqué, masqué, ou chevaucher un autre élément.
- Réinitialisez le zoom à 100 %, désactivez l’option texte seul, puis repassez à 200 % en zoom graphique.
- Vérifiez de nouveau que tout le texte reste présent et lisible.
- Si la page propose ses propres contrôles de zoom, utilisez-les au maximum et vérifiez de même.
- Si le texte est lisible dans les trois cas, le test est validé.
Texte agrandi après zoom 200 %
- Ouvrez la page à zoom normal (100 %) et observez la taille visuelle d’un bloc de texte courant.
- Activez le zoom texte seul à 200 % dans Firefox (Affichage > Zoom > Zoom texte seulement, puis Ctrl/Cmd +).
- Vérifiez que le texte apparaît visuellement plus grand qu’à 100 %. S’il reste à la même taille, les
font-sizesont probablement définis enpxet ignorent le zoom texte. - Réinitialisez, puis activez le zoom graphique à 200 %.
- Vérifiez que le texte est agrandi.
- Si la page propose des contrôles de zoom intégrés, activez-les et vérifiez que le texte grossit effectivement.
- Si le texte est agrandi dans les trois cas, le test est validé.
Exemples
❌ Non conforme : Conteneur à hauteur fixe avec overflow caché
<div class="promo-banner">
<p>Offre valable jusqu’au 31 décembre. Conditions générales sur notre site.</p>
</div>
<style>
.promo-banner {
height: 48px;
overflow: hidden;
background: #fffbe6;
padding: 12px;
}
.promo-banner p {
font-size: 14px;
margin: 0;
line-height: 20px;
}
</style>À 100 %, le texte tient dans les 48 px. À 200 % de zoom texte, la police passe à 28 px et le texte s’étale sur plusieurs lignes, mais overflow: hidden le coupe silencieusement. L’utilisateur voit le début de la phrase, pas la fin. De plus, line-height: 20px devient inférieur à la taille de police agrandie — les lignes se chevauchent avant même d’être masquées.
✅ Conforme : Conteneur extensible avec unités relatives
<div class="promo-banner">
<p>Offre valable jusqu’au 31 décembre. Conditions générales sur notre site.</p>
</div>
<style>
.promo-banner {
min-height: 3rem;
background: #fffbe6;
padding: 0.75rem;
}
.promo-banner p {
font-size: 0.875rem;
margin: 0;
line-height: 1.5;
}
</style>min-height remplace height : le conteneur s’agrandit quand le texte prend plus de place. La font-size en rem suit le zoom texte du navigateur. Le line-height sans unité (ratio 1.5) reste proportionnel quelle que soit la taille de police. À 200 %, le bloc s’étend et le texte reste intégralement visible sans chevauchement.
Astuces et pièges
⚠️ user-scalable=no bloque le zoom sur mobile
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> désactive le pinch-to-zoom sur iOS et Android. C’est une directive copiée sans réflexion depuis des boilerplates anciens, et elle rend le critère 10.4 impossible à satisfaire sur mobile. Supprimez user-scalable=no et maximum-scale=1 de vos balises viewport.
⚠️ line-height en pixels ne suit pas le zoom texte
Un line-height: 20px sur un texte de 16px semble raisonnable à 100 %. À 200 % de zoom texte, la police passe à 32 px tandis que le line-height reste bloqué à 20 px — les lignes se chevauchent. Utilisez toujours line-height sans unité (line-height: 1.5) ou en em. C’est l’erreur la plus discrète de ce critère : elle ne se voit que lors du test.
💡 Firefox est le seul navigateur pour tester le zoom texte seul
Chrome et Edge agrandissent tout avec Ctrl +, y compris les conteneurs. Firefox est le seul navigateur grand public qui propose nativement un zoom texte indépendant (Affichage > Zoom > Zoom texte seulement). Sans Firefox, vous ne pouvez pas distinguer un site qui résiste au zoom texte d’un site qui ne fait que supporter le zoom graphique.
⚠️ Images contenant du texte et SVG
Une image PNG ou JPEG contenant du texte ne grossit pas au zoom texte — elle reste à sa taille en pixels d’origine. Le test 10.4.2 échoue car le texte n’est pas effectivement agrandi. Les SVG avec font-size en px ont le même comportement. Si une image véhicule un contenu textuel indispensable, préférez du vrai texte HTML stylisé.
⚠️ Sous-titres incrustés et texte dans canvas
Les sous-titres gravés directement dans la vidéo (open captions) et le texte rendu dans un <canvas> ne sont pas agrandissables par le zoom texte du navigateur. Le RGAA reconnaît ces situations comme cas particuliers. Si votre cas relève de cette exception, documentez-le dans votre déclaration d’accessibilité.
Questions fréquentes
Comment tester le zoom texte à 200 % pour valider le critère 10.4 RGAA ?
Dans Firefox : Affichage > Zoom, cochez « Zoom texte uniquement », puis Ctrl/Cmd + jusqu’à afficher 200 % dans la barre d’adresse. Chrome ne propose pas de zoom texte natif : utilisez son zoom graphique standard ou une extension comme « Zoom Text Only ». Firefox est le navigateur de référence pour ce test car il isole exactement le comportement que le critère cherche à vérifier.
Quelle est la différence entre les tests 10.4.1 et 10.4.2 du critère RGAA ?
10.4.1 vérifie la lisibilité : le texte ne doit pas être tronqué, masqué ou superposé à autre chose. 10.4.2 vérifie l’agrandissement effectif : le texte doit réellement être plus grand qu’à la taille initiale. Un texte entièrement visible mais bloqué à sa taille de départ échoue au 10.4.2 tout en passant le 10.4.1. Les deux tests sont nécessaires pour valider le critère.
Quel impact a un chevauchement de texte sur la conformité du critère 10.4 ?
Oui. Dès qu’un texte chevauche un autre élément ou qu’une partie d’un caractère est coupée par son conteneur, le test 10.4.1 échoue. L’exigence est que le texte soit « présent et lisible » — un libellé coupé à mi-hauteur ne satisfait pas cette condition. Le seuil n’est pas la disparition totale du texte, mais toute dégradation de la lisibilité.
Quelles méthodes de zoom faut-il appliquer pour valider le critère 10.4 RGAA ?
Non. Une seule méthode fonctionnelle suffit à valider le critère. En pratique, testez d’abord le zoom texte Firefox : c’est la méthode la plus exigeante et la plus utilisée par les personnes malvoyantes. Si votre site utilise rem et em correctement, le zoom graphique fonctionnera de toute façon. Inutile de tester le mécanisme de zoom embarqué s’il n’en existe pas sur la page.
Pourquoi utiliser rem plutôt que px pour satisfaire le critère 10.4 RGAA ?
Pour les propriétés font-size, oui — les pixels ne répondent pas au zoom texte de Firefox, ce qui fait échouer le test 10.4.2. Pour les marges et espacements, les pixels ne bloquent pas directement 10.4, mais peuvent créer des chevauchements à haut zoom. Priorisez la migration dans cet ordre : d’abord les font-size en rem, ensuite les height fixes en min-height avec des unités relatives, enfin les padding internes en em pour les composants les plus denses en texte.