Le texte de votre site reste-t-il lisible si un utilisateur modifie l'espacement des lettres, des mots ou des lignes pour améliorer son confort de lecture ?
Critère officiel 10.12 — Dans chaque page web, les propriétés d’espacement du texte peuvent-elles être redéfinies par l’utilisateur sans perte de contenu ou de fonctionnalité (hors cas particuliers) ?
Pourquoi c'est important
Les personnes dyslexiques et malvoyantes personnalisent souvent l'espacement du texte pour lire plus confortablement : plus d'espace entre les lignes, entre les mots, entre les lettres. Si le site utilise des zones à hauteur fixe ou bloque les propriétés d'espacement, le texte sort des conteneurs ou se chevauche dès que ces réglages sont appliqués.
Exemples concrets
Ce qui est conforme
La page de présentation du conseil municipal, avec un espacement augmenté (interligne à 1,5, espacement des lettres et des mots majorés), reste parfaitement lisible. Les blocs s'adaptent, aucun texte ne sort de son conteneur ni ne se superpose à un autre.
Ce qui pose problème
Le bandeau d'alerte a une hauteur fixe en pixels. Quand l'interligne est augmenté par l'utilisateur, le texte dépasse du bandeau et se superpose au contenu en dessous. Le message d'alerte devient illisible.
Comment agir
Test autonome avec le bookmarklet « Text Spacing » de Steve Faulkner (recherchez « Adrian Roselli text spacing bookmarklet ») : activez-le sur vos pages et vérifiez qu'aucun texte ne sort de son conteneur. Note éditoriale : évitez la justification du texte sur votre site — elle crée des espaces irréguliers entre les mots que les personnes dyslexiques trouvent particulièrement difficiles à lire. Préférez systématiquement l'alignement à gauche dans vos blocs WordPress.
Règles clés
- Valeurs de test WCAG 1.4.12 à appliquer simultanément :
- • line-height : 1.5× la taille de la police
- • letter-spacing : 0.12× la taille de la police
- • word-spacing : 0.16× la taille de la police
- • margin-bottom sur les paragraphes : 2× la taille de la police
- Aucun height fixe sur les conteneurs de texte — utiliser min-height ou laisser auto.
- Aucun overflow:hidden sur des conteneurs dont le texte peut s'étendre.
- Tester avec le bookmarklet Text Spacing de Steve Faulkner ou l'extension WCAG Text Spacing.
Erreurs fréquentes
- Boutons avec height:40px fixe — le libellé agrandi déborde
- Cartes avec height:200px fixe — le texte sort du cadre
- Navigation avec overflow:hidden — les items de menu débordent et sont coupés
- line-height:1 sur les titres — l'interlignage forcé à 1.5 provoque des superpositions
- Badges et étiquettes avec padding minimal et height fixe
Exemples de code
bouton avec hauteur fixe
✗ Non conforme.btn {
height: 44px; /* fixe — échoue à 1.5× line-height */
overflow: hidden; /* masque le texte qui déborde */
padding: 0 1rem;
font-size: 1rem;
line-height: 44px; /* centrage vertical — cassé à 1.5 */
}Avec line-height forcé à 1.5rem (24px) et height à 44px, le texte tient. Mais si l'utilisateur impose line-height:1.5 via son outil, le texte dépasse et overflow:hidden le masque.
bouton adaptatif
✓ Conforme.btn {
min-height: 2.75rem; /* min-height, pas height */
padding: 0.6rem 1rem; /* padding vertical pour le centrage */
font-size: 1rem;
line-height: 1.4; /* valeur raisonnable, pas forcée à 44px */
display: inline-flex;
align-items: center; /* centrage vertical via flex */
}min-height laisse le bouton s'agrandir si l'interlignage augmente. padding vertical + flexbox centrent le texte sans dépendre d'un line-height fixe.
carte avec hauteur fixe
✗ Non conforme.card {
height: 250px;
overflow: hidden;
}
.card-title {
font-size: 1.25rem;
line-height: 1.2; /* compressé — échoue à 1.5 */
}Hauteur fixe + overflow:hidden. Avec les espacements WCAG, le titre et le texte débordent — masqués silencieusement. L'utilisateur ne voit pas qu'il manque du contenu.
carte adaptative
✓ Conforme.card {
min-height: 15rem; /* se redimensionne si le texte s'agrandit */
/* Pas de overflow:hidden sur des conteneurs de texte */
}
.card-title {
font-size: 1.25rem;
line-height: 1.4; /* raisonnable, sans surcontrainte */
}min-height permet à la carte de grandir. Sans overflow:hidden, le contenu reste visible même avec des espacements augmentés.
Référence WCAG : 1.4.12