Espacement du texte et accessibilité : maîtriser le critère WCAG 1.4.12

Le critère WCAG 1.4.12 Text Spacing, introduit dans les WCAG 2.1, vise à garantir que les utilisateurs peuvent ajuster l'espacement du texte pour améliorer leur lisibilité sans perdre de contenu ou de fonctionnalité. Ce critère profite particulièrement aux personnes dyslexiques, malvoyantes ou ayant des troubles cognitifs.

Comprendre le critère WCAG 1.4.12

Les exigences spécifiques

Le critère stipule que le contenu doit rester lisible et fonctionnel lorsque l'utilisateur applique les ajustements suivants :

• Hauteur de ligne (interligne) : au moins 1.5 fois la taille de police
• Espacement des paragraphes : au moins 2 fois la taille de police
• Espacement des lettres (tracking) : au moins 0.12 fois la taille de police
• Espacement des mots : au moins 0.16 fois la taille de police

Ces valeurs ne sont pas des recommandations de design, mais des minimums que vos interfaces doivent supporter sans casser.

Niveau de conformité

Ce critère est de niveau AA, le niveau cible pour la plupart des obligations légales, y compris le RGAA 4.1 en France et l'European Accessibility Act.

Pourquoi cet espacement aide les utilisateurs

Dyslexie et troubles de la lecture

Les personnes dyslexiques bénéficient énormément d'un espacement augmenté. Les lettres trop proches se "mélangent" visuellement, rendant la lecture difficile et fatigante. Un espacement plus large permet de distinguer chaque caractère et chaque mot plus facilement.

Basse vision

Pour les personnes malvoyantes qui utilisent des outils de zoom ou d'agrandissement, un texte espacé évite que les lignes ne semblent se superposer. L'interligne augmenté aide à suivre les lignes sans sauter accidentellement à la ligne suivante.

Troubles cognitifs

Un texte aéré réduit la charge cognitive nécessaire pour décoder le contenu. Les paragraphes bien séparés permettent de mieux structurer l'information mentalement.

[!NOTE] Ces bénéfices s'étendent à tous les utilisateurs : un texte bien espacé est plus agréable et plus rapide à lire pour chacun.

Implémentation technique

Utiliser des unités relatives

La clé pour respecter ce critère est d'utiliser des unités relatives plutôt que des valeurs fixes en pixels.

body {
  font-size: 1rem; /* Base: 16px par défaut */
  line-height: 1.5; /* Sans unité = relatif à font-size */
  letter-spacing: 0.12em; /* Relatif à la taille de police */
  word-spacing: 0.16em;
}

p {
  margin-bottom: 2em; /* Espacement entre paragraphes */
}

Éviter les hauteurs fixes

Les conteneurs de texte doivent pouvoir s'agrandir pour accueillir un texte plus espacé. Évitez les hauteurs fixes en pixels.

/* À éviter */
.card-text {
  height: 100px;
  overflow: hidden;
}

/* Préférable */
.card-text {
  min-height: 100px;
  /* Pas d'overflow: hidden sur le texte */
}

Gérer les débordements

Si un conteneur doit avoir une taille contrainte, assurez-vous que le contenu reste accessible.

.text-container {
  max-height: 300px;
  overflow-y: auto; /* Permettre le défilement plutôt que masquer */
}

Cas problématiques courants

Boutons avec hauteur fixe

Les boutons dont la hauteur est fixée en pixels peuvent voir leur texte tronqué si l'utilisateur augmente l'espacement.

/* Problématique */
.btn {
  height: 40px;
  line-height: 40px;
}

/* Solution */
.btn {
  padding: 0.5em 1em;
  line-height: 1.5;
}

Navigation horizontale

Les menus horizontaux avec des éléments de largeur fixe peuvent déborder.

/* Problématique */
nav li {
  width: 120px;
  white-space: nowrap;
}

/* Solution */
nav li {
  padding: 0.5em 1em;
  white-space: normal; /* Permettre le retour à la ligne */
}

Texte sur plusieurs colonnes

Les layouts multi-colonnes peuvent causer des chevauchements si l'espacement augmente.

/* Vérifier que les colonnes ont de l'espace */
.columns {
  column-gap: 2em; /* Espace suffisant entre colonnes */
}

[!TIP] Testez vos layouts avec les valeurs d'espacement maximales définies par WCAG pour identifier les problèmes en amont.

Tester la conformité

Bookmarklet de test

Le W3C propose un bookmarklet qui applique automatiquement les espacements WCAG pour tester vos pages. Vous pouvez également utiliser cette CSS de test :

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

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

Points de vérification

Après avoir appliqué les espacements de test, vérifiez :

1. Aucun texte n'est tronqué : tout le contenu reste visible
2. Aucun texte ne se superpose : les lignes et éléments restent distincts
3. Les interactions fonctionnent : boutons et liens restent cliquables
4. La mise en page est cohérente : pas de chevauchements d'éléments

Extensions de navigateur

Plusieurs extensions facilitent ce test :

• WAVE : inclut une vérification de l'espacement
• Accessibility Insights : propose un test automatisé
• Stylus/Stylish : permet d'injecter la CSS de test facilement

Bonnes pratiques de design

Valeurs par défaut recommandées

Même si le critère définit des minimums à supporter, adoptez des valeurs confortables par défaut.

body {
  font-size: 1rem;
  line-height: 1.6; /* Légèrement plus que le minimum */
}

p {
  margin-bottom: 1.5em;
}

Permettre la personnalisation

Idéalement, offrez aux utilisateurs la possibilité d'ajuster l'espacement selon leurs préférences.

:root {
  --line-height: 1.5;
  --letter-spacing: 0;
  --word-spacing: 0;
}

body {
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  word-spacing: var(--word-spacing);
}

Ces variables peuvent être modifiées via JavaScript pour offrir des options d'accessibilité.

Ce qui n'est pas couvert

Le critère WCAG 1.4.12 ne s'applique pas à :

• Les PDF et autres documents non-HTML
• Les sous-titres vidéo générés par des players spécifiques
• Les images de texte (qui doivent être évitées de toute façon)
• Les logos contenant du texte stylisé

Pour ces contenus, d'autres critères d'accessibilité s'appliquent.

Lien avec les autres critères

L'espacement du texte est lié à plusieurs autres exigences d'accessibilité :

• WCAG 1.4.4 Resize Text : le texte doit pouvoir être agrandi à 200%
• WCAG 1.4.10 Reflow : pas de défilement horizontal à 320px
• RGAA 10.4 : présentation de l'information indépendante du CSS

Une bonne implémentation de l'espacement contribue généralement à satisfaire ces critères connexes.

Conclusion

Le critère WCAG 1.4.12 demande une réflexion en amont sur la flexibilité de vos mises en page. En privilégiant les unités relatives et les conteneurs adaptatifs, vous garantissez une expérience accessible pour tous les utilisateurs, quelle que soit leur personnalisation de l'affichage. Testez régulièrement avec les espacements maximaux pour éviter les mauvaises surprises en production.

Pour une vérification complète de votre typographie, utilisez notre outil d'audit accessibilité qui analyse automatiquement de nombreux aspects liés au texte et à la lisibilité.