Problèmes d'accessibilité souvent négligés avec clamp() pour les espaces et solutions

L'implémentation utilisant clamp() pour ajuster les espaces avec des valeurs minimales et maximales variables est devenue très courante ces derniers temps.

Bien que très pratique pour la conception responsive, cette approche présente un piège lorsqu'on considère l'affichage agrandi (zoom) pour l'accessibilité.

Exemple courant de spécification clamp()

Par exemple, lors de l'ajustement des espaces avec clamp(), on écrit généralement comme suit.

:root {
  --clamp-base: 16;
  --clamp-viewport-min: 375;
  --clamp-viewport-max: 1440;

  --spacing-lg-min: 24;
  --spacing-lg-max: 48;

  --spacing-lg-slope: calc(
    (var(--spacing-lg-max) - var(--spacing-lg-min)) / (var(--clamp-viewport-max) - var(--clamp-viewport-min))
  );
  --spacing-lg-intersection: calc(
    (var(--spacing-lg-max) - var(--clamp-viewport-max) * var(--spacing-lg-slope)) / var(--clamp-base)
  );
  --spacing-lg: clamp(
    calc(var(--spacing-lg-min) / var(--clamp-base) * 1rem),
    calc(var(--spacing-lg-intersection) * 1rem + 100 * var(--spacing-lg-slope) * 1vw),
    calc(var(--spacing-lg-max) / var(--clamp-base) * 1rem)
  );
}

Sans entrer dans les détails,

Sur smartphone, la taille de --spacing-lg-min
Sur PC, la taille de --spacing-lg-max
Entre-temps, elle s'étire et se rétracte de manière fluide et variable

, ce qui en fait un modèle très pratique à utiliser.

Les pièges de l'accessibilité : quels sont-ils ?

Le problème survient quand on essaie de se conformer à la norme WCAG 2.0 1.4.4 « Redimensionnement du texte ».

Cette norme a été élaborée initialement avant la généralisation des smartphones, avec l'intention que « le contenu reste lisible même à 200 % de zoom sur PC ». Or, ce même critère s'applique également aux navigateurs mobiles.

Quand on agrandit à 200 % sur un smartphone, voici les phénomènes qui se produisent généralement.

L'agrandissement du texte (zoom) provoque rem à être pris en référence, ce qui fait que les marges s'agrandissent aussi.
Par conséquent, les marges autour du contenu deviennent excessivement larges.
En résultat, la zone d'affichage du contenu devient extrêmement étroite, ce qui entraîne des problèmes de mise en page et une lisibilité réduite.

* En réalité, même sur les sites gouvernementaux étrangers où la conformité WCAG est obligatoire, on observe peu de mise en œuvre de cette mesure. Il est probable que le rapport coût-bénéfice ou l'absence réelle de besoin pour un zoom à 200 % sur smartphone expliquent pourquoi, à titre pratique sur le terrain, cela soit considéré comme « non critique ».

Comment résoudre ce problème ?

Au lieu d'utiliser rem, qui est affecté par l'agrandissement du texte, il est important d'utiliser des unités basées sur la fenêtre d'affichage, comme vw, et d'éviter que les espacements ne deviennent inutilement grands lors du zoom.

Cependant, si vous spécifiez uniquement vw, vous ne pouvez pas profiter de l'avantage de clamp() qui permet de « contrôler les valeurs minimales et maximales ».

C'est là que la fonction min() entre en jeu !

min() sélectionne la « plus petite valeur » parmi les valeurs transmises. En utilisant cette caractéristique, nous pouvons basculer les valeurs appliquées selon que le texte est affiché normalement ou en mode agrandi.

Voici comment l'écrire.

--spacing-lg: min(
  calc(var(--spacing-lg-min) / var(--clamp-viewport-min) * 100vw),
  clamp(
    calc(var(--spacing-lg-min) / var(--clamp-base) * 1rem),
    calc(var(--spacing-lg-intersection) * 1rem + 100 * var(--spacing-lg-slope) * 1vw),
    calc(var(--spacing-lg-max) / var(--clamp-base) * 1rem)
  )
);

Lorsqu'il s'affiche à 375 CSS px, la première valeur de min devient 6.4vw, qui est la valeur de --spacing-lg-min, soit 24px convertis en vw.

La valeur minimale de clamp() est 1.5rem = 24px, mais lors d'un agrandissement à 200%, elle devient 48px. Par conséquent, 6.4vw sur la gauche devient plus petit et c'est cette valeur qui s'applique.

En d'autres termes,

Affichage normal (100%) :
- La valeur de clamp() devient plus petite que la valeur basée sur vw.
- Puisque min() adopte la valeur la plus petite, clamp() prend effet et l'affichage varie en fonction de la largeur de l'écran.
En cas d'agrandissement (affichage à 200%) :
- Le rem à l'intérieur de clamp() augmente avec l'agrandissement, et la valeur basée sur vw devient plus petite.
- La valeur basée sur vw s'applique, et comme les marges sont fixées selon le rapport à la largeur de l'écran, un agrandissement excessif peut être évité.

C'est ainsi que nous pouvons à la fois atteindre la « commodité réactive » et « l'accessibilité » !

Note : sur l'affichage PC, l'équilibre du design est souvent mieux préservé lorsque les marges sont agrandies avec le reste, c'est pourquoi --clamp-viewport-min est appliquée uniquement sur smartphone en tant que référence.

Comparaison du comportement réel

Le haut utilise clamp uniquement, le bas utilise min+clamp.

Lorsque vous agrandissez à 200% sur smartphone, la différence devient clairement visible.

* Sur iOS Safari, vous pouvez agrandir depuis l'icône à gauche de la barre d'adresse. Sur Android Chrome, utilisez l'icône en haut à droite.

Conclusion

clamp() est très pratique pour ajuster les marges de manière adaptative
Cependant, lors de l'agrandissement, les marges s'agrandissent aussi, ce qui peut entraîner un décalage de mise en page
En combinant avec min(), vous pouvez obtenir une approche équilibrée où les marges sont variables en conditions normales et contrôlées lors de l'agrandissement

Si vous tenez compte de la conformité WCAG, intégrer ces implémentations vous rassurera. L'implémentation « qui gère jusqu'à 200 % de zoom sur mobile » est encore rare, mais elle préserve la lisibilité quotidienne tout en réduisant les risques d'accessibilité.

Au fait, si vous souhaitez faire de petits ajustements au-delà des marges, vous pouvez aussi utiliser des media queries avec des points de rupture étroits.

@media (max-width: 239px) {
  /* 拡大時に適用したいCSS */
}

Par exemple, si vous agrandissez un écran de 375 px de large à 200 %, le navigateur calcule la largeur du viewport comme « la moitié de la taille (environ 188 px) ». Cela vous permet de correspondre à cette condition très étroite.

* La valeur 239 px n'est qu'un exemple. Vous devriez l'ajuster en laissant de la marge pour les évolutions futures des tailles d'écran, tout en veillant à ne pas affecter l'affichage normal.

En combinant « clamp() + min() » et « media queries avec points de rupture étroits », vous pouvez mettre en place une approche d'accessibilité plus flexible et sécurisée !