Accesibilidad móvil: pantallas pequeñas, procesos completos
Revisa webs móviles en cuanto a ampliación, objetivos táctiles, gestos y orientación. Con una lista para dispositivos reales y tareas clave.
En resumen
Una web móvil tiene que hacer algo más que caber en una vista estrecha. El contenido debe seguir siendo accesible al ampliarlo, las acciones deben activarse de forma fiable y todo debe funcionar también con tecnologías de apoyo. Por eso, revisa un proceso completo en un dispositivo real y complétalo con comprobaciones específicas en el navegador.
Empezar por el contenido y la ampliación
El criterio Reflow de las WCAG exige, por regla general, que el contenido con desplazamiento vertical pueda mostrarse con una anchura de 320 píxeles CSS, sin pérdida de información ni de funcionalidad y sin desplazamiento en dos direcciones. Las excepciones afectan a contenidos que necesitan una presentación bidimensional para su uso o su significado, como ciertas tablas o mapas. Una sola excepción no justifica el desplazamiento horizontal de todo el texto corrido.
La vista estrecha también es relevante para las personas que amplían mucho un navegador de escritorio. Por eso, revisa tanto un viewport estrecho como el zoom del navegador. Los menús, los mensajes y las barras fijas no deben bloquear el camino al contenido.
Valorar juntos los objetivos táctiles y los espacios
WCAG 2.2 AA establece, por regla general, un mínimo de 24 × 24 píxeles CSS para la entrada con puntero. El criterio incluye, entre otras, excepciones por espaciado suficiente, alternativas equivalentes y enlaces dentro del texto corrido. No exige de forma general 44 × 44 píxeles para cada elemento. Aun así, las superficies más grandes pueden facilitar el uso y a menudo tienen sentido para las acciones importantes.
Presta especial atención a los iconos muy próximos entre sí, los botones de cierre pequeños y los cambios de cantidad en el carrito. Lo decisivo es la superficie que activa realmente la acción, no solo el tamaño visible del icono. Prueba también con movimientos menos precisos.
Los gestos necesitan alternativas adecuadas
Si una función usa un gesto multipunto o basado en una trayectoria, según las WCAG necesita, por regla general, una forma de manejo con un solo puntero sin ese gesto, salvo que el gesto sea esencial. Una galería de imágenes puede ofrecer además botones de anterior y siguiente. Para los movimientos de arrastre, WCAG 2.2 AA tiene un criterio propio: debe existir una alternativa adecuada sin arrastre, salvo que se aplique una excepción. Un control deslizante visible por sí solo no demuestra todavía esa alternativa.
Tener en cuenta la orientación vertical y horizontal
No limites el contenido ni el manejo a una sola orientación sin un motivo esencial. Algunas personas fijan su dispositivo en un soporte y no pueden girarlo cuando quieren. Prueba ambas orientaciones y abre el teclado en pantalla al hacerlo. Un formulario que en horizontal desaparece detrás de un pie de página fijo puede volverse inutilizable pese a una buena vista inicial. Revisa también los diálogos con textos largos y los mensajes de error.
Revisar una tarea móvil completa
- Elige una tarea central, como una consulta o un pedido, y prepara datos de prueba seguros.
- Empieza en la vista estrecha y comprueba el ajuste del texto, la navegación y todos los avisos que aparezcan.
- Usa los campos de selección y los botones de forma táctil; prueba alternativas a deslizar y arrastrar.
- Cambia la orientación y abre el teclado en pantalla en cada paso de introducción de datos.
- Repite la tarea con el lector de pantalla del dispositivo y documenta los nombres que falten, los estados poco claros y las acciones bloqueadas.
Combinar pruebas en dispositivos y simulación
La vista de dispositivo del navegador de escritorio ayuda a revisar anchuras y cambios de diseño de forma reproducible. Sin embargo, no reproduce por completo la pantalla táctil real, el teclado en pantalla ni los productos de apoyo móviles. Anota el dispositivo, el navegador, la orientación y los pasos de la prueba. Corrige los problemas recurrentes en el componente compartido y, tras el cambio, repite el mismo proceso en el dispositivo utilizado.
Fuentes y estado de revisión
Aquí encontrarás las fuentes originales de este artículo. Última revisión: .
- W3C: Reflow y 320 píxeles CSS (1.4.10)
- W3C: tamaño mínimo del objetivo y excepciones (2.5.8)
- W3C: alternativas a los gestos del puntero (2.5.1)
- W3C: alternativas a los movimientos de arrastre (2.5.7)
- W3C: orientación del dispositivo (1.3.4)
Los requisitos legales dependen del país, del proveedor y de la oferta concreta. Este artículo explica los fundamentos y los pasos de trabajo. Los resultados de las pruebas se refieren al alcance y la fecha documentados.