Espacement du texte

Ce que le critère demande

Les utilisateurs dyslexiques, malvoyants ou présentant des déficiences cognitives installent souvent des extensions de navigateur ou des feuilles de style personnalisées qui aèrent la typographie. Le critère définit quatre ajustements spécifiques — hauteur de ligne égale à 1,5 fois la taille de police, espacement des paragraphes à 2 fois la taille de police, espacement des lettres à 0,12 em, espacement des mots à 0,16 em — et exige que la page fonctionne toujours lorsqu’ils sont appliqués. Aucun texte rogné, aucun débordement, aucun contenu manquant.

Comment le respecter

• Définir les hauteurs de conteneur avec min-height plutôt qu’une height fixe, afin qu’ils s’agrandissent avec le texte.
• Éviter les hauteurs fixes en pixels sur les boutons, éléments de navigation, cartes et badges — les laisser s’étendre avec le contenu.
• Tester en collant un bookmarklet connu (le bookmarklet d’espacement de texte WCAG 1.4.12 existe) qui applique simultanément les quatre ajustements.
• Permettre au texte de se replier naturellement ; ne pas utiliser white-space: nowrap sur des étiquettes susceptibles de s’allonger.
• Vérifier que les menus de navigation, les onglets et leurs étiquettes tiennent toujours lorsque l’espacement des lettres s’élargit.

Échecs courants

• Boutons avec height: 40px qui rognent l’étiquette lorsque la hauteur de ligne passe à 1,5.
• Étiquettes d’onglets avec white-space: nowrap qui débordent de leur conteneur avec un espacement des lettres plus large.
• Cartes avec des hauteurs fixes où le texte disparaît derrière un fondu « lire la suite ».
• Infobulles et badges qui rognent leur texte lorsque l’espacement des paragraphes augmente.
• En-têtes épinglés à hauteur fixe qui chevauchent la page lorsque leur texte de navigation s’agrandit.

Pourquoi c’est important

Ce critère détecte les mises en page « conçues pour un seul espacement » où le concepteur a tout verrouillé sur une hauteur de ligne parfaite dans Figma. Les utilisateurs d’outils d’aide à la lecture appliquent des ajustements d’espacement en permanence. La correction consiste généralement à passer de height à min-height et à supprimer white-space: nowrap — des modifications mécaniques mineures qui bénéficient à l’ensemble de l’interface.