La accesibilidad web no es una “feature” opcional, es un derecho de los usuarios. Uno de los aspectos más críticos y a menudo olvidados es la capacidad del usuario para ajustar el tamaño del texto según sus necesidades visuales.
El problema de las unidades absolutas (PX)
Durante mucho tiempo, el estándar fue diseñar en píxeles (px). Sin embargo, definir font-size: 16px en tu CSS es una barrera de accesibilidad. Si un usuario con visión reducida configura su navegador para tener un tamaño de fuente base de 24px, tu regla de 16px sobrescribirá su preferencia, obligándole a esforzarse para leer o usar el zoom de la página.
La solución: Unidades Relativas (REM y EM)
Para respetar la configuración del usuario, debemos usar unidades relativas:
- REM (Root EM): Relativo al tamaño de fuente del elemento raíz (
<html>). Si el navegador está en 16px,1rem = 16px. Si el usuario lo sube a 24px,1rem = 24px. - EM: Relativo al tamaño de fuente de su elemento padre.
Personalmente prefiero REM frente a EM para tipografía, ya que evita el efecto cascada donde los tamaños se multiplican inesperadamente si anidas elementos.
El dilema del espaciado: ¿REM o PX para márgenes?
Llevo tiempo usando la unidad de medida REM para todo: tipografías, márgenes y paddings. Con el paso del tiempo me he dado cuenta de que quizás no sea siempre la mejor estrategia para los espaciados.
Si definimos padding: 2rem en un contenedor, y el usuario duplica su tamaño de fuente por necesidad visual, ese padding también se duplica. Esto puede provocar que el espacio útil para el contenido se reduzca drásticamente, especialmente en móviles, rompiendo la maquetación o forzando demasiado scroll.
Ejemplo práctico
En el siguiente ejemplo puedes ver tres enfoques:
- Todo en REM: El espaciado crece con la fuente.
- Espaciado en PX: El texto crece, pero el contenedor mantiene su espacio (más contenido visible).
- Híbrido (min/clamp): Una combinación para controlar el crecimiento excesivo.
Ver el Pen Accesibilidad Web: Unidades Relativas vs Absolutas en CSS por Iván Albizu (@ivan_albizu) en CodePen.
Si usas Chrome, puedes probarlo cambiando el tamaño de fuente en chrome://settings/appearance.
Conclusión: Un equilibrio necesario
No hay una bala de plata, pero mi recomendación actual para maximizar la accesibilidad sin destruir el diseño es:
- Tipografía: Siempre en REM. Es innegociable para la accesibilidad.
- Media Queries: Usar EM suele ser más robusto para que el layout cambie si el usuario aumenta el texto, no solo si cambia el ancho de ventana.
- Espaciados (Padding/Margin): Evalúa si quieres que crezcan. A veces
pxes aceptable para mantener la estructura, o funciones modernas comoclamp()para tener lo mejor de los dos mundos.