Construir · Móvil
Móvil de verdad
«Mobile first» se dice mucho y se comprueba poco. La prueba no es que quepa: es que se pueda usar con una mano.
Respuesta directa
Hay dos exigencias distintas y ambas importan: que los controles sean suficientemente grandes y que estén donde se puede llegar sin recolocar el teléfono.
La primera es una exigencia normativa: WCAG 2.2 añadió el criterio 2.5.8 Tamaño del objetivo (mínimo), de nivel AA, que no existía en 2.1.
Los criterios de WCAG 2.2 que afectan al móvil
| Criterio | Nombre | Nivel |
|---|---|---|
| 2.5.8 | Tamaño del objetivo (mínimo) | AA |
| 2.5.7 | Movimientos de arrastre | AA |
| 2.4.11 | Foco no oscurecido (mínimo) | AA |
Zonas seguras: lo que el sistema se reserva
Los teléfonos actuales reservan zonas de la pantalla para elementos del sistema: la barra inferior de gestos, la muesca superior, los bordes redondeados. Colocar un control ahí lo vuelve difícil o imposible de pulsar.
Nuestro criterio operativo es respetar esas zonas mediante las variables de entorno que el navegador expone, en lugar de usar márgenes fijos que funcionan en un modelo y fallan en otro.
El CTA flotante, otra vez
Es el elemento que más problemas causa en móvil, porque ocupa la zona del pulgar, que es exactamente donde suele estar el último control de un formulario.
Lo hemos sufrido en este sitio: el botón flotante cubría una opción de respuesta del diagnóstico. El criterio 2.4.11 lo convierte además en un problema de conformidad, no solo de comodidad: si tapa el elemento enfocado, incumple.
Cómo lo comprobamos
1 · Anchos, no modelos
360, 390, 768, 1440 y 1920. Un catálogo de teléfonos caduca; un ancho, no.
2 · Sin desbordamiento horizontal
Medido, no mirado: se compara el ancho del documento con el de la ventana.
3 · Tamaño de todos los objetivos
Se recorren los controles y se mide su altura real renderizada.
4 · Foco visible y no tapado
Recorrido con teclado comprobando que nada cubre el elemento activo.
5 · Estado de mayor densidad
La página con más contenido, que es donde los elementos flotantes tapan cosas.
Preguntas frecuentes
¿Qué tamaño mínimo hay que darle a un botón?
WCAG 2.2 fija el criterio 2.5.8 con sus excepciones; conviene leerlo en la fuente antes de fijar un número, porque hay casos exentos. Nuestro criterio operativo es diseñar con holgura sobre el mínimo, para no depender de las excepciones.
¿Mobile first significa diseñar primero el móvil?
Significa decidir primero qué es imprescindible, que es lo que cabe en una pantalla pequeña. Si eso se decide mirando el escritorio, en móvil se acaba escondiendo cosas en lugar de priorizarlas.
Fuentes primarias
Cada afirmacion sensible de esta pagina se apoya en una de estas fuentes, consultada en la fecha indicada. Las listas de bots, capacidades y borradores cambian: se reverifican en cada revision.
| Entidad | Documento | Consultada |
|---|---|---|
| W3C | Web Content Accessibility Guidelines (WCAG) 2.2 — Recomendación del 12 de diciembre de 2024 | 2026-08-30 |
Siguiente decisión
Continúa con una pregunta concreta
Reconstrucción y mejora de webs existentes
Qué podemos abordar contigo y cómo delimitamos el trabajo.
Reconstrucción y mejora de webs existentes →
Ilustraciones conceptuales; no son fotografías de clientes.