Problemas de accesibilidad y soluciones a menudo pasados por alto en espacios especificados con clamp()

Últimamente es muy común ver implementaciones que hacen que el espaciado sea variable entre valores mínimo y máximo usando clamp().

Es muy útil como respuesta responsiva, pero si consideramos la ampliación de accesibilidad (zoom), hay algunos escollos que tener en cuenta.

Ejemplo común de especificación de clamp()

Por ejemplo, al ajustar espaciado con clamp(), generalmente se escribe de la siguiente manera.

: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)
  );
}

Omitiendo los detalles de la explicación,

• En dispositivos móviles, el tamaño de --spacing-lg-min
• En PC, el tamaño de --spacing-lg-max
• En el ínterin, se expande y se contrae de manera fluida y flexible

y es un patrón muy práctico y fácil de usar.

¿Cuáles son las trampas en materia de accesibilidad?

El problema surge al intentar cumplir con el criterio de éxito WCAG 2.0 1.4.4 "Cambio de tamaño de texto".

Este criterio fue originalmente establecido antes de que los smartphones se generalizaran, con la intención de "permitir la visualización incluso cuando se amplía al 200% en un PC", pero la misma condición se aplica también a los navegadores de smartphones.

De hecho, cuando se amplía al 200% en un smartphone, tienden a ocurrir estos fenómenos.

1. Cuando se realiza la ampliación (zoom) del texto, el espaciado basado en unidades rem también se amplía junto con él.
2. Esto hace que el espaciado que rodea el contenido original sea excesivamente amplio.
3. Como resultado, el área de visualización del contenido se reduce drásticamente, causando desajustes en el diseño y haciéndolo difícil de leer.

* Sin embargo, en la práctica, observamos que incluso los sitios gubernamentales en el extranjero donde el cumplimiento de WCAG es obligatorio tienen poco implementado. Es probable que, considerando la relación costo-beneficio y que la necesidad real de ampliar al 200% en un smartphone es prácticamente inexistente, a nivel operativo se considere "no es un problema importante si no se implementa".

¿Cómo resolver este problema?

Es importante usar unidades basadas en viewport como vw en lugar de rem, que se ven afectadas por la ampliación de texto, y asegurar que el espaciado no sea demasiado grande incluso cuando se amplía.

Sin embargo, si especificas solo vw, no podrás aprovechar la ventaja de clamp() de poder controlar los valores mínimos y máximos.

Es aquí donde entra la función min().

min() adopta el valor más pequeño entre los valores proporcionados. Utilizando esta característica, cambiamos el valor aplicado entre el estado normal y el ampliado.

La forma de escribirlo es así.

--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)
  )
);

Cuando se muestra en 375 CSS px, el primer valor de min es 6.4vw, que es 24px (el valor de --spacing-lg-min) convertido a vw.

El valor mínimo de clamp() es 1.5rem = 24px, pero con una ampliación del 200% se convierte en 48px, por lo que 6.4vw en el lado izquierdo es más pequeño y se aplicará en su lugar.

En otras palabras,

• En estado normal (visualización al 100%):
  • El valor de clamp() es menor que el valor basado en vw.
  • Como min() selecciona el valor más pequeño, clamp() entra en efecto y se muestra de forma variable según el ancho de pantalla.
• Al ampliar (pantalla al 200%):
  • El clamp() dentro de rem se agranda por la ampliación, y el valor basado en vw se vuelve más pequeño.
  • Se aplica el valor basado en vw, fijando el espaciado como proporción del ancho de pantalla, lo que previene una ampliación excesiva.

¡De esta forma, se logra tanto la capacidad de respuesta como la consideración de la accesibilidad!

* Por cierto, en la visualización de PC, el equilibrio del diseño se mantiene mejor cuando el espaciado se amplía junto con el contenido; por eso --clamp-viewport-min se aplica solo en smartphones como referencia.

Comparación del comportamiento real

La parte superior muestra solo clamp, la inferior muestra min+clamp.

La diferencia es clara cuando amplías al 200% en un smartphone.

Nota: En iOS Safari, puedes ampliar desde el icono en la izquierda de la barra de direcciones; en Android Chrome, desde el icono en la esquina superior derecha.

Conclusión

• clamp() es muy útil para ajustes de espaciado responsive
• Sin embargo, cuando se amplía la visualización, también se amplían los espacios, lo que puede causar un colapso del diseño
• Al combinarlo con min(), es posible lograr un equilibrio donde normalmente es variable y en la ampliación es controlado

Si deseas cumplir con WCAG, incluir este tipo de implementaciones te dará tranquilidad. "Cuidar la ampliación al 200% en móviles" es una práctica poco común, pero mantiene la legibilidad habitual y reduce los riesgos de accesibilidad.

Por cierto, si necesitas ajustes más precisos más allá de los espacios, también existe la opción de especificar media queries en puntos de quiebre estrechos.

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

Por ejemplo, cuando se amplía una pantalla de 375px de ancho al 200%, el navegador calcula el ancho del viewport como "la mitad del tamaño (aproximadamente 188px)". De esta manera, es posible hacer coincidir estas condiciones tan estrechas.

Nota: El valor de 239px es solo un ejemplo; es recomendable ajustarlo dejando margen para posibles aumentos de tamaño de pantalla en el futuro, sin afectar la visualización normal.

¡Al combinar "clamp() + min()" con "media queries en puntos de quiebre estrechos", es posible lograr una implementación de accesibilidad más flexible y confiable!