El contenido debe adaptarse a 320 píxeles CSS sin desplazamiento horizontal
Las personas con baja visión amplían la página al 400 %, lo que la deja tan estrecha como un móvil pequeño. Cuando las tablas, las galerías de productos o las secciones de ancho fijo no caben, tienen que desplazarse hacia los lados en cada línea, y leer los detalles de los productos o comparar precios se vuelve agotador.
- ID de la regla
- vs-reflow
- Origen
- Comprobación de Validiscan
- Impacto
- Grave
- Nivel de corrección
- ASSISTED
- en Shopify, Shopware, WooCommerce y Magento
- Estado
- se ejecuta
Qué hace la comprobación
Muestra las páginas con un ancho de 320 píxeles CSS (el equivalente a un zoom del 400 %) y señala el contenido que obliga a desplazarse horizontalmente o que queda cortado (1.4.10).
En cada viewport escaneado, que de forma predeterminada tiene 1440 o 390 px de ancho, la comprobación reduce la página a 320 × 480 píxeles CSS, espera dos fotogramas de animación más 250 ms, mide y restaura el viewport. En el contexto móvil, una página que conserva una maquetación más ancha porque su etiqueta meta viewport falta o fija un ancho recibe en su lugar un único hallazgo en html.
En caso contrario, notifica, de mayor a menor anchura y con un máximo de 10 por página, las cajas que terminan más de 2 px más allá del borde final en línea (inline end) del viewport mientras que sus ancestros sí caben, y los elementos que caben pero cuyo propio texto no salta de línea y sobrepasa ese borde. Ignora las tablas, las cuadrículas (grid), los mapas, role="application", el contenido con aria-hidden y las cajas vacías.
Cuando la página se desplaza hacia los lados y no se notifica nada más, el hallazgo recae en html, salvo que lo que se haya desbordado sea una tabla, una cuadrícula (grid), un mapa o una región con role="application". El contenido que overflow-x: hidden recorta en la página se notifica de todos modos. El contenido oculto a 320 px, o encerrado en su propio contenedor de desplazamiento o de recorte, se omite.
Cómo corregirlo
Sustituya los anchos fijos por max-width: 100% y diseños flexibles, deje que las palabras largas y las URL se partan (overflow-wrap: anywhere), deje que las tablas anchas se desplacen dentro de su propio contenedor y asegúrese de que ningún elemento defina un ancho mínimo superior a 320 píxeles.
Criterios de conformidad de las WCAG
- 1.4.10 Reflow, nivel AA
Apartados de la norma EN 301 549
| Criterio de las WCAG | Versión 3.2.1 | Versión 4.1.1 |
|---|---|---|
| 1.4.10 | 9.1.4.10 | 9.1.4.10 |
Empiece con una revisión gratuita de su tienda.
Envíe la dirección de su tienda. Validiscan la escanea y le responde con cada fallo que el escaneo pueda demostrar, con la página y el código.
Solicitar revisión gratuitaO escriba a info@validiscan.com.
Qué cubre la revisión gratuita y qué deja fuera- Usted envía
- la dirección de su tienda
- Páginas escaneadas
- hasta 15
- Usted recibe
- todos los fallos que el escaneo puede demostrar, con la página y el código
- En su tienda
- solo páginas públicas; sin inicio de sesión, nada comprado, ningún formulario enviado
- Lo que no es
- una auditoría completa