L'espacement du texte

Essayez-le

Actionnez l’un des deux boutons — Entrée ou Espace suffisent. Les quatre valeurs du test s’appliquent à toute la démo : le bouton de la carte « Hauteur fixe » perd la fin de son libellé, celui de la carte « Hauteur naturelle » grandit et le garde entier — quel que soit celui des deux que vous avez actionné. Le nombre de pixels annoncé n’est pas écrit d’avance : il est relu dans le DOM après chaque bascule.

Cette démo existe aussi en page autonome.

L’erreur courante

Un bouton dont la hauteur est décidée avant de connaître son texte.

/* À ne pas faire */
.bouton {
	height: 40px;
	line-height: 40px; /* le vieux truc pour centrer verticalement */
	overflow: hidden;
}

Ces trois lignes vont ensemble et se soutiennent : la hauteur fixe impose le cadre, le line-height en pixels centre le texte dedans, et l’overflow efface ce qui dépasserait. Tant que personne ne touche à rien, le bouton est parfait.

Puis quelqu’un applique son espacement. Le line-height de l’utilisateur remplace les 40 pixels, le libellé passe sur deux lignes, et le cadre en affiche une. Le bouton dit désormais « Télécharger le rapport » au lieu de « Télécharger le rapport d’audit complet » — et rien ne signale la coupure. Ni un point de suspension, ni une barre de défilement : le texte est simplement absent de l’écran, alors qu’il est toujours dans le DOM.

Trois variantes du même geste :

• white-space: nowrap avec text-overflow: ellipsis : la coupure est au moins signalée par les points de suspension, mais l’information manque toujours, et l’espacement des lettres avance le point de coupure de plusieurs mots.
• Une height posée sur les cartes d’une grille pour qu’elles s’alignent : ce n’est plus un mot qui disparaît mais la fin d’un paragraphe, sur toutes les cartes à la fois.
• Un max-height avec overflow: hidden sur un aperçu « voir plus » : le bouton d’ouverture reste, mais l’aperçu ne montre plus une phrase entière.

Le code, pas à pas

1. Les quatre valeurs, et rien d’autre

Le critère 10.12 demande que le texte reste lisible lorsque l’affichage est modifié selon quatre conditions, énoncées dans son test unique :

• l’espacement entre les lignes (line-height) augmenté jusqu’à 1,5 fois la taille de la police ;
• l’espacement suivant les paragraphes (balise <p>) augmenté jusqu’à 2 fois la taille de la police ;
• l’espacement des lettres (letter-spacing) augmenté jusqu’à 0,12 fois la taille de la police ;
• l’espacement des mots (word-spacing) augmenté jusqu’à 0,16 fois la taille de la police.

Ce sont des valeurs, pas des ordres de grandeur. Elles ne se négocient pas, et il n’y en a pas d’autres : la taille de la police, elle, relève du critère 10.4.

2. Appliquer le test

La façon la plus courte de tester est une feuille de styles utilisateur, ou un marque-page qui l’injecte dans la page :

* {
	line-height: 1.5 !important;
	letter-spacing: 0.12em !important;
	word-spacing: 0.16em !important;
}

p {
	margin-bottom: 2em !important;
}

Les unités em valent ici « fois la taille de la police » de chaque élément : c’est exactement l’énoncé du test, et c’est pour cela que le sélecteur porte sur * plutôt que sur body. Un letter-spacing hérité aurait été calculé une seule fois, sur la police du corps de page.

Une réserve honnête : le référentiel dit « augmenté jusqu’à ». Cette feuille de styles impose les valeurs au lieu de les relever, et abaisserait donc un interligne déjà supérieur à 1,5. Un site qui échoue uniquement de cette manière n’échoue pas au critère — vérifiez la valeur d’origine avant de conclure.

3. min-height, jamais height

.bouton {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0.5rem 1rem;
}

min-height garantit la cible de pointage sans plafonner le contenu : le texte peut pousser le cadre, ce que height lui interdit. Le centrage vertical passe par le padding et l’alignement en flex, pas par un line-height calibré.

La règle vaut au-delà des boutons — cartes, onglets, cellules d’en-tête, étiquettes de formulaire, bandeaux. Partout où vous avez écrit une hauteur en pixels autour du texte, vous avez décidé pour l’utilisateur du nombre de lignes qu’il a le droit de lire.

4. line-height sans unité

/* Résiste : un facteur, recalculé pour chaque taille de police héritée. */
body { line-height: 1.5; }

/* Casse : 24 pixels, quelle que soit la police des descendants. */
body { line-height: 24px; }

Un line-height sans unité est hérité comme un rapport ; un line-height en pixels est hérité comme une longueur, et un titre de 32 pixels se retrouve avec des lignes de 24. C’est le même défaut que la hauteur fixe, d’un cran plus discret.

5. Savoir ce que overflow: hidden cache

overflow: hidden a des emplois légitimes : contenir un flottant, rogner un fond décoratif, empêcher un défilement parasite. Il devient un défaut dès qu’il s’applique à un conteneur dont le contenu est du texte et dont la hauteur est contrainte.

Si vous devez vraiment plafonner un bloc de texte, overflow: auto conserve l’accès au contenu : la zone défile. Ce n’est pas idéal — une zone défilante doit rester atteignable au clavier — mais l’information n’est pas perdue, et c’est ce que le critère mesure.

6. Aligner sans figer

La raison qu’on donne le plus souvent aux hauteurs fixes est l’alignement : des cartes de longueurs différentes font une grille irrégulière. Une grille CSS aligne d’elle-même les éléments d’une même rangée sur le plus haut, sans qu’on ait à écrire une seule hauteur.

.grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	/* `stretch` est la valeur par défaut : les cartes d'une rangée
	   partagent la hauteur de la plus haute, qui suit son texte. */
}

Au clavier

L’espacement du texte n’est pas un composant : c’est une propriété de la page entière, et il n’y a donc pas de touches à implémenter. Ce qui se vérifie au clavier, c’est ce que la page devient une fois les espacements appliqués.

Touche	Effet
Tab	Parcourez la page espacements appliqués. Chaque commande doit rester entièrement visible au moment où elle prend le focus, et non coupée par son cadre.
Ctrl + F	La recherche du navigateur trouve le texte coupé : s’il est trouvé sans être visible à l’écran, il est masqué par un cadre, pas absent.
Ctrl + +	Le zoom du navigateur, à contrôler dans la foulée : c’est le critère voisin 10.4, et il tombe sur les mêmes cadres.

Ce que le lecteur d’écran restitue

Le libellé entier — « Télécharger le rapport d’audit complet, bouton » — alors que l’écran n’en montre que la moitié. La formulation varie d’un lecteur à l’autre, mais le constat ne varie pas : la troncature ne s’entend pas.

C’est ce qui rend ce critère invisible aux tests automatiques comme aux tests au lecteur d’écran. Le texte n’a jamais quitté le DOM ; il a quitté l’écran. Les personnes que le défaut atteint sont celles qui lisent en regardant, avec leur propre feuille de styles — pas celles qui écoutent.

Le diagnostic inverse est donc particulier. Si vous n’entendez que ce que l’écran affiche, la coupure n’est pas visuelle : le texte a été raccourci avant d’être rendu, côté serveur ou en JavaScript. C’est un autre défaut, plus grave, et celui-là se voit de tout le monde.

Checklist

• Tester avec les quatre valeurs : interligne 1,5, après paragraphe 2, lettres 0,12, mots 0,16.
• min-height plutôt que height sur tout ce qui contient du texte.
• line-height sans unité ; jamais un line-height en pixels pour centrer.
• Pas d’overflow: hidden sur un conteneur de texte à hauteur contrainte.
• Regarder d’abord les boutons, les onglets, les étiquettes et les cartes alignées.
• Aligner les cartes par la grille, jamais par une hauteur imposée.
• Repasser au clavier : aucune commande ne doit être coupée quand elle prend le focus.

Les critères RGAA en jeu

• Critère 10.12 — Espacement du texte redéfinissable

  C'est le critère lui-même : une fois les quatre valeurs appliquées, aucun libellé ne doit se couper, aucun bloc ne doit en recouvrir un autre, aucune commande ne doit sortir de l'écran.

• Critère 10.4 — Lisibilité du texte agrandi à 200 %

  Une hauteur en pixels tient tant que la police ne bouge pas. Le texte agrandi à 200 % la traverse exactement comme l'interligne augmenté : même cadre rigide, autre déclencheur.

• Critère 10.11 — Contenus sans double défilement

  L'espacement des lettres allonge chaque mot. Un menu ou un bouton en white-space nowrap qui tenait à 320 px déborde alors en largeur, et le défilement horizontal apparaît.

Vérifiez votre composant avec l'extension

Pour aller plus loin

• Critère 10.12 — Espacement du texte redéfinissable : la méthode de test, et les trois cas particuliers exclus — sous-titres incrustés, images texte, texte dans un <canvas>.
• Critère 10.4 — Lisibilité du texte agrandi à 200 % et 10.11 — Contenus sans double défilement : les deux voisins qui tombent sur les mêmes cadres rigides.
• « Taille des caractères » au glossaire : la définition qui sépare 10.4 de 10.12.
• Les onglets : la barre d’onglets à hauteur fixe est l’endroit où ce défaut se voit le plus vite.

Sources

• MDN — line-height — pourquoi la valeur sans unité est la seule qui s’hérite correctement
• WCAG — Understanding 1.4.12 Text Spacing — le pourquoi normatif, et l’origine des quatre valeurs
• WCAG — Understanding 1.4.4 Resize Text — le critère voisin, sur la taille des caractères
• RGAA — critères et tests, thème 10 — le texte officiel du critère 10.12