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) ?
Certains utilisateurs, notamment les personnes dyslexiques ou malvoyantes, ajustent l’espacement du texte via leurs préférences navigateur ou une feuille de style personnalisée. Si vos conteneurs ont une hauteur fixe avec overflow: hidden, le texte déborde et disparaît. L’information est perdue.
Ce critère impose que quatre propriétés CSS puissent être modifiées sans casse : line-height à 1,5 fois la taille de police, margin-bottom des <p> à 2 fois la taille de police, letter-spacing à 0,12em et word-spacing à 0,16em. Ce ne sont pas des valeurs à implémenter dans votre CSS. C’est la garantie que vos styles ne bloquent pas ces ajustements quand l’utilisateur les applique.
L’erreur la plus fréquente en audit : des cartes ou menus avec height fixe et overflow: hidden. Appliquez l’interligne à 1,5 et les libellés débordent du conteneur, invisibles. Remplacez height par min-height, retirez les overflow: hidden sur les conteneurs de texte, et laissez le texte s’étendre verticalement.
Un test pour s'assurer que l'espacement du texte peut être augmenté sans perte
Espacement du texte personnalisable
- Injectez ces quatre règles CSS dans la page (via le bookmarklet WCAG 1.4.12 ou les DevTools) :
line-height: 1.5sur tous les élémentsmargin-bottom: 2emsur les éléments<p>letter-spacing: 0.12emsur tous les élémentsword-spacing: 0.16emsur tous les éléments
- Parcourez chaque passage de texte et vérifiez qu’il reste lisible : aucun texte tronqué, aucun chevauchement, aucune perte d’information.
- Ignorez ces exceptions, elles ne sont pas évaluées :
- Sous-titres intégrés directement dans le flux vidéo
- Images texte
- Textes dans une balise
<canvas>
- Si tous les passages restent lisibles après application des espacements, le test est validé.
Exemples
❌ Non conforme : Conteneur à hauteur fixe qui coupe le texte
<style>
.nav-item {
height: 44px;
overflow: hidden;
display: flex;
align-items: center;
}
</style>
<nav>
<ul>
<li class="nav-item"><a href="/accueil">Accueil</a></li>
<li class="nav-item"><a href="/services">Nos services</a></li>
<li class="nav-item"><a href="/contact">Nous contacter</a></li>
</ul>
</nav>Quand un utilisateur applique line-height: 1.5, les liens deviennent plus hauts que 44px. overflow: hidden les coupe. L’utilisateur ne voit plus les éléments de navigation qui débordent du conteneur, sans aucun avertissement.
✅ Conforme : Conteneur flexible qui s’adapte à l’espacement
<style>
.nav-item {
min-height: 44px;
display: flex;
align-items: center;
}
</style>
<nav>
<ul>
<li class="nav-item"><a href="/accueil">Accueil</a></li>
<li class="nav-item"><a href="/services">Nos services</a></li>
<li class="nav-item"><a href="/contact">Nous contacter</a></li>
</ul>
</nav>min-height garantit une taille minimale tout en laissant le conteneur s’agrandir si le texte prend plus de place. L’interligne peut être augmenté sans que le contenu ne disparaisse. Aucune limite d’expansion.
Astuces et pièges
⚠️ overflow: hidden sur les conteneurs de texte
C’est le cas numéro un des non-conformités sur ce critère. Des cartes produit, des menus, des en-têtes avec height fixe et overflow: hidden font disparaître le texte dès que l’interligne augmente. Auditez chaque conteneur portant du texte : remplacez height par min-height et retirez overflow: hidden sauf contrainte technique documentée.
⚠️ L’ellipse (...) n’est pas toujours non-conforme
Si votre texte est déjà tronqué avec text-overflow: ellipsis avant l’application des espacements, le critère reste conforme à condition qu’un mécanisme permette d’accéder au texte complet (focus sur l’élément, lien vers la page détail). En revanche, si le texte n’était pas tronqué à l’origine et le devient après application des espacements sans mécanisme de révélation, le critère est non conforme.
💡 Le bookmarklet officiel pour tester en un clic
Le script fourni dans les ressources WCAG 1.4.12 applique instantanément les quatre propriétés d’espacement sur n’importe quelle page. Glissez-le dans votre barre de favoris et activez-le lors de vos audits. Source : https://github.com/alastc/adaptation-scripts/blob/master/scripts/text-adaptation.js
⚠️ Trois types de contenu non évalués
Les sous-titres intégrés directement dans le flux vidéo (incrustés dans l’image), les images texte, et les textes dans une balise <canvas> sont exemptés. En revanche, les sous-titres dans un fichier .vtt affiché en superposition par le navigateur restent soumis au critère.
⚠️ white-space: nowrap sans conteneur extensible
Combiné à un conteneur de largeur fixe, white-space: nowrap empêche les retours à la ligne quand word-spacing augmente. Le texte déborde horizontalement ou se retrouve coupé. Vérifiez que les conteneurs avec white-space: nowrap peuvent s’élargir, ou que leur contenu textuel est assez court pour ne pas poser de problème.
Questions fréquentes
Comment tester le critère 10.12 rapidement sans écrire de CSS manuellement ?
Utilisez le bookmarklet du projet WCAG 1.4.12, disponible sur GitHub (alastc/adaptation-scripts/text-adaptation.js). Il applique en un clic les quatre valeurs d’espacement sur la page courante. Alternative : dans les DevTools, créez une règle * et collez-y les quatre propriétés. Parcourez ensuite chaque zone de texte visuellement.
Quel impact text-overflow: ellipsis a-t-il sur la conformité au critère RGAA 10.12 ?
Non. Si le texte était déjà tronqué avant l’application des espacements et qu’un mécanisme donne accès au contenu complet (sur la même page ou via un lien), le critère peut être conforme. La non-conformité apparaît uniquement quand le texte n’était pas tronqué à l’origine et le devient après espacement, sans aucun mécanisme de révélation.
Comment le critère 10.12 s'applique-t-il aux champs de formulaire <input> et <textarea> ?
Oui. Les champs contiennent du texte visible par l’utilisateur et entrent dans le périmètre du critère. Un <input> à largeur fixe dont le texte saisi déborde visuellement après l’application des espacements constitue une perte de fonctionnalité au sens du critère 10.12.
Comment le critère 10.12 couvre-t-il les composants tiers comme carousels, modales et widgets ?
Oui. Dès que le texte fait partie du contenu visible de la page, il est dans le périmètre, quelle que soit son origine technique. Si un composant tiers bloque les personnalisations CSS, il constitue une non-conformité à 10.12. Signalez-le au fournisseur ou remplacez-le par une alternative conforme.
Quelle différence y a-t-il entre line-height: 1.5 sans unité et line-height: 1.5em en RGAA ?
Pour le test, appliquez la valeur 1.5 sans unité — c’est une valeur relative à la taille de police de chaque élément. C’est la notation recommandée par le WCAG pour garantir que l’interligne s’adapte proportionnellement à toutes les tailles de police présentes dans la page.