Espacement du texte

Silktide détecte les éléments dont les styles en ligne verrouillent l’espacement du texte — letter-spacing, word-spacing ou line-height — avec !important à une valeur inférieure au minimum des WCAG, empêchant ainsi les utilisateurs de l’ajuster.

Pourquoi est-ce important ?

Les personnes dyslexiques ou malvoyantes ont souvent besoin d’un texte plus espacé pour le lire : des lignes plus hautes, des espaces plus larges entre les lettres et les mots. Elles utilisent pour cela des extensions de navigateur et des feuilles de style personnalisées qui remplacent l’espacement d’une page.

Ces outils injectent du CSS ordinaire au niveau auteur. Une déclaration !important dans l’attribut style d’un élément prévaut sur toute règle au niveau auteur, quelle que soit sa spécificité : c’est la seule construction sur une page que ces outils ne peuvent pas remplacer. Lorsqu’elle verrouille l’espacement en dessous des minimums, l’utilisateur est tout simplement exclu.

Le critère de succès 1.4.12 (niveau AA) des exige que le contenu reste utilisable lorsque les utilisateurs augmentent l’espacement du texte au moins jusqu’aux valeurs suivantes :

Hauteur de ligne — 1,5 fois la taille de police
Espacement des lettres — 0,12 fois la taille de police
Espacement des mots — 0,16 fois la taille de police

Comment corriger le problème

Pour chaque élément signalé, effectuez l’une des opérations suivantes :

Supprimez l’indicateur !important de la déclaration en ligne. Les outils des utilisateurs pourront alors la remplacer, sans modifier votre conception pour les autres utilisateurs.
Déplacez la déclaration dans une feuille de style. Même avec !important, les règles de feuille de style peuvent être remplacées par les outils des utilisateurs.
Augmentez la valeur jusqu’au minimum des WCAG si l’espacement doit réellement être fixé.

<!-- Échec : verrouillé sous le minimum ; les outils des utilisateurs ne peuvent pas remplacer cette valeur -->
<p style="line-height: 1.2 !important">…</p>

<!-- Corrigé : peut être remplacé -->
<p style="line-height: 1.2">…</p>

<!-- Également acceptable : verrouillé, mais à une valeur qui respecte déjà le minimum -->
<p style="line-height: 1.5 !important">…</p>

Comment Silktide effectue cette vérification

Rechercher les éléments dont l’attribut style déclare letter-spacing, word-spacing ou line-height avec !important, et qui contiennent directement du texte visible.
Calculer la valeur déclarée par rapport à la taille de police de l’élément.
Signaler l’élément lorsque la valeur verrouillée est inférieure au minimum des WCAG pour cette propriété.

Cette approche reflète les règles ACT du W3C pour le critère 1.4.12 (espacement des lettres, espacement des mots, hauteur de ligne).

Silktide ne signale pas l’espacement avec !important dans les feuilles de style — les outils des utilisateurs peuvent encore le remplacer — et ne simule pas l’application des remplacements d’espacement pour détecter les mises en page défectueuses, ce qu’aucun outil automatisé ne fait actuellement. Réussir cette vérification signifie que rien sur la page n’empêche les utilisateurs d’ajuster l’espacement ; vérifier que votre mise en page reste lisible avec un espacement ajusté est un test manuel rapide à l’aide d’un bookmarklet d’espacement du texte.

Dépannage

Les bibliothèques de composants et les scripts intégrés écrivent parfois des styles !important en ligne. Ils sont pris en compte pour votre page dans tous les cas ; vérifiez les paramètres du fournisseur ou contactez-le à ce sujet.

L’espacement est verrouillé à une valeur conforme

Les valeurs égales ou supérieures aux minimums des WCAG réussissent la vérification même lorsqu’elles sont verrouillées : verrouiller line-height: 1.6 !important ne nuit à personne, car cette valeur dépasse déjà celle vers laquelle les utilisateurs l’augmenteraient.