avoid-inline-spacing
Le style en ligne ne doit pas imposer un espacement du texte inférieur à la métrique WCAG
Vérifie que, lorsqu’un style en ligne impose line-height, letter-spacing ou word-spacing avec !important, la valeur respecte déjà WCAG 1.4.12, de sorte que l’utilisateur n’a plus rien à surcharger.
Applicabilité. S’applique à un élément affiché, doté de son propre texte visible, dont l’attribut style déclare line-height, letter-spacing ou word-spacing en !important avec une valeur réelle. Un mot-clé CSS global (inherit, initial, unset, revert) ne spécifie aucun espacement propre et est hors périmètre.
Attendu. Chacune de ces déclarations respecte déjà la métrique propre de WCAG 1.4.12 pour cette propriété, exprimée en multiple de la taille de police : line-height d’au moins 1.5, letter-spacing d’au moins 0.12, word-spacing d’au moins 0.16. Une valeur imposée qui satisfait déjà le critère ne laisse rien à surcharger pour l’utilisateur.
Ce que rapporte un constat.
properties: les propriétés d’espacement concernées par le constat. Chaque élément estline-height,letter-spacingouword-spacing. Sur unfail, ou sur un texte qui risque de ne jamais revenir à la ligne, ce sont celles imposées sous la valeur de référence ; surINLINE_SPACING_NOT_RESOLVABLE, celles dont la valeur n’a pas pu être déterminée.
Ces champs de data.details aident à lire et à reproduire un constat. À part reasonCode et les quelques champs que la page Schéma de sortie donne comme stables, ils ne constituent pas un contrat stable : un champ peut être renommé ou supprimé dans une version mineure, ne vous appuyez donc pas dessus.
Exemples
<p style="letter-spacing:2px !important">Spaced text</p>
Le letter-spacing imposé est supérieur à la métrique minimale de WCAG 1.4.12.
<p style="line-height:1.2 !important">The toy brought back fond memories of being lost in the rain forest.</p>
!important impose un line-height inférieur au minimum de 1.5, et les styles de la page ne peuvent pas le surcharger.
<p style="line-height:1 !important">Opening hours</p>
Le texte est assez court pour tenir sur une ligne ; il peut donc ne jamais revenir à la ligne, et le critère ne s’applique qu’au texte qui revient à la ligne.
Comment vérifier
Quand cette règle ne peut pas trancher, elle renvoie cantTell et laisse la question à une personne. Chaque question qu’elle peut poser figure ici sous son code de raison, avec les étapes pour y répondre. Un constat porte les mêmes étapes dans howToCheck, dans la langue de l’analyse. Voir Schéma de sortie.
INLINE_SPACING_NOT_RESOLVABLE
- Inspectez l’élément indiqué par le rapport et lisez la valeur d’espacement !important dans son attribut style.
- Dans l’onglet Calculé des outils de développement, lisez la valeur résultante de line-height, letter-spacing ou word-spacing en pixels et comparez-la à 1,5 fois, 0,12 fois ou 0,16 fois la taille de police.
- Appliquez l’espacement du texte de WCAG 1.4.12 (line-height 1.5, letter-spacing 0.12em, word-spacing 0.16em, espacement des paragraphes 2em) avec !important, par exemple au moyen d’une feuille de style utilisateur ou d’un bookmarklet ; comme le style en ligne !important de l’élément l’emporte, notez aussi les valeurs qu’il conserve.
- Réduisez à 320 pixels CSS et vérifiez si le texte est coupé ou se chevauche.
Réussite. La valeur imposée atteint la mesure de WCAG 1.4.12, ou le texte ne revient pas à la ligne, ou rien n’est perdu une fois l’espacement appliqué.
Échec. La valeur imposée est inférieure à la mesure sur un texte qui revient à la ligne, et le texte ne supporte pas l’espacement de l’utilisateur sans perte, ce qui ne respecte pas le critère WCAG 1.4.12.
INLINE_SPACING_NO_SOFT_WRAP
- Inspectez l’élément indiqué par le rapport et notez quelle propriété d’espacement son attribut style impose avec !important.
- Réduisez la fenêtre à 320 pixels CSS de large (ou zoomez à 400 %) et vérifiez si le texte passe parfois sur une deuxième ligne.
- Appliquez l’espacement du texte de WCAG 1.4.12 (line-height 1.5, letter-spacing 0.12em, word-spacing 0.16em, espacement des paragraphes 2em) avec !important, par exemple au moyen d’une feuille de style utilisateur ou d’un bookmarklet ; comme le style en ligne !important de l’élément l’emporte, notez aussi les valeurs qu’il conserve.
- Vérifiez si du texte est coupé, se chevauche ou est masqué.
Réussite. Le texte ne peut pas revenir à la ligne (il reste sur une ligne ou défile) et rien n’est coupé ni ne se chevauche : le critère ne s’applique donc pas.
Échec. Le texte revient bien à la ligne et, avec l’espacement imposé, les lignes se chevauchent ou le texte est rogné, ce qui ne respecte pas le critère WCAG 1.4.12.
INLINE_SPACING_SHORT_TEXT
- Inspectez l’élément indiqué par le rapport et notez quelle propriété d’espacement son attribut style impose avec !important.
- Réduisez la fenêtre à 320 pixels CSS de large (ou zoomez à 400 %) et vérifiez si le texte court passe sur deux lignes.
- Appliquez l’espacement du texte de WCAG 1.4.12 (line-height 1.5, letter-spacing 0.12em, word-spacing 0.16em, espacement des paragraphes 2em) avec !important, par exemple au moyen d’une feuille de style utilisateur ou d’un bookmarklet ; comme le style en ligne !important de l’élément l’emporte, notez aussi les valeurs qu’il conserve.
- Vérifiez si le texte est coupé, se chevauche ou est masqué.
Réussite. Le texte reste sur une ligne à toutes les largeurs, ou revient à la ligne sans que les lignes se chevauchent ni que du texte soit perdu.
Échec. Le texte revient à la ligne et l’espacement imposé fait se chevaucher les lignes ou rogne le texte, ce qui ne respecte pas le critère WCAG 1.4.12.