Redimensionnement du texte

Ce que le critère demande

Lorsqu’un utilisateur zoome le texte à 200 % — via le zoom du navigateur, le redimensionnement du texte dans le système d’exploitation ou le zoom tactile — la page doit continuer à fonctionner. Aucun texte rogné, aucun conteneur qui se chevauche, aucune fonctionnalité perdue, aucun défilement horizontal nécessaire pour lire les phrases. Ce critère est antérieur au critère 1.4.10 Redistribution, qui est plus strict ; respecter la redistribution implique généralement que le critère 1.4.4 est automatiquement satisfait.

Comment le respecter

• Utiliser des unités relatives (rem, em, %) pour les tailles de police et les hauteurs de conteneurs, et non des valeurs en pixels fixes qui ne peuvent pas s’agrandir.
• Éviter les déclarations height fixes sur les conteneurs de texte — utiliser min-height si nécessaire.
• Ne pas définir de balises méta viewport désactivant le zoom utilisateur (user-scalable=no ou maximum-scale=1).
• Construire des mises en page flexibles (flexbox, CSS grid) pour que les conteneurs s’agrandissent avec leur contenu.
• Tester à 200 % de zoom dans le navigateur sur une fenêtre de bureau typique ; vérifier que les titres, boutons et champs de formulaire ne se chevauchent pas.

Échecs courants

• <meta name="viewport" content="user-scalable=no"> bloquant le zoom sur mobile — également un échec 1.4.4 persistant.
• Boutons avec une hauteur fixe en pixels qui rognent le texte de l’étiquette à 200 % de zoom.
• Menus de navigation débordant de leur conteneur à 200 % et devenant inaccessibles.
• Boîtes de dialogue modales dimensionnées en pixels qui ne contiennent plus leur contenu une fois zoomées.
• Étiquettes de formulaire qui empiètent sur le champ suivant lorsque le texte s’agrandit.

Pourquoi c’est important

Les personnes malvoyantes utilisent couramment un zoom de 150 à 200 % comme réglage quotidien. Ne pas respecter le critère 1.4.4 signifie que ces utilisateurs ne peuvent pas lire la page ou doivent faire défiler horizontalement chaque ligne — les deux les feront abandonner. La correction implique généralement de passer de px à rem dans les jetons de design, ce qui est un refactoring unique.