WCAG 1.4.12 : Espacement du texte

Ce que signifie cette règle

WCAG 1.4.12 Espacement du texte appartient à la Règle 1.4 (Distinguable) et vise un problème très spécifique : de nombreuses personnes ayant des troubles de la lecture, une basse vision ou des déficiences cognitives ont besoin de remplacer l’espacement de texte par défaut d’une page web pour rendre le contenu lisible pour elles. Si la mise en page d’un site se casse — le texte est rogné, les boutons se chevauchent, les étiquettes de formulaire disparaissent ou le contenu devient inatteignable — lorsque l’espacement est augmenté, le site ne respecte pas ce critère.

Le critère définit quatre propriétés d’espacement qui doivent rester fonctionnelles lorsqu’elles sont définies simultanément aux valeurs minimales suivantes :

• Interligne (espacement des lignes) : au moins 1,5 fois la taille de police de l’élément.
• Espacement des lettres (tracking) : au moins 0,12 fois la taille de police de l’élément.
• Espacement des mots : au moins 0,16 fois la taille de police de l’élément.
• Espacement après les paragraphes : au moins 2 fois la taille de police de l’élément.

Une page réussit ce critère si, après l’application de ces quatre surcharges, les utilisateurs peuvent toujours lire tout le texte, utiliser tous les contrôles interactifs et accéder à tout le contenu de la page sans défilement horizontal avec une fenêtre d’affichage de 320 pixels CSS de large, sans rognage ni troncation, et sans chevauchement de contenu au point de le rendre illisible ou inutilisable.

Une page échoue si l’application de ces surcharges provoque l’un des éléments suivants : le texte est coupé par un conteneur à hauteur fixe avec overflow: hidden ; les étiquettes interactives ou le texte des boutons disparaissent ; les menus déroulants ou infobulles se superposent au contenu principal de manière inutilisable ; ou tout contenu devient définitivement inaccessible.

Il est important de noter que le critère n’exige pas que vous définissiez vous-même ces valeurs d’espacement. Il exige seulement que votre mise en page ne se casse pas lorsque l’utilisateur (ou sa technologie d’assistance, une extension de navigateur ou une feuille de style utilisateur) applique ces surcharges. Les valeurs d’espacement sont des seuils pour les tests, pas des exigences de conception.

Il existe une exception explicite : les composants pour lesquels une présentation visuelle particulière est essentielle à l’information transmise — par exemple, un logotype, une partition musicale rendue en SVG ou une image CAPTCHA — sont exemptés. Cependant, cette exception est étroite et ne doit pas être utilisée comme prétexte général pour exempter les menus de navigation ou les composants de type carte.

Ce critère s’applique à tout le contenu textuel rendu dans le navigateur à l’aide de CSS, y compris les titres, paragraphes, étiquettes, texte des boutons, texte d’espace réservé, éléments de liste, cellules de tableau et liens de navigation. Il ne s’applique pas au texte rendu à l’intérieur d’images ou d’éléments canvas, car ceux-ci ne sont pas affectés par les surcharges d’espacement CSS.

Pourquoi c’est important

L’espacement du texte affecte directement des personnes présentant un large éventail de handicaps et de profils de lecture. Selon l’Organisation mondiale de la Santé, environ 2,2 milliards de personnes dans le monde présentent une forme de déficience visuelle ou de cécité, et beaucoup d’entre elles utilisent le zoom du navigateur ou des feuilles de style personnalisées pour rendre le contenu lisible. Au-delà de la déficience visuelle, on estime que 15 à 20 % de la population mondiale est dyslexique, une condition pour laquelle l’augmentation de l’espacement des lettres, de l’espacement des mots et de l’interligne constitue une intervention avérée en matière de lisibilité — étayée par des recherches, notamment des études publiées dans la revue Annals of Dyslexia.

Pour les utilisateurs ayant des déficiences cognitives telles que le TDAH ou des difficultés de traitement, un espacement serré du texte augmente la charge cognitive de la lecture en rendant plus difficile le suivi des lignes et la distinction des mots individuels. Ces utilisateurs installent fréquemment des extensions de navigateur comme le Readability Bookmarklet, Stylus ou des paramètres d’accessibilité au niveau de la plateforme qui appliquent un espacement personnalisé à tous les sites web qu’ils visitent.

Considérez un scénario concret : une étudiante universitaire dyslexique visite une plateforme de e-commerce turque pour vérifier une politique de retour de produit avant un examen. Elle utilise une extension de navigateur qui définit l’interligne à 1,7 et l’espacement des lettres à 0,14em globalement. Sur la page de détail du produit, le texte de la politique de retour se trouve dans un <div> à hauteur fixe, stylé avec height: 120px; overflow: hidden;. Avec son espacement personnalisé activé, seules les deux premières lignes sont visibles et il n’existe aucun mécanisme pour révéler le reste. Elle ne peut pas accomplir sa tâche et perd confiance dans la plateforme. C’est précisément ce type d’échec que WCAG 1.4.12 est conçu pour prévenir.

Au-delà de l’accès pour les personnes handicapées, il existe des bénéfices secondaires. Les mises en page flexibles et résistantes aux variations d’espacement ont tendance à être plus robustes sur les marchés internationaux — le texte turc, par exemple, contient souvent des formes de mots plus longues en raison de la morphologie agglutinante, et les mises en page qui ne peuvent pas s’adapter aux variations d’espacement ont également tendance à se casser avec des chaînes plus longues. Les mises en page accessibles améliorent également le référencement de manière indirecte : un contenu lisible et accessible a tendance à présenter des taux de rebond plus faibles et de meilleurs signaux d’engagement, que les moteurs de recherche prennent en compte dans leurs classements.

Règles axe-core associées

WCAG 1.4.12 nécessite des tests manuels et ne peut pas être entièrement vérifié par des outils automatisés seuls. En effet, les moteurs automatisés ne peuvent pas prédire comment une mise en page se comportera sous l’effet de surcharges de styles appliquées par l’utilisateur sans réellement appliquer ces surcharges et mesurer le résultat rendu — un processus qui nécessite une inspection visuelle ou une comparaison de rendu en mode headless. Le moteur axe-core n’inclut pas de règle automatisée dédiée pour 1.4.12 pour cette raison.

• Tests manuels avec le Text Spacing Bookmarklet : L’approche de test recommandée est le Text Spacing Bookmarklet créé par Steve Faulkner (désormais maintenu par la communauté de l’accessibilité). Ce bookmarklet injecte une feuille de style dans la page courante qui définit simultanément les quatre propriétés d’espacement à leurs valeurs seuils minimales. Le testeur vérifie ensuite visuellement (ou avec un lecteur d’écran) si du contenu est rogné, se chevauche ou est inaccessible. L’approche par bookmarklet est la méthode de référence mentionnée dans le document Understanding du W3C pour 1.4.12.
• Pourquoi l’automatisation est insuffisante : Les analyseurs automatisés tels qu’axe-core analysent le DOM et les styles calculés tels qu’ils existent au moment de l’analyse. Ils ne simulent pas les surcharges de feuilles de style utilisateur et ne re-rendent pas la page pour détecter les débordements de mise en page ou le rognage causés par ces surcharges. Un conteneur avec overflow: hidden et une hauteur fixe réussira un scan automatisé car, pris isolément, ce n’est pas une erreur d’accessibilité — il ne le devient que lorsque l’espacement est augmenté. Ce n’est qu’en appliquant la surcharge et en observant le résultat qu’un testeur peut confirmer un échec.
• Vérifications automatisées complémentaires : Bien qu’aucune règle axe ne corresponde directement à 1.4.12, les réviseurs doivent également noter que la règle scrollable-region-focusable d’axe et les règles de contraste des couleurs peuvent faire apparaître des problèmes connexes qui contribuent à une mauvaise expérience d’espacement du texte. De plus, l’audit d’accessibilité de Lighthouse peut signaler des conteneurs de taille fixe dans certains contextes, bien que pas spécifiquement pour la conformité à l’espacement.

Comment tester

1. Installer le Text Spacing Bookmarklet. Accédez à la page du Text Spacing Bookmarklet de Steve Faulkner (accessible via le document Understanding du W3C ou une recherche web pour « text spacing bookmarklet WCAG »). Faites glisser le bookmarklet vers la barre de favoris de votre navigateur. Vous pouvez aussi créer un favori manuellement et coller le JavaScript du bookmarklet comme URL.
2. Ouvrir la page à tester dans votre navigateur à son niveau de zoom par défaut (100 %). Accédez à la page ou au composant que vous souhaitez évaluer — par exemple, une page de liste de produits, un formulaire de paiement ou un menu de navigation.
3. Activer le bookmarklet. Cliquez sur le bookmarklet. Cela injecte du CSS qui définit line-height: 1.5 !important, letter-spacing: 0.12em !important, word-spacing: 0.16em !important et la marge inférieure des p à 2em !important sur l’ensemble de la page.
4. Inspecter visuellement toute la page. Faites défiler toutes les zones de contenu. Recherchez : du texte coupé en bas d’un conteneur ; des libellés de boutons ou du texte de lien qui ont disparu ou sont partiellement cachés ; des menus de navigation ou des menus déroulants où les éléments se chevauchent ; des champs de formulaire où le texte d’espace réservé ou d’étiquette est rogné ; et des boîtes de dialogue modales ou des infobulles où le contenu déborde des limites du conteneur.
5. Interagir avec les éléments interactifs. Parcourez tous les éléments focalisables avec la touche Tab, activez les menus déroulants, ouvrez les modales et soumettez les formulaires. Vérifiez que tous les contrôles interactifs restent utilisables et que leurs libellés visibles sont entièrement lisibles avec l’espacement appliqué.
6. Tester avec un lecteur d’écran pour détecter une perte fonctionnelle. Avec le bookmarklet toujours actif, utilisez NVDA avec Firefox ou JAWS avec Chrome pour parcourir la page par titres, repères et éléments interactifs. Vérifiez que l’ordre de lecture et le contenu annoncé correspondent à ce qu’un utilisateur voyant voit. Utilisez VoiceOver sur Safari sur macOS ou iOS pour couvrir les plateformes Apple.
7. Tester avec une fenêtre d’affichage de 320px de large. Redimensionnez la fenêtre de votre navigateur à 320 pixels CSS de large (ou utilisez le mode responsive des DevTools du navigateur). Réactivez le bookmarklet. Vérifiez que le contenu reste accessible sans défilement horizontal et que le texte n’est pas rogné avec une petite largeur de fenêtre combinée à un espacement accru.
8. Documenter les échecs. Pour chaque échec, consignez : le type d’élément, sa classe ou son ID CSS, la propriété d’espacement spécifique qui provoque l’échec, et une capture d’écran avant et après l’activation du bookmarklet.

Comment corriger

Conteneur à hauteur fixe rognant le texte — Incorrect

<!-- Failure: fixed height with overflow:hidden clips text when line-height increases -->
<div class='product-description' style='height: 80px; overflow: hidden;'>
  <p>Bu ürün doğal malzemelerden üretilmiştir ve 2 yıl garanti kapsamındadır.</p>
</div>

Conteneur à hauteur fixe rognant le texte — Correct

<!-- Fix: use min-height instead of height, and allow overflow to be visible or auto -->
<div class='product-description' style='min-height: 80px; overflow: visible;'>
  <p>Bu ürün doğal malzemelerden üretilmiştir ve 2 yıl garanti kapsamındadır.</p>
</div>
<!-- If you need to truncate for design reasons, use a "Read more" button pattern
     that expands the content rather than hiding it with overflow:hidden -->

Libellé de bouton rogné par une hauteur de bouton fixe — Incorrect

<!-- Failure: fixed height on button causes label text to be cut off
     when letter-spacing and line-height are increased -->
<button style='height: 36px; overflow: hidden; white-space: nowrap;'>
  Sepete Ekle
</button>

Libellé de bouton rogné par une hauteur de bouton fixe — Correct

<!-- Fix: use min-height and padding instead of fixed height.
     padding ensures the button grows with its content. -->
<button style='min-height: 36px; padding: 8px 16px;'>
  Sepete Ekle
</button>

Infobulle ou menu déroulant débordant sans défilement — Incorrect

<!-- Failure: tooltip has a max-height and overflow:hidden,
     causing content to be cut off when spacing is increased -->
<div role='tooltip' id='info-tip' style='max-height: 60px; overflow: hidden;'>
  Bu alan zorunludur. Lütfen geçerli bir e-posta adresi giriniz.
</div>

Infobulle ou menu déroulant débordant sans défilement — Correct

<!-- Fix: remove the max-height restriction or use overflow:auto
     so content remains accessible when spacing is overridden -->
<div role='tooltip' id='info-tip' style='max-width: 280px; overflow: auto;'>
  Bu alan zorunludur. Lütfen geçerli bir e-posta adresi giriniz.
</div>

Espacement des paragraphes cassant la mise en page d’une carte — Incorrect

<!-- Failure: card uses absolute positioning and a fixed container height.
     When paragraph margin-bottom is set to 2em by the user,
     text overflows and overlaps the card footer. -->
<div class='card' style='position: relative; height: 200px; overflow: hidden;'>
  <p>Ürün açıklaması burada yer alır ve birden fazla satır içerebilir.</p>
  <div class='card-footer' style='position: absolute; bottom: 0;'>
    <a href='/urun/detay'>Detayları Gör</a>
  </div>
</div>

Espacement des paragraphes cassant la mise en page d’une carte — Correct

<!-- Fix: use flexbox or grid with a natural document flow.
     The footer follows the content instead of being absolutely positioned.
     min-height allows the card to grow with its content. -->
<div class='card' style='display: flex; flex-direction: column; min-height: 200px;'>
  <p style='flex: 1;'>Ürün açıklaması burada yer alır ve birden fazla satır içerebilir.</p>
  <div class='card-footer'>
    <a href='/urun/detay'>Detayları Gör</a>
  </div>
</div>

Erreurs courantes

• Utiliser height au lieu de min-height sur les conteneurs de texte. Une height fixe sur tout élément contenant du texte provoquera un rognage dès que l’utilisateur augmentera l’interligne ou l’espacement des lettres. Remplacez toutes les hauteurs fixes sur les conteneurs contenant du texte par min-height afin que le conteneur puisse grandir.
• Définir overflow: hidden sur des conteneurs qui contiennent du texte de paragraphe. C’est la cause la plus fréquente d’échecs 1.4.12. Un overflow masqué rogne le texte qui s’étend verticalement lorsque l’espacement augmente. Utilisez overflow: visible ou overflow: auto selon le contexte de conception.
• Utiliser white-space: nowrap sur les libellés de boutons ou de liens sans flexibilité suffisante du conteneur. Lorsque l’espacement des lettres augmente, le texte en nowrap peut déborder de son parent ou être rogné, en particulier dans les éléments de navigation de largeur fixe.
• Positionner absolument des éléments de pied de page ou d’action à l’intérieur d’une carte à hauteur fixe. Lorsque le contenu de la carte augmente en raison des surcharges d’espacement, les éléments positionnés absolument en bas de la carte se superposent au texte. Utilisez plutôt une mise en page en colonne avec flexbox.
• Appliquer max-height avec overflow: hidden à des sections repliables dans leur état développé. Les accordéons animés qui se déploient jusqu’à une valeur de max-height calculée sur la base de mesures en pixels rogneront le texte à cette limite en pixels lorsque l’espacement est surchargé, même lorsqu’ils sont complètement ouverts.
• Utiliser la propriété CSS line-clamp (webkit-line-clamp) sans mécanisme visible pour développer le contenu complet. Limiter le texte à un nombre fixe de lignes est acceptable uniquement s’il existe un contrôle clairement étiqueté et accessible au clavier pour révéler l’intégralité du contenu. Le clampage sans mécanisme d’extension enfreint 1.4.12.
• Compter sur JavaScript pour définir dynamiquement des hauteurs d’éléments en pixels. Les scripts qui mesurent les hauteurs d’éléments puis figent ces valeurs en pixels sous forme de styles en ligne verrouillent le conteneur à une taille qui ignore les surcharges d’espacement de l’utilisateur. Utilisez le dimensionnement intrinsèque et laissez CSS gérer la mise en page.
• Supposer que les analyses d’accessibilité automatisées détecteront tous les échecs 1.4.12. Les équipes qui s’appuient exclusivement sur axe ou Lighthouse sans exécuter le Text Spacing Bookmarklet manqueront tous les échecs d’espacement liés à la mise en page. Les tests manuels avec le bookmarklet sont obligatoires pour ce critère.
• Ne pas tester les menus de navigation et méga-menus avec le bookmarklet. Les composants de navigation sont fréquemment construits avec des hauteurs en pixels fixes et un overflow masqué pour créer un rendu visuel soigné. Ce sont aussi parmi les composants qui échouent le plus souvent pour 1.4.12, car l’augmentation de l’espacement provoque le retour à la ligne et le rognage des éléments de menu.
• Considérer les valeurs d’espacement comme des exigences de conception plutôt que comme des seuils de test. Certaines équipes répondent à 1.4.12 en mettant à jour leurs styles par défaut pour correspondre aux valeurs seuils, ce qui est inutile et peut entrer en conflit avec l’intention du designer. Le critère exige seulement que la mise en page ne se casse pas lorsque ces valeurs sont appliquées — pas qu’elles soient la valeur par défaut.

Lien avec la réglementation turque en matière d’accessibilité

WCAG 1.4.12 Espacement du texte est directement pertinent pour le cadre juridique émergent de la Turquie en matière d’accessibilité. Le développement récent le plus important est la Circulaire présidentielle 2025/10, publiée au Journal officiel n° 32933 le 21 juin 2025. Cette circulaire établit des obligations contraignantes pour un large éventail d’organisations afin de garantir l’accessibilité numérique de leur présence web et de leurs applications mobiles.

La circulaire couvre un large ensemble de types d’entités. Les institutions et agences publiques à tous les niveaux de gouvernement sont tenues de s’y conformer. Les entités du secteur privé dans le champ d’application comprennent les plateformes de e-commerce, les banques et institutions financières, les hôpitaux et prestataires de soins de santé, les entreprises de télécommunications comptant 200 000 abonnés ou plus, les agences de voyage, les entreprises de transport privé et les écoles privées autorisées par le ministère de l’Éducation nationale (MoNE). Ces organisations sont tenues d’atteindre la conformité de niveau AA avec les WCAG, ce qui inclut 1.4.12, dans le cadre de leurs obligations au titre de la circulaire.

La conformité au niveau AA est également une condition préalable à l’obtention du Logo d’accessibilité (Erişilebilirlik Logosu) délivré par le ministère de la Famille et des Services sociaux (Aile ve Sosyal Hizmetler Bakanlığı). Ce logo indique aux utilisateurs, en particulier ceux en situation de handicap, qu’un produit numérique a été audité et respecte la norme d’accessibilité requise. Pour les organisations qui servent la communauté turque des personnes handicapées — estimée à plusieurs millions de personnes, y compris celles ayant des déficiences visuelles, cognitives et de lecture — le logo a un poids à la fois en termes de réputation et de réglementation.

Concrètement, une plateforme de e-commerce turque qui utilise des conteneurs de description de produit à hauteur fixe avec overflow: hidden, ou un portail gouvernemental dont le menu de navigation rogne le contenu lorsqu’un utilisateur applique des surcharges d’espacement via une extension de navigateur ou un paramètre d’accessibilité du système d’exploitation, ne se contente pas d’échouer vis-à-vis de ses utilisateurs — elle est potentiellement non conforme aux obligations établies par la circulaire 2025/10. Les échecs liés à l’espacement du texte sont particulièrement pertinents pour les utilisateurs turcs dyslexiques et malvoyants qui s’appuient sur des outils d’espacement personnalisé, ainsi que pour les utilisateurs qui accèdent aux services gouvernementaux ou commerciaux sur des appareils mobiles où les paramètres de taille de texte du système d’exploitation peuvent également déclencher une instabilité de mise en page similaire aux surcharges d’espacement.

Les organisations qui souhaitent obtenir l’Erişilebilirlik Logosu doivent inclure un audit manuel de l’espacement du texte à l’aide du Text Spacing Bookmarklet comme étape obligatoire de leur processus d’audit d’accessibilité, en complément des analyses automatisées et des tests avec lecteur d’écran. La correction des échecs 1.4.12 — principalement en remplaçant les hauteurs fixes par min-height, en supprimant les overflow: hidden inutiles des conteneurs de texte et en adoptant des techniques de mise en page CSS flexibles — est généralement réalisable sans modifications de conception significatives et représente une amélioration à forte valeur ajoutée et à faible coût de l’accessibilité de tout service numérique turc.