TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Si defines los tamaños de fuente (font-size) y los anchos de contenedor en píxeles fijos (px), el diseño no podrá absorber un incremento de escala del sistema operativo. Esto infringe la WCAG 1.4.4, causando superposición de textos o pérdida total del contenido visual en un zoom del 200% al 500%.
La tiranía de la unidad absoluta
Las agencias suelen entregar diseños precisos calculados en píxeles. Cuando el front-end traduce literalmente estos valores, la página se vuelve estática. Una persona usuaria con baja visión que configura su navegador por defecto al 150% de aumento se encontrará con cajas donde las palabras se desbordan o se montan unas sobre otras.
El patrón erróneo: Código Accesible Deficiente
Anclaje de la arquitectura visual a una escala inmutable.
/* MAL: Unidades absolutas inalterables */
.tarjeta-tramite {
width: 300px;
height: 400px;
}
.tarjeta-tramite h2 {
font-size: 24px;
}La Solución Accesible: Código Recomendado
Migrar la hoja de estilos al ecosistema de unidades relativas (rem, em) y adoptar patrones de CSS Grid y Flexbox que permitan que el contenido mande sobre el contenedor.
/* BIEN: Unidades vinculadas al tamaño base de la persona usuaria (root em) */
.tarjeta-tramite {
width: 100%;
max-width: 20rem; /* Aproximadamente 320px en base estándar */
min-height: 25rem;
}
.tarjeta-tramite h2 {
font-size: 1.5rem;
}Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Incrementar el zoom del navegador al 200% (Ctrl++) y verificar que todo el contenido siga siendo legible sin scroll horizontal. En dispositivos móviles, realizar el gesto de pellizco (pinch-to-zoom) y confirmar que el sitio permita la ampliación sin bloquearla.
Inspección del Árbol de Accesibilidad
En Chrome DevTools, seleccionar el elemento afectado en el panel Elements, luego abrir la pestaña Accessibility. Verificar que las propiedades Role, Name y State reflejen correctamente la intención del componente según el criterio WCAG 1.4.4.
Herramientas Automatizadas
Ejecutar Axe DevTools o WAVE sobre la vista afectada. Buscar violaciones relacionadas con el criterio WCAG 1.4.4. Complementar con una auditoría manual para los aspectos que las herramientas automatizadas no pueden verificar (interacción dinámica, calidad del contenido).
