Zoom

¿Qué es el zoom?

El zoom es la capacidad de ampliar el contenido de una página web para facilitar la lectura y la interacción. Es esencial para usuarios con baja visión y es un requisito de WCAG 2.1.

Relación con WCAG 2.1

El Criterio 1.4.4 (Redimensionamiento del Texto) de WCAG 2.1 Nivel AA requiere que el texto pueda ampliarse hasta 200% sin pérdida de contenido o funcionalidad. Esto significa que:

• El texto debe seguir siendo legible
• No debe aparecer scroll horizontal
• La funcionalidad debe mantenerse
• El contenido no debe quedar cortado

Tipos de zoom

1. Zoom del navegador: Ctrl/Cmd + o Ctrl/Cmd -
2. Zoom de página completa: Amplía todo el contenido
3. Zoom de texto solamente: Solo amplía el texto (menos común)

Ejemplos prácticos

✅ Correcto: Diseño que soporta zoom

/* Usar unidades relativas */
.contenedor {
  width: 100%;
  max-width: 1200px;
  padding: 1rem; /* Relativo, se escala con zoom */
}

.texto {
  font-size: 1rem; /* Se escala con zoom del navegador */
  line-height: 1.5;
}

✅ Correcto: Media queries para zoom

/* Ajustar layout cuando el zoom aumenta el ancho efectivo */
@media (max-width: 600px) {
  .sidebar {
    display: none;
  }
  .contenido {
    width: 100%;
  }
}

❌ Incorrecto: Anchos fijos

/* Anchos fijos no se adaptan al zoom */
.contenedor {
  width: 1200px; /* Fijo, causa scroll horizontal con zoom */
}

.texto {
  font-size: 14px; /* Tamaño fijo, no se escala bien */
}

❌ Incorrecto: Overflow oculto

/* Oculta contenido cuando se amplía */
.contenedor {
  overflow: hidden; /* Corta contenido con zoom */
  width: 100%;
}

Errores comunes

1. Anchos fijos en píxeles: No se adaptan al zoom
2. Overflow hidden: Oculta contenido ampliado
3. Texto con tamaño fijo: No se escala con zoom del navegador
4. Layouts que se rompen: Columnas que no se ajustan
5. No probar con zoom: Verificar en diferentes niveles de zoom

Buenas prácticas

• Usar unidades relativas: rem, em, % en lugar de px fijos
• Max-width en contenedores: Evitar que el contenido se extienda demasiado
• Diseño flexible: Usar flexbox o grid que se adapte
• Probar con zoom 200%: Verificar que todo funciona correctamente
• Evitar overflow hidden: Permitir que el contenido sea visible

Términos relacionados

• [[Tamaño de fuente]]
• [[Diseño responsive]]
• [[WCAG 2.1]]
• [[Criterio 1.4.4]]
• [[Baja visión]]