Zoom y desplazamiento en móviles
Silktide comprueba que tus páginas funcionen en pantallas pequeñas sin obligar a los visitantes a hacer zoom y arrastrar la página en dos direcciones para leerla. Las páginas que fallan aquí normalmente no se han diseñado para dispositivos móviles en absoluto.
Por qué es importante
Leer una página solo para escritorio en un móvil implica hacer zoom con pellizco sobre una columna de texto y después desplazarse tanto en horizontal como en vertical en cada línea: doloroso para cualquiera e imposible para muchas personas con baja visión o con discapacidades motoras. Los dispositivos móviles ya representan la mayor parte del tráfico web, así que una página así falla a la mayoría de sus visitantes y los motores de búsqueda la posicionan peor por ello. El criterio de éxito 1.4.10 de las WCAG (Reflujo, de las ) requiere que el contenido se reorganice a una pantalla de 320 píxeles de ancho sin desplazamiento en dos dimensiones.
Cómo solucionarlo
- Usa diseño web adaptable (responsive), para que la página se reorganice en una sola columna en pantallas estrechas. El maquetado moderno con (media queries, flexbox, grid) lo hace práctica estándar; la mayoría de los temas de los sitios lo admiten de serie.
- Incluye una etiqueta correcta en la plantilla de tu página:
<!-- Indica a los navegadores móviles que rendericen al ancho del dispositivo -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- Prueba la página a 320 píxeles de ancho (el ancho de móvil común más pequeño) y comprueba que nada obligue al desplazamiento horizontal: tablas anchas, imágenes de ancho fijo y cadenas largas que no se pueden dividir son causantes frecuentes.
Si en la práctica no es posible hacer que una página sea adaptable, puedes el hallazgo.
Cómo lo prueba Silktide
- Cargar la página como si fuera un dispositivo móvil.
- Determinar si la página parece estar diseñada para móviles. Una página falla cuando se cumple cualquiera de estos puntos:
- No tiene una etiqueta viewport utilizable o el viewport declara un ancho fijo superior a 480 píxeles.
- Más del 35% de su texto se renderiza demasiado pequeño para leerlo (menos de 10 píxeles).
- Se desplaza horizontalmente más del 40% del ancho de la pantalla.
- El navegador tiene que alejar el zoom por debajo del 60% para que la página quepa en la pantalla.
- Informar de la página cuando falla, una vez por página.
Solución de problemas
La comprobación relacionada de desplazamiento horizontal
Desplazamiento horizontal en móviles informa de cantidades menores de desbordamiento horizontal en páginas que por lo demás son aptas para móviles. Esta comprobación detecta el caso extremo en el que la página no intenta en absoluto dar soporte a móviles, por lo que la solución es un rediseño adaptable en lugar de ajustar un único elemento que desborda.
Partes de mi página realmente necesitan un diseño en dos dimensiones
WCAG permite excepciones para contenido que requiere un diseño bidimensional para ser usable, como mapas, tablas de datos y diagramas. La página que los rodea debería seguir reorganizándose; si una página marcada es una de estas excepciones, aprueba el hallazgo.