11.1. Utiliser uniquement des tailles relatives (em, %, small, etc.) pour les polices de caractères

Pour définir les tailles des polices de caractères, utiliser uniquement des unités relatives pour la propriété CSS font-size comme em, %, rem ou les mots-clés (x-small, small, etc.).

Ne pas utiliser d’unités absolues comme pt, cm, etc.

Attention

L’utilisation du pixel (px) comme unité de taille de police est interdite dans les référentiels AccessiWeb et RGAA.

Pour garantir la conformité avec ceux-ci, il faudra utiliser une autre unité de taille relative pour la propriété font-size.

Remarque

Les CSS d’impression (type de média print) ne sont pas concernés par cette recommandation.

Aller plus loin

6 commentaires

  • Par Sébastien Delorme, le 17 mai 2016 à 16h10.

    Cette recommandation a été déplacée de la thématique Usage des CSS vers la thématique Zoom et taille de texte, changeant ainsi sa numérotation 10.2. en 11.1.

    Répondre

  • Par Corinne, le 23 janvier 2019 à 10h17.

    Quid d’une utilisation d’unité absolue en fallback ?
    Par exemple une définition en `rem` doublée de `px` comme solution de repli pour les vieux navigateurs.

    Est-ce que cela revient à invalider le critère (dans le cas d’un audit) ?

    Répondre

    • Par Sébastien Delorme, le 28 janvier 2019 à 12h32.

      Bonjour Corinne,

      C’est légèrement moins problématique en effet pour les utilisateurs de navigateurs récents qui auront systématiquement des unités relatives.

      Malheureusement, sur IE, versions récentes comme anciennes, les tailles de police définies en pixel ne peuvent pas être modifiées. Ainsi, pour les utilisateurs d’anciennes versions le problème restera.

      Cela dépendra probablement de l’auditeur (et aussi du fait qu’il identifie ou non ce fallback), je viens de demander en interne, et de notre côté, tout le monde l’invaliderait sur un audit RGAA.

      À ce jour (et sauf erreur de ma part) le RGAA n’impose pas de version minimale de navigateur (sauf pour les tests menés avec des technologies d’assistance, ce qui n’est pas le cas sur ce critère).

      Répondre

  • Par Georges Malauk, le 7 février 2019 à 10h56.

    Bonjour,

    Lors de l’utilisation de l’unité relative à la racine (rem), est-il nécessaire/recommandé de définir le corps du texte de la racine en px (donc en absolu) ou faut-il lui aussi le définir en relatif (ou pas le définir du tout)?

    Dans ce cas où le corps du texte de l’élément racine serait définit avec une unité relative (ou pas défini du tout), comment est déterminé cette valeur et est-elle identique sur tout les navigateurs?

    Merci d’avance pour votre réponse.

    Répondre

    • Par Laurent Bracquart, le 26 février 2019 à 17h52.

      Bonjour Georges,

      Lorsque les rem sont utilisés pour gérer la taille des textes, il n’est pas nécessaire et même interdit par le RGAA de fixer la taille de texte au niveau de l’élément racine (<html>) en px.

      Voir à ce propos la remarque « Note : l’utilisation du pixel (px) est proscrite. » dans le glossaire du RGAA : http://references.modernisation.gouv.fr/rgaa-accessibilite/glossaire.html#taille-des-caractres.

      Dans le cas où la taille du texte de l’élément racine est définie avec une unité relative, ou pas définie du tout, la référence pour la taille du texte par défaut est celle définie dans les options du navigateur. Elle n’est pas nécessairement identique sur tous les navigateurs.

      Bien à vous,

      Répondre

      • Par Georges Malauk, le 4 mars 2019 à 12h17.

        Bonjour Laurent,

        Merci pour votre réponse.

        J’ai bien compris le problème avec les unités absolues (dont px).

        Cependant, je m’interroge sur le fait de définir l’ensemble des corps de texte de façon relative (em ou rem) lors que la référence (taille par défaut) n’est pas normée et donc potentiellement différente d’un agent utilisateur à un autre.

        S’agit-il là d’un risque « acceptable »?

        Merci d’avance pour vos précisions.

        Georges

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page