Tester à la loupe : zoom, redistribution et espacement
Beaucoup d'utilisateurs agrandissent l'affichage : basse vision, presbytie, petit écran. Un audit RGAA exige donc de vérifier que le texte reste lisible et complet une fois agrandi, que la mise en page se redistribue sans double défilement, et que rien ne casse quand on impose un espacement du texte. Un scan pré-repère, mais ne conclut pas sur la perception réelle. Voici les seuils normés et la méthode. Les guides d'implémentation, eux, sont sur le blog.
Pourquoi tester à la loupe
Une personne malvoyante, presbyte, ou simplement sur un écran étroit adapte l'affichage : elle agrandit le texte, zoome la page, ou impose son propre espacement pour lire plus confortablement. Un scan automatique détecte certaines anomalies dans le code, mais il ne peut pas juger si, à 200 %, un bouton reste lisible sans être coupé, ni si la page se réorganise pour tenir dans la largeur, sans défilement horizontal, quand on la rétrécit. Ce test se fait à l'œil, en manipulant l'affichage.
- Le scan pré-repère : présence d'un défilement horizontal à un gabarit réduit, débordement mesuré après surcharge d'espacement
- Le test à la loupe conclut sur la perception réelle : texte agrandi lisible et complet, redistribution sans perte, espacement imposé qui ne casse rien
- Important : Seul ce test permet d'affirmer qu'un contenu reste utilisable une fois l'affichage adapté
Le test à la loupe établit la perception sous adaptation (le contenu reste lisible et complet), pas la pertinence sémantique ni la restitutionau lecteur d'écran, qui sont des paliers distincts.
Les trois gestes et leurs seuils
Trois adaptations d'affichage, trois critères RGAA. Chacune a un seuil normé précis, à connaître pour trancher sans approximation.
| Critère | Le geste | Seuil normé | Comment faire |
|---|---|---|---|
| 10.4 | Agrandir le texte à 200 % | 200 % au moins | Zoom du texte seul (Firefox) ou zoom de la page (Ctrl ou Cmd et « + »). Trois mécanismes sont admis (texte du navigateur, zoom graphique, composant du site) : un seul qui fonctionne suffit. |
| 10.11 | Réduire la largeur d’affichage | 320 px de large, 256 px de haut (pixels CSS) | Réduire la fenêtre à 320 px, ou zoomer à 400 % une fenêtre de 1280 px (1280 divisé par 4 fait 320 px CSS). Le seuil officiel est en pixels, le 400 % n’est qu’une façon de l’atteindre. |
| 10.12 | Imposer l’espacement du texte | interligne 1,5 · paragraphe 2 · lettres 0,12 · mots 0,16 (fois la taille de police) | Appliquer les quatre valeurs d’un coup via un bookmarklet d’espacement. Le critère demande que le contenu ne casse pas, pas que le site livre ces espacements. |
Pour la redistribution (10.11), le seuil officiel est de 320 px de large(et 256 px de haut) en pixels CSS. Le « 400 % » que vous verrez souvent cité est une façon d'atteindre ces 320 px sur une fenêtre de 1280 px, pas le seuil lui-même.
La méthode : cinq vérifications
Appliquez chaque geste, puis parcourez la page en insistant sur les zones à risque : conteneurs à hauteur fixe, encarts, boutons, menus, tableaux, libellés courts.
- Texte agrandi lisible : à 200 %, tout le texte grossit sans être coupé, tronqué ni recouvert
- Un seul mécanisme suffit : pour 10.4, si le zoom de la page préserve tout le texte, le critère est satisfait même si le zoom du texte seul échoue
- Pas de double défilement : à 320 px de large, plus aucune barre de défilement horizontale ; le contenu se réorganise pour tenir dans la largeur, le plus souvent en une seule colonne
- Rien ne disparaît : après redistribution, aucun menu, bouton ou information ne devient inatteignable
- Important : L'espacement imposé ne casse rien : avec les quatre valeurs appliquées ensemble, aucun texte n'est coupé ni chevauché
Attention aux faux positifs. Un tableau de données large qui défile horizontalement à 320 px n'est pas un échec de 10.11 (cas particulier admis). Et sur la plupart des navigateurs mobiles, la redistribution au zoom n'est pas correctement gérée : dans ce contexte, le critère est non applicable, pas en échec.
Les outils : rien à installer, ou presque
L'agrandissement et la réduction de fenêtre se font avec votre navigateur. Seul l'espacement du texte demande un petit outil.
- Agrandir : Ctrl ou Cmd et « + » pour zoomer la page. Dans Firefox, Menu puis Zoom puis « Zoom texte seulement » pour n'agrandir que le texte
- Réduire : rétrécissez la fenêtre à 320 px de large, ou zoomez à 400 % une fenêtre de 1280 px (les outils de développement du navigateur permettent de fixer une largeur précise)
- Espacer : un bookmarklet d'espacement du texte (type « Text Spacing ») applique les quatre valeurs d'un coup ; une feuille de style utilisateur fait la même chose
Vous développez et cherchez à corriger un problème (media queries, unités relatives, conteneurs flexibles) ? Le guide d'implémentation de l'espacement du texte détaille les techniques côté code.
Par où commencer
Les gestes en main, le meilleur point de départ reste un audit sur un vrai site.
- Important : Lancez un audit gratuit puis suivez l'audit guidé sur votre rapport : chaque critère qui exige un test à la loupe est accompagné d'un protocole pas à pas
Pour aller plus loin :
Prêt à passer à l'audit ?
Notre scan repère les anomalies automatiquement détectables. L'audit guidé qui suit vous fait conclure sur les critères qui exigent un vrai test à la loupe.
Scanner mon site