Zoom, reflow y accesibilidad móvil

Cómo diseñar layouts fluidos que funcionen con zoom alto, texto ampliado y pantallas estrechas.

¿Cuánto sabes de Accesibilidad Web?

📘 Teoría

Claves teóricas

Principios para que el layout aguante condiciones de lectura exigentes.

Unidades relativas

Prioriza `rem`, `em`, `clamp` frente a tamaños rígidos en `px`.

Reflow sin pérdida

El contenido debe reordenarse sin superponerse ni desaparecer.

Evita bloqueos horizontales

Un contenedor con `overflow-x` permanente suele ser síntoma de diseño rígido.

Longitudes de texto

Controla `max-width` y `overflow-wrap` para no romper lectura.

Controles táctiles

Asegura áreas de toque cómodas incluso con zoom y tipografía grande.

Error típico

Desactivar zoom en viewport para esconder problemas de maquetación.

Aplicación en proyectos reales

Checklist para detectar regresiones de reflow en diseño responsivo.

Prueba páginas clave al 200% y 400% de zoom con distintos anchos de viewport.

Verifica que botones, filtros y tablas sigan accesibles sin solapamientos.

Incluye escenarios con texto largo, traducciones y datos imprevisibles.

Evita fijar alturas rígidas en componentes de contenido variable.
Usa grid/flex con mínimos razonables para adaptarse a distintos contextos.
Valida navegación de teclado tras cambios de layout en breakpoints.
Añade pruebas visuales automatizadas para tamaños extremos.

Patrón de código

Grid flexible y manejo de desbordes para contenido largo.

Layout fluido preparado para zoom

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

.card {
  min-width: 0;
}

body {
  overflow-wrap: anywhere;
}

1 Claves teóricas 2 Aplicación en proyectos reales 3 Patrón de código

🧪 Aprende probando

Ejemplo Demo guiada Observa cómo refluye una rejilla al reducir ancho y aumentar zoom.

⌄

🏁 Retos

Reto Reto práctico Corrige un layout rígido para que funcione con zoom alto.

⌄

🧰 Recursos

Enlaces útiles

W3C WAI Fundamentals MDN Accessibility WCAG 2.1 Quick Reference ARIA Authoring Practices Guide

Test

Comprueba tus conocimientos con un test sobre Accesibilidad Web.

Test de Accesibilidad Web

Recursos del curso 25

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards

‹

Lección 17

Validación y errores accesibles

Lección 19

Testing manual con NVDA y VoiceOver

›