11.2. Garantir la lisibilité des contenus même lorsque la taille du texte est doublée

Garantir la lisibilité des contenus jusqu’au point où la taille du texte est doublée par rapport à la taille par défaut.

Sur l’ensemble de cette plage d’agrandissement de la taille des textes, les contenus et fonctionnalités ne doivent pas se chevaucher ou disparaître.

Pour garantir le bon respect de cette règle :

  • Utiliser uniquement des unités relatives (rem, em, %, etc.) pour la gestion des espacements (propriétés CSS margin et padding).
  • Il n’est pas recommandé d’utiliser des unités (px, pt, em, %, etc.) avec la propriété CSS line-height.
  • Il est recommandé de 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.
  • 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.

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

Ajouter un commentaire

Tous les champs sont obligatoires.

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. »

Haut de page