Espacement du texte non adaptable : RGAA 10.12, correction

C'est quoi

Le critère RGAA 10.12 exige que les propriétés d'espacement du texte puissent être redéfinies par l'utilisateur sans perte de contenu ou de fonctionnalité.

Le critère reprend exactement le test WCAG 1.4.12 (Espacement du texte, niveau AA). Il consiste à appliquer les valeurs d'espacement maximales suivantes et à vérifier qu'aucun contenu n'est perdu :

Hauteur de ligne (line-height) : au moins 1,5 fois la taille de la police.
Espacement entre les lettres (letter-spacing) : au moins 0,12 fois la taille de la police.
Espacement entre les mots (word-spacing) : au moins 0,16 fois la taille de la police.
Espacement après les paragraphes (margin-bottom sur p) : au moins 2 fois la taille de la police.

Le site ne doit pas utiliser overflow: hidden sur des conteneurs à hauteur fixe, ni de max-height rigides sur du texte, qui tronqueraient le contenu agrandi.

Qui est touché

Les personnes dyslexiques : un espacement accru entre les lettres et les mots réduit le risque de confusion entre les caractères et améliore la vitesse de lecture.
Les personnes malvoyantes : elles utilisent souvent des feuilles de style personnalisées pour agrandir les espacements en plus du zoom.
Les personnes avec des troubles de l'attention : un interligne plus généreux réduit la charge cognitive et facilite le suivi des lignes.

Impact business

Un site qui tronque le texte à l'augmentation de l'espacement prive certains utilisateurs d'une partie du contenu. Le problème n'est pas visible en conditions normales, ce qui en fait une erreur souvent ignorée lors des audits visuels.

Les conteneurs à hauteur fixe sur du texte variable, les boutons avec overflow: hidden, et les en-têtes de cartes avec max-height rigide sont les endroits où cette erreur se manifeste le plus souvent.

Sources des chiffres

Comment le détecter

Audit Mynto : le scan applique un bookmarklet d'espacement et détecte les débordements et troncatures de texte.
Bookmarklet Text Spacing : plusieurs bookmarklets publics appliquent les 4 valeurs WCAG 1.4.12 en un clic sur toute la page. Inspecte visuellement chaque section après application.
Manuel : ajoute cette règle CSS dans les DevTools et observe si du contenu disparaît ou déborde hors de son conteneur.

Comment corriger

Avant - CSS

/* Conteneur à hauteur fixe qui tronque le texte agrandi */
.card-title {
  height: 48px;
  overflow: hidden;
  font-size: 1rem;
}

Après - CSS

/* Hauteur minimale au lieu de hauteur fixe */
.card-title {
  min-height: 48px;
  overflow: visible;
  font-size: 1rem;
}

La correction principale consiste à remplacer les valeurs height fixes par des min-height sur tous les conteneurs qui encadrent du texte. Cela laisse le conteneur grandir si l'espacement augmente.

Audite chaque composant dont la hauteur est fixée par CSS :

Les titres de cartes et de tuiles.
Les boutons avec du texte variable.
Les balises ou étiquettes (badges, tags).
Les barres de navigation à hauteur fixe avec du texte.

Évite overflow: hidden sur tout conteneur dont la hauteur est limitée et qui contient du texte. Préfère overflow: auto ou overflow: visible.

Sur WordPress, les thèmes basés sur des grilles de cartes sont les plus susceptibles d'avoir ce problème. Vérifie les styles des titres de post et des extraits dans les boucles de contenu.

Questions fréquentes

Comment tester rapidement sans installer d'outil ?

Ouvre les DevTools, onglet Console, et colle ce code qui force les 4 propriétés WCAG 1.4.12 sur toute la page. Observe si du contenu disparaît ou déborde hors de son conteneur. var s=document.createElement('style'); s.textContent='*{line-height:1.5!important;letter-spacing:0.12em!important; word-spacing:0.16em!important}p{margin-bottom:2em!important}'; document.head.appendChild(s);

Le critère s'applique-t-il au texte dans les images ?

Non. Le texte dans les images (images de texte) ne peut pas être redimensionné par l'utilisateur. C'est un problème distinct, traité par d'autres critères RGAA. Pour le texte en image, la solution est de remplacer l'image par du vrai texte CSS.

Faut-il tester tous les niveaux de zoom en plus de l'espacement ?

L'espacement (RGAA 10.12 / WCAG 1.4.12) et le zoom sont deux critères distincts. Teste-les séparément : l'espacement avec les valeurs 1.4.12, le zoom texte à 200% avec RGAA 10.4 (WCAG 1.4.4), et le reflow à 320px avec RGAA 10.11 (WCAG 1.4.10).

Cette erreur est-elle sur ton site ?

Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.

Espacement du texte non adaptable