¿Cuál es el problema?
La metaetiqueta viewport controla como los navegadores móviles muestran una página web. Algunos desarrolladores y temas añaden user-scalable=no o maximum-scale=1 para evitar que los usuarios amplíen la página —a menudo para evitar el «zoom accidental» en campos de formulario o para mantener el diseño «perfecto».
El problema es que bloquear el zoom impide que las personas con baja visión puedan ampliar el contenido para leerlo. Para muchas personas, poder hacer zoom al móvil no es una preferencia: es una necesidad.
El criterio WCAG 1.4.4 exige que el texto se pueda redimensionar hasta el 200% sin pérdida de contenido o funcionalidad, excepto para subtítulos e imágenes de texto.
Cómo se bloquea el zoom y como no se tiene que hacer
— MAL: bloquea completamente el zoom —
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
— MAL: limita el zoom al 100% —
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
— BIEN: permite el zoom libre —
<meta name="viewport" content="width=device-width, initial-scale=1">
El argumento del ‘zoom accidental’
La razón más habitual para bloquear el zoom es evitar que los dispositivos iOS amplíen automáticamente los campos de formulario cuando reciben el foco. Pero la solución correcta no es bloquear el zoom: es asegurarse que los campos de formulario tengan una medida de fuente de al menos 16px, que evita el zoom automático de iOS sin comprometer la accesibilidad.
input, select, textarea {
font-size: 16px; /* Evita el zoom automàtic a iOS */
}
Navegadores modernos ignoran user-scalable=no
A partir de ciertas versiones, Safari en iOS y Chrome en Android ignoran user-scalable=no por razones de accesibilidad. Pero no todos los navegadores lo hacen, y no se puede depender de este comportamiento. Hay que corregir el código fuente.
Como detectar y corregir el error
La herramienta de autoevaluació de webaccessible.cat detecta automáticamente si la metaetiqueta viewport de tu web bloquea el zoom. Si tienes este error, la corrección es sencilla: elimina user-scalable=no y maximum-scale=1 de la metaetiqueta.
En WordPress, la metaetiqueta viewport suele estar al header.php del tema o generada por un plugin. Si usas un tema hijo (child theme), puedes sobrescribirla sin modificar el tema pare.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.