Tester et contrôler le zoom texte et le responsive avec une extension Firefox

Une petite extension pratique pour tester à la fois le zoom texte à 200%, et au passage, la tenue du responsive. Le tout en redimensionnant la fenêtre à 1366x768 pour vous approcher de vos utilisateurs.
Bonus : un raccourci pour aller plus vite.

Pourquoi Firefox

Et seulement lui. Simplement parce que les moteurs Chromium (Edge, Chrome, Opera) et Safari ne font pas de « zoom text only ». Ils appliquent un zoom de page : tout grossit, images comprises, et la largeur du viewport en pixels CSS diminue jusqu'à faire basculer le site en mise en page « mobile ». On teste alors le reflow, pas le redimensionnement du texte. Donc, ça a l'air de fonctionner, mais en fait, non.

Le besoin

L'accessibilité et plus largement au quotidien pour tout le monde : il se trouve qu'un nombre de gens appliquent une taille de textes minimale dans la configuration de leur navigateur. Avant même d'aller à 200%, il n'est pas rare d'appliquer 20, 22, 24 de taille minimale et il est encore moins rare que la conception technique n'en tienne absolument pas compte. Autant vérifier avec l'extension directement.

Ce que vérifie le critère de redimensionnement du texte

Le critère WCAG 1.4.4 Redimensionnement du texte (AA) exige un texte lisible, sans perte de contenu ni de fonctionnalité, quand sa taille est portée à 200%.
Le WCAG n'impose pas un mécanisme précis : le zoom de page suffit à satisfaire le critère. Mais le zoom texte seul est le test le plus exigeant, et il correspond à ce que vivent les utilisateurs qui imposent une taille de police minimale. Si ça passe ainsi, ça passe partout.

Sur ce point, il peut y avoir débat sur l'application du critère de succès. Mais soyons exigeants avec nous-mêmes en utilisant le plus contraignant pour aller plus de qualité.

Pourquoi le zoom texte seul

Le zoom de page Touche clavier Control Ctrl Touche clavier + +   ou Touche clavier Command ⌘ Touche clavier + +   agrandit tout et réduit d'autant la largeur du viewport en pixels CSS : à 200 % sur une fenêtre de 1366px, le navigateur n'expose plus que 680px CSS. Les media queries basculent alors en mise en page « mobile », et l'on teste en réalité le reflow (critère 1.4.10) plutôt que le redimensionnement du texte.

Le zoom texte seul agrandit uniquement les polices. Le viewport garde sa largeur, la mise en page desktop reste active, et les défauts propres à l'agrandissement du texte apparaissent :

• conteneurs à hauteur fixe et overflow: hidden qui tronquent le texte ;
• libellés de boutons, d'onglets ou de menus qui débordent de leur boîte ;
• line-height ou height en pixels qui provoquent des chevauchements ;
• éléments positionnés en absolu qui se recouvrent ;
• bandeaux fixes ou sticky dont la hauteur grandit avec le texte.

En bref, si les unités des propriétés CSS ne sont pas proportionnelles, rem, em, %, etc., ça part vite en cacahuètes.

Firefox propose ce mode nativement (menu Affichage, Zoom, Zoom sur le texte uniquement), mais l'activer, régler 200% puis redimensionner la fenêtre représente une succession d'actions à refaire à chaque page ou à chaque outil testé.

Pourquoi 1366x768

Pour l'audit, cette dimension sert de cas défavorable crédible. Une fenêtre de 1366x768 laisse un viewport d'environ 600px de hauteur une fois la barre d'onglets et la barre d'adresse retirées. Combinée à un texte à 200%, la zone visible se réduit vite, et comme souvent, la conception graphique et le développement se font sur des écrans très (trop) larges, on ne se met que rarement en condition réelle des utilisateurs finaux.

Installation et utilisation

1. Installer l'extension depuis la fiche AMO.
2. Appuyer sur Touche clavier Control Ctrl Touche clavier + + Touche clavier Majuscule ⇧ Touche clavier + + Touche clavier Y Y   ou Touche clavier Command ⌘ Touche clavier + + Touche clavier Majuscule ⇧ Touche clavier + + Touche clavier Y Y   ou cliquer sur l'icône de la barre d'outils.

Ne pas oublier d'activer l'usage en navigation privée… Aucun risque, l'extension est totalement isolée et n'exécute rien en douce.
C'est tout.

Fonctionnement

• Bascule en un raccourci : zoom texte seul à 200% et fenêtre à 1366x768 ;
• Retour à l'état initial au second appui ;
• Permissions : browserSettings (réglage du zoom) et storage (mémorisation de l'état) ;
• Aucune collecte de données, aucun suivi ;
• Firefox 140 minimum.

Tester

Il suffit de naviguer sur des pages variées pour vite se rendre compte que ça fonctionne… Et que souvent, les résultats font peur !
Je vous vois en train de tester sur Kortic hein ! 😉

Exemple

Quand on oublie de gérer correctement le développement, ça donne ça…

Limites

L'extension ne fait que placer le navigateur dans une configuration de test : elle ne détecte pas les défauts et ne fait pas de rapport. L'observation et le verdict restent visuels.

• Un seul niveau de zoom. Elle applique 200%, c'est le minimum exigé. Un utilisateur peut aller plus loin (Firefox monte à 500 %) : testez aussi des valeurs supérieures sur les pages critiques ;
• Dimensions de fenêtre, pas de viewport. Le 1366x768 est celui de la fenêtre. La zone d'affichage réelle est plus petite à cause de l'interface du navigateur ;
• Redimensionnement dépendant du système. Selon le système et le gestionnaire de fenêtres, une fenêtre en plein écran ou ancrée peut ne pas se redimensionner ;
• Critères voisins non couverts. Le reflow à 400% (1.4.10), l'espacement du texte (1.4.12) et le zoom de page restent à tester séparément. Mais si ça ne s'affiche pas déjà avec l'extension, peu probable que le 400% aille mieux ;
• Firefox uniquement. Le zoom texte seul et l'API utilisée n'existent pas ailleurs ;
• Contenu dynamique. Les menus, modales et messages d'erreur doivent être déclenchés et contrôlés à la main dans la configuration activée.

That's all, Folks !