Ver contenido
Redimensionar Texto: Asegurando que el Contenido Permanezca Usable al 200% de Zoom
Introducción
Muchos usuarios con baja visión necesitan agrandar el texto para leer cómodamente. WCAG 1.4.4 (Redimensionar Texto) requiere que el texto pueda redimensionarse hasta un 200% sin perder contenido o funcionalidad. Esto significa que tu sitio web debe permanecer usable cuando los usuarios hacen zoom usando controles del navegador o tecnología asistiva.
Cuando los sitios web usan tamaños fijos en píxeles o no consideran el escalado del texto, los usuarios pueden encontrar contenido cortado, texto superpuesto o diseños rotos que hacen el sitio inutilizable con tamaños de texto más grandes.
Qué Requiere WCAG
1.4.4 Redimensionar Texto (Nivel AA)
El texto puede redimensionarse sin tecnología asistiva hasta un 200 por ciento sin pérdida de contenido o funcionalidad.
Excepciones:
- Subtítulos (para video)
- Imágenes de texto
Esto significa:
- Los usuarios deben poder hacer zoom hasta 200% usando controles del navegador
- Todo el texto debe permanecer legible a este nivel de zoom
- Ningún contenido debe ser recortado, cortado u oculto
- Toda la funcionalidad debe permanecer operable
- Los usuarios no deberían necesitar desplazarse horizontalmente en viewports estándar
Quién Se Beneficia
| Tipo de Usuario | Beneficio |
|---|---|
| Usuarios con baja visión | Pueden agrandar el texto a un tamaño cómodo de lectura |
| Usuarios mayores | Pueden necesitar texto más grande para legibilidad |
| Usuarios con discapacidades cognitivas | El texto más grande puede mejorar la comprensión |
| Usuarios móviles | Pueden hacer zoom en pantallas pequeñas |
| Todos los usuarios | Flexibilidad para ajustar el tamaño del texto según preferencia |
Problemas Comunes
1. Tamaños de Fuente en Píxeles Fijos
/* MAL: Los píxeles fijos no escalan con preferencias del usuario */
body {
font-size: 14px;
}
h1 {
font-size: 24px;
}
/* BIEN: Las unidades relativas escalan con configuración del usuario */
body {
font-size: 1rem; /* 16px por defecto, escala con preferencia del usuario */
}
h1 {
font-size: 1.5rem; /* 24px por defecto, escala proporcionalmente */
}
2. Contenedores de Altura Fija
/* MAL: La altura fija corta el texto agrandado */
.card-title {
height: 48px;
overflow: hidden;
}
/* BIEN: La altura flexible acomoda texto más grande */
.card-title {
min-height: 48px;
overflow: visible;
}
3. Texto en Contenedores de Ancho Fijo
/* MAL: El ancho fijo causa desbordamiento con texto más grande */
.sidebar {
width: 200px;
}
/* BIEN: Ancho flexible o diseño responsivo */
.sidebar {
width: 100%;
max-width: 200px;
}
@media (min-width: 768px) {
.sidebar {
width: 25%;
}
}
4. Unidades de Viewport para Tamaño de Fuente
/* MAL: Las unidades vw no responden al zoom solo de texto */
h1 {
font-size: 5vw;
}
/* MEJOR: Clamp con rem como respaldo */
h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
}
Probando Redimensionar Texto
Prueba de Zoom del Navegador
- Abre tu sitio web en un navegador
- Usa Ctrl/Cmd + para hacer zoom al 200%
- Verifica que todo el texto sea legible
- Comprueba que ningún contenido esté cortado u oculto
- Asegura que todos los elementos interactivos sigan siendo usables
- Prueba el desplazamiento horizontal (debe ser mínimo en contenido típico)
Prueba de Zoom Solo de Texto
Algunos navegadores ofrecen zoom solo de texto:
- Firefox: Ver → Zoom → Zoom Solo Texto
- Esto prueba si tu diseño maneja específicamente texto más grande
Qué Verificar
- [ ] Todo el texto es legible al 200% de zoom
- [ ] Ningún texto está cortado o truncado
- [ ] Los elementos interactivos siguen siendo clicables/tocables
- [ ] Los formularios permanecen funcionales
- [ ] La navegación sigue siendo usable
- [ ] No hay desplazamiento horizontal excesivo
- [ ] Las imágenes no se superponen al texto
Buenas Prácticas
Usar Unidades Relativas
/* Tamaños de fuente con rem */
body { font-size: 1rem; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
p { font-size: 1rem; }
small { font-size: 0.875rem; }
/* Espaciado con em (relativo al tamaño de fuente) */
.card {
padding: 1em;
margin-bottom: 1.5em;
}
/* Altura de línea (sin unidades para mejor escalado) */
body {
line-height: 1.5;
}
Contenedores Flexibles
/* Usar min-height en lugar de altura fija */
.content-box {
min-height: 200px;
/* No: height: 200px; */
}
/* Permitir que el texto se ajuste */
.button {
white-space: normal;
/* No: white-space: nowrap; */
}
Diseño Responsivo
/* Breakpoints para diferentes tamaños de pantalla */
.container {
padding: 1rem;
}
@media (min-width: 768px) {
.container {
padding: 2rem;
}
}
/* Tipografía fluida */
h1 {
font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}
Impacto del Escalado de Texto Deficiente
Cuando el redimensionamiento de texto no es soportado:
| Problema | Impacto |
|---|---|
| Texto cortado | Los usuarios no pueden leer información importante |
| Elementos superpuestos | El contenido se vuelve ilegible |
| Elementos interactivos ocultos | Los usuarios no pueden completar tareas |
| Desplazamiento horizontal | La navegación se vuelve frustrante |
| Diseños rotos | La apariencia profesional se daña |
Herramientas para Pruebas
- DevTools del navegador: Simular niveles de zoom
- Extensión de zoom del navegador: Probar varios porcentajes de zoom
- WAVE: Identifica problemas potenciales de zoom
- axe DevTools: Reporta fallos de redimensionamiento de texto
- Pruebas manuales: Esencial para verificación completa
Resumen de Mejores Prácticas
| Hacer | No Hacer |
|---|---|
| Usar rem/em para tamaños de fuente | Usar tamaños de fuente en píxeles fijos |
| Usar min-height para contenedores | Usar alturas fijas que cortan contenido |
| Permitir que el texto se ajuste naturalmente | Forzar nowrap en texto |
| Probar regularmente al 200% de zoom | Asumir que diseños pixel-perfect escalan |
| Usar tipografía fluida | Confiar solo en unidades de viewport |
| Diseñar para flexibilidad | Diseñar solo para tamaño de texto predeterminado |
Artículos Relacionados
- Guía de Implementación de Redimensionar Texto - Patrones detallados
- Guía de Contraste de Color - Accesibilidad visual
- Hub de Cumplimiento WCAG - Todos los evaluadores de accesibilidad