Respecter l'ajustement du texte du système d'exploitation

Présentation

Les utilisateurs souffrant de déficiences visuelles configurent souvent la mise à l'échelle du texte au niveau du système d'exploitation (par exemple, Dynamic Type sur iOS ou la mise à l'échelle de la taille de police sur Android/ChromeOS). Par défaut, les navigateurs mobiles ignorent ces paramètres d'accessibilité au niveau de l'OS pour éviter que les anciens sites Web à pixels fixes ne soient visuellement endommagés.

Au lieu de conserver une page statique ou de vous appuyer sur des calculs de mise en page JavaScript personnalisés et fragiles, optez pour la mise à l'échelle du texte native du système d'exploitation à l'aide de la balise <meta name="text-scale">. Lorsqu'elle est active, le navigateur adapte de manière dynamique la taille de la police racine (1rem) en fonction des préférences de l'OS de l'utilisateur, ce qui permet à toutes les tailles de police, mises en page et espacements relatifs (rem/em) de s'adapter automatiquement et de manière fluide.

Implémentation

1. Activer la mise à l'échelle du texte de l'OS

Placez l'élément <meta name="text-scale"> dans l'élément <head> de votre document. Cela indique aux navigateurs compatibles que votre mise en page est moderne, adaptative et qu'elle peut être mise à l'échelle de manière sécurisée :

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  
  <!-- Opt this page into OS-level dynamic type and accessibility text scaling -->
  <meta name="text-scale" content="scale" />
  
  <title>Adaptive Accessibility Layout</title>
</head>

2. Utiliser une typographie et un espacement relatifs

Définissez les tailles de police à l'aide d'unités relatives (rem ou em) plutôt que de pixels fixes (px). Utilisez des valeurs sans unité pour les hauteurs de ligne afin qu'elles s'adaptent proportionnellement à la taille de police calculée de chaque élément.

Utilisez des unités relatives pour les marges et la marge intérieure lorsque l'espacement est lié à la taille du texte ou doit s'adapter lorsque le texte est mis à l'échelle. L'espacement indépendant du texte peut utiliser des unités fixes, le cas échéant, à condition que la mise à l'échelle n'entraîne pas de coupure du texte, de chevauchement, de perte de contenu ou de mise en page inutilisable :

body {
  font-family: system-ui, sans-serif;
  /* Inherits the root font-size, which scales automatically with the OS setting */
  line-height: 1.5;      /* Unitless so it scales proportionally with computed font-size */
  padding: 1.5rem;       /* Scales proportionally to prevent dense crowding at larger scales */
}

h1 {
  font-size: 2.25rem;    /* Scales proportionally to the root base */
  margin-bottom: 1rem;
}

Ne définissez la taille de base du texte sur body que lorsque la conception nécessite une taille différente de celle héritée par défaut du navigateur. Sinon, laissez-la hériter. Définissez les tailles d'éléments spécifiques, tels que les titres, avec des unités relatives telles que rem ou em. Utilisez rem pour une taille relative à la taille de police racine, et em lorsque la taille doit dépendre de la taille de police de l'élément parent. Ne définissez pas de taille de police personnalisée sur :root ou html.

Typographie fluide

La typographie fluide PEUT utiliser des unités relatives à la fenêtre d'affichage, telles que vw, à condition que les tailles de police incluent également un composant relatif à la police, tel que rem ou em. Pour en savoir plus sur les techniques de scaling fluide, y compris les unités de requête de conteneur et clamp(), consultez Scaling fluide.

Évitez de dimensionner le texte exclusivement avec des unités de fenêtre d'affichage :

/* ❌ DO NOT DO THIS: The font size does not respond fully to user text scaling */
.heading {
  font-size: 5vw;
}

Combinez plutôt une valeur relative à la police avec une mise à l'échelle relative à la fenêtre d'affichage, et utilisez des limites minimales et maximales relatives :

.heading {
  font-size: clamp(2rem, 1.25rem + 2vw, 4rem);
}

Vérifiez que la taille du texte peut être augmentée d'au moins 200 % par rapport à sa taille par défaut sans perte de contenu ni de fonctionnalité. Pour la typographie fluide, une règle de base utile consiste à ne pas dépasser une taille de police maximale de 2,5 fois la taille minimale. Testez également le reflux à une largeur de fenêtre d'affichage de 320 pixels CSS (équivalant à un zoom de 400 % à partir d'une fenêtre d'affichage de 1 280 pixels CSS de large). Le contenu DOIT rester disponible sans défilement bidimensionnel, sauf si cela est indispensable.

3. Utiliser des points d'arrêt responsifs évolutifs

Les points d'arrêt responsifs NE DOIVENT PAS supposer que le texte conservera sa taille par défaut. Lorsqu'un point d'arrêt est destiné à répondre à l'espace disponible pour le texte, privilégiez les mises en page basées sur le contenu, les requêtes de conteneur ou les requêtes média basées sur em plutôt que les seuils de pixels fixes.

Testez les mises en page responsives avec la mise à l'échelle du texte du système d'exploitation et le zoom du navigateur activés. Le texte DOIT rester lisible et le contenu DOIT rester visible sans chevauchement, coupure ni défilement horizontal.

4. Assurer le retour à la ligne du contenu et des hauteurs flexibles

Lorsque le texte est agrandi, les éléments nécessitent plus d'espace vertical et horizontal pour éviter d'être tronqués ou de se chevaucher. Pour que vos composants restent robustes, concevez vos mises en page de manière à ce qu'elles s'étendent de manière dynamique autour du contenu plutôt que d'imposer des coordonnées rigides :

• Autoriser l'agrandissement des conteneurs de texte : les composants et les conteneurs contenant du texte DOIVENT pouvoir s'agrandir pour s'adapter au texte redimensionné. Évitez les valeurs height ou block-size fixes et les valeurs max-height ou max-block-size restrictives qui peuvent entraîner un rognage ou un dépassement. Privilégiez le dimensionnement basé sur le contenu. N'utilisez min-height ou min-block-size que lorsqu'une taille minimale est nécessaire.
• Autoriser le retour automatique à la ligne naturel : ne limitez pas le retour automatique à la ligne du texte sur l'axe intégré avec white-space: nowrap sur les blocs contenant des phrases. Laissez le texte s'ajuster naturellement aux nouvelles lignes.
• Utilisez un habillage flexible Flexbox et Grid (exemple facultatif) : pour les galeries de fiches à plusieurs colonnes, utilisez des colonnes réajustables comme repeat(auto-fit, minmax(min(100%, 16rem), 1fr)) afin que les éléments s'empilent verticalement si leurs seuils de largeur relative sont dépassés :

/* Card container using min-height to ensure expansion and auto-fit to reflow if needed */
.card {
  padding: 1.5rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  /* Use min-height so the box expands vertically when the font is enlarged */
  min-height: 10rem;
}

5. NE PAS remplacer la taille de police racine

Lorsque vous activez la fonctionnalité via l'élément <meta name="text-scale" content="scale">, NE DÉFINISSEZ PAS explicitement la racine font-size dans votre feuille de style. Cela inclut les déclarations sur :root ou html, et s'applique aux unités absolues, aux unités relatives et aux valeurs calculées.

Par exemple, ne remplacez pas la taille de police racine par une valeur fixe :

/* ❌ DO NOT DO THIS: This can prevent the browser from applying text scaling */
html {
  font-size: 16px;
}

Ne combinez pas l'activation de <meta name="text-scale" content="scale"> avec env(preferred-text-scale) pour appliquer manuellement la mise à l'échelle du texte du système d'exploitation. Le navigateur applique l'échelle via l'activation de la balise Meta. L'utilisation des deux peut donc entraîner une double mise à l'échelle :

/* ❌ DO NOT DO THIS: The meta opt-in already applies the operating system text scale */
:root {
  font-size: calc(1rem * env(preferred-text-scale));
}

Laissez le navigateur définir la taille de la police racine. Le navigateur gère automatiquement l'échelle du texte du système d'exploitation et l'applique au contenu dimensionné par rapport à la taille de la police racine.

Stratégies de remplacement

Sur les navigateurs qui ne sont pas compatibles avec <meta name="text-scale" content="scale">, la mise en page se dégrade de manière fluide. La page s'affichera avec la taille de police de base par défaut du navigateur (généralement 16 px), et l'utilisateur pourra toujours utiliser les options standards de zoom manuel ou de zoom par pincement.