Desplazamiento horizontal en móviles
Silktide comprueba si tus páginas se desplazan lateralmente en teléfonos móviles. El contenido debe ajustarse al ancho de una pantalla pequeña, de modo que las personas usuarias solo tengan que desplazarse hacia abajo.
Por qué es importante
Cuando una página es más ancha que la pantalla, parte de cada línea de texto queda fuera de la vista, y la persona lectora tiene que arrastrar de un lado a otro para seguir el contenido. Eso cansa a todo el mundo y supone una verdadera barrera para las personas con baja visión (que a menudo también amplían la página) y para las personas con discapacidades motoras. El criterio de conformidad 1.4.10 (Reflujo, de las ) exige que el contenido se adapte a una pantalla de 320 píxeles de ancho sin necesidad de desplazarse en dos dimensiones.
Normalmente la página en su conjunto está bien y es un único elemento el que provoca el desbordamiento: una tabla ancha, una imagen con ancho fijo, un vídeo incrustado o una cadena ininterrumpida larga, como una URL.
Cómo solucionarlo
- Abre la página en un teléfono (o estrecha la ventana del navegador hasta 320 píxeles) e identifica qué se sale por el borde derecho.
- Corrige el elemento problemático con adaptable (responsive):
\/* Un elemento de ancho fijo obliga a que la página sea más ancha que la pantalla *\/
img.hero { width: 600px; }
\/* Corregido: se reduce para ajustarse a pantallas estrechas *\/
img.hero { max-width: 100%; height: auto; }
- Para tablas de datos anchas, permite que la tabla se desplace dentro de su propio contenedor (
overflow-x: auto) para que el resto de la página siga ajustándose a la pantalla. - Se permite el desplazamiento en contenidos que realmente necesitan un diseño bidimensional, como mapas y diagramas; si eso es lo único que detecta el hallazgo, puedes .
Cómo lo prueba Silktide
- Carga la página como si fuera un dispositivo móvil.
- Mide cuánto se extiende la página más allá del borde derecho de la pantalla. Se ignoran los desbordamientos inferiores a 10 píxeles como error de redondeo.
- Clasifica el desbordamiento según a cuántos dispositivos afecta: desde un leve desbordamiento que solo afecta a teléfonos pequeños (320 píxeles de ancho, como un iPhone 5) hasta un desbordamiento lo bastante grande como para afectar a teléfonos grandes (414 píxeles de ancho, como un iPhone 7 Plus).
Resolución de problemas
La comprobación de diseño móvil relacionada
Esta comprobación informa de desbordamiento horizontal en páginas que por lo demás son aptas para móviles. Las páginas que no intentan admitir móviles en absoluto —sin , texto diminuto, desbordamiento extremo— se informan en Zoom y desplazamiento en móvil, donde la solución es un rediseño responsive.
No veo ningún desplazamiento
Los desbordamientos pequeños pueden ser invisibles en teléfonos más grandes. Prueba a 320 píxeles de ancho —las herramientas de desarrollo del navegador permiten fijar el ancho exacto— y busca cualquier elemento que cruce el borde derecho.