RGAA 10.12 — Dans chaque page web, les propriétés d'espacement du texte peuvent-elles être redéfinies sans perte de contenu ou de fonctionnalité ?

Contenu tronqué avec espacement du texte

Le problème

Ce problème survient lorsque le contenu est tronqué, superposé ou devient inaccessible après l'application des ajustements d'espacement de texte définis par le WCAG. Le critère RGAA 10.12 (correspondant au WCAG 1.4.12, niveau AA) exige que lorsque les propriétés CSS suivantes sont modifiées, le contenu reste lisible et fonctionnel : espacement des lignes (line-height) à 1,5 fois la taille de police, espacement des paragraphes (margin-bottom) à 2 fois la taille de police, espacement des lettres (letter-spacing) à 0,12 fois la taille de police, et espacement des mots (word-spacing) à 0,16 fois la taille de police.

De nombreux utilisateurs dyslexiques, malvoyants ou ayant des troubles cognitifs utilisent des feuilles de style personnalisées ou des extensions de navigateur pour augmenter l'espacement du texte afin d'améliorer la lisibilité. Si le site utilise des conteneurs de taille fixe, le texte espacé peut déborder et être coupé.

Les designs rigides avec des cartes à hauteur fixe, des boutons dont le texte est contraint, et des éléments utilisant `overflow: hidden` sont les principaux responsables de ce problème.

Impact sur les utilisateurs

Pour les personnes dyslexiques, un espacement de texte accru améliore significativement la lisibilité. Environ 10% de la population est dyslexique à des degrés divers, et l'espacement du texte est l'une des adaptations les plus efficaces. Si un site tronque le contenu lorsque l'espacement est augmenté, cette adaptation est rendue inutile.

Les utilisateurs malvoyants qui utilisent des feuilles de style personnalisées pour améliorer la lisibilité sont aussi directement affectés. Si le texte est coupé par un overflow: hidden après augmentation de l'espacement, des informations essentielles sont perdues.

Ce critère est souvent méconnu des développeurs, mais il a un impact réel sur des millions d'utilisateurs qui dépendent de l'espacement du texte comme adaptation quotidienne.

Votre site a-t-il ce problème ?

106 critères RGAA analysés en 5 minutes par notre IA.

Testez votre site gratuitement

Exemple de code

Avant (non conforme)

/* Conteneur qui tronque avec espacement augmenté */
.card-title {
  height: 48px;
  overflow: hidden;
  line-height: 1.2;
}

.button {
  height: 40px;
  padding: 8px 16px;
  overflow: hidden;
  white-space: nowrap;
}

.tooltip {
  max-height: 100px;
  overflow: hidden;
}

Après (conforme)

/* Conteneur qui s'adapte à l'espacement */
.card-title {
  min-height: 48px; /* min- au lieu de fixe */
  overflow: visible;
  line-height: 1.5;
}

.button {
  min-height: 40px;
  padding: 8px 16px;
  overflow: visible;
  white-space: normal; /* Permettre le retour à la ligne */
}

.tooltip {
  max-height: none; /* Pas de limite de hauteur */
  overflow: visible;
}

Comment Scrutia détecte ce problème

Scrutia applique automatiquement les propriétés d'espacement WCAG (line-height: 1.5, letter-spacing: 0.12em, word-spacing: 0.16em, margin-bottom paragraphes: 2em) sur chaque page et vérifie qu'aucun contenu n'est tronqué, superposé ou masqué. Il détecte les conteneurs avec overflow: hidden dont le contenu déborde après application de l'espacement et signale les éléments problématiques avec des correctifs CSS.

Questions fréquentes

Quelles sont les valeurs d'espacement exactes à tester ?

Line-height à au moins 1,5 fois la taille de police, espacement de paragraphe à 2 fois la taille de police, letter-spacing à 0,12 fois la taille de police, et word-spacing à 0,16 fois la taille de police. Ces valeurs sont issues du WCAG 1.4.12.

Comment les utilisateurs modifient-ils l'espacement du texte ?

Via des extensions de navigateur (comme Text Spacing Editor pour Chrome), des feuilles de style personnalisées injectées dans le navigateur, ou des bookmarklets dédiés. Certains lecteurs d'écran offrent aussi cette option.

Faut-il que mon site utilise ces espacements par défaut ?

Non. Le critère n'exige pas que votre site utilise ces espacements par défaut. Il exige que le contenu reste lisible et fonctionnel quand un utilisateur les applique via ses propres outils. Votre design peut utiliser les espacements de votre choix.

Est-ce que les composants en position absolue sont concernés ?

Oui. Les tooltips, dropdowns et popovers en position absolue avec des hauteurs fixes et overflow: hidden sont fréquemment affectés. Assurez-vous qu'ils s'adaptent au contenu agrandi.

Votre site a-t-il ce problème ?

Scrutia audite votre site sur 106 critères RGAA en 5 minutes. Navigation clavier, composants ARIA, focus visible, contrastes, et bien plus.

Lancer un audit gratuit