10.5. Garantir la lisibilité des contenus même lorsque les propriétés d’espacement du texte sont personnalisées

Dans chaque page web, les contenus doivent rester lisibles lorsque les propriétés d’espacement du texte sont personnalisées.

Pour garantir le bon respect de cette règle :

  • Ne pas définir de hauteur fixe (propriété CSS height) sur les éléments susceptibles d’accueillir du contenu textuel, notamment les champs de formulaires ou les composants de type « cards ».
  • Attention à l’utilisation du positionnement en absolu (déclaration CSS position: absolute;). Bien que ce positionnement soit compatible avec l’accessibilité, dans certains cas de figure, il peut entraîner des superpositions de contenu.
  • Ne pas baliser les textes qui ne sont pas des paragraphes avec des balises <p>, par exemple des tags, des boutons, etc.

Astuce

L’outil gratuit « Espacement des textes » (à mettre en favori du navigateur) permet de tester la bonne application de cette règle.

5 commentaires

  • Par Rafaël Magali, le 21 janvier 2021 à 14h27.

    Ce commentaire a été publié il y a plus de 2 ans. Il se peut que son contenu ne soit plus d'actualité.

    Bonjour,

    À propos de « Ne pas utiliser d’unité (px, pt, em, %, etc.) avec la propriété CSS line-height. »
    Du coup il est recommandé de ne pas utiliser cette propriété et laisser la valeur initiale définie par le font-size ?

    Ici il semble être recommandé d’augmenter le line-height par défaut avec une valeur en % ?
    https://www.w3.org/TR/WCAG20-TECHS/C21.html

    Répondre

    • Par Jeanne Lazzarelli, le 30 mars 2021 à 11h29.

      Ce commentaire a été publié il y a plus de 2 ans. Il se peut que son contenu ne soit plus d'actualité.

      Bonjour Magali,

      L’usage d’unités (même relatives, comme les % ou les em) dans la propriété line-height présente un risque car le comportement hérité sur les enfants peut avoir des effets inattendus et provoquer des chevauchements. Voici un exemple pour bien comprendre l’impact de l’unité utilisée sur le calcul du line-height : https://codepen.io/jeanne-atalan/pen/PoGrJpJ

      Il est donc fortement conseillé d’utiliser line-height avec des valeurs sans unité, comme ceci par exemple : line-height: 1.5;

      Il ne s’agit toutefois pas d’une obligation stricte au sens de WCAG 2.1 et du RGAA 4, nous allons donc modifier la formulation dans la notice ci-dessus pour mieux refléter cela.

      Merci d’avoir soulevé cette question !

      Jeanne

      Répondre

  • Par Améziane Allioui, le 29 juin 2016 à 9h15.

    Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

    Bonjour,

    A la ligne : « Veiller à l’utilisation du positionnement en absolu […] ».

    N’est-ce pas plutôt : « Limiter l’utilisation du positionnement en absolu […]. » ?

    Merci !
    Améziane

    Répondre

    • Par Johan Ramon, le 29 juin 2016 à 9h53.

      Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

      Bonjour Améziane,

      Et merci pour votre commentaire.

      Étant donné qu’il est possible d’utiliser exclusivement du positionnement en absolu tout en respectant cette recommandation (bonne lisibilité des contenus lorsque la taille du texte est doublée), nous préférons simplement mettre en garde sur les potentiels risques de cette technique.

      D’après nous, le terme « veiller » convient donc davantage ici.

      Johan

      Répondre

      • Par Améziane Allioui, le 29 juin 2016 à 14h20.

        Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

        Bonjour Johan,

        Merci pour votre réponse. Je n’avais pas compris que « veiller » voulait dire ici « faire attention », au temps pour moi !

        Améziane

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Mises à jour

30/03/2021
Remplacement de « Ne pas utiliser d’unité (px, pt, em, %, etc.) avec la propriété CSS line-height. » par « Il n’est pas recommandé d’utiliser des unités (px, pt, em, %, etc.) avec la propriété CSS line-height. »
29/10/2025
Mise à jour de la fiche pour s’adapter aux méthodes de développement actuelles.

Haut de page