Au zoom, votre site laisse-t-il encore lire toute la ligne ?

Agrandir un texte devrait permettre de le lire plus facilement. Mais si chaque ligne déborde de la fenêtre, le lecteur doit aller à droite, revenir à gauche, puis descendre. Le problème n’est plus la taille des lettres : c’est le trajet nécessaire pour suivre une phrase.

La redistribution du contenu, souvent appelée reflow, désigne son adaptation à l’espace disponible. Le W3C explique ce principe : une page peut réorganiser ses colonnes sans perdre d’information ni de fonction. Les contenus courants restent ainsi lisibles dans le sens normal de lecture.

Une page mobile et une page agrandie ne racontent pas tout à fait la même chose

La vue sur téléphone donne un premier indice, mais elle ne remplace pas l’examen d’une page agrandie sur ordinateur. Imaginez une page de prestation avec un texte à gauche et une colonne de tarifs à droite. Quand l’espace se réduit, placer les tarifs après le texte peut préserver la lecture. Conserver deux colonnes très étroites ou couper les montants rend, au contraire, la comparaison pénible.

Le critère WCAG 2.2 de redistribution prend comme repère une largeur équivalente à 320 pixels CSS pour un contenu à défilement vertical. Les pixels CSS sont des unités de mise en page, pas le nombre de points physiques de l’écran. Une zone de contenu large de 1 280 pixels CSS à 100 % correspond à ce repère lorsqu’elle est zoomée à 400 %. Il faut considérer la zone de la page, pas simplement la résolution annoncée du moniteur.

Observer ce qui disparaît, pas seulement ce qui déborde

L’agrandissement du texte possède aussi son propre repère : le critère de redimensionnement prévoit, avec les exceptions indiquées dans le document, un texte agrandi jusqu’à 200 % sans perte de contenu ou de fonctionnalité. Un texte plus gros qui se retrouve coupé dans une boîte de hauteur fixe ne rend pas le service attendu.

Pour une première observation, choisissez une page qui contient de vraies contraintes : un titre long, un tarif, une navigation et une action de contact. Agrandissez progressivement dans le navigateur. Regardez si une phrase impose des allers-retours latéraux, si un bouton perd son libellé ou si un bandeau occupe presque toute la hauteur. Notez la page, le niveau de zoom et l’élément concerné : ces repères seront plus utiles à la correction qu’un simple « ça déborde ».

Certaines présentations, comme une carte ou un tableau de données, ont besoin de deux dimensions pour conserver leur sens. Le W3C prévoit des exceptions ; elles ne justifient pas que tous les paragraphes voisins débordent aussi. Ce contrôle ciblé ne constitue pas, à lui seul, un audit complet d’accessibilité.

Préserver le parcours quand l’espace se réduit

Le résultat à rechercher est simple : lire, comprendre un prix et atteindre l’action sans perdre sa place. Lors d’une création ou d’une refonte avec Gaia pour votre site internet, intégrez des pages réelles et leur lecture au zoom aux échanges sur la présentation responsive. La vérification porte alors sur le contenu que vos visiteurs doivent utiliser, au-delà d’une belle page d’accueil.