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

Apartados de la norma EN 301 549

El apartado de la norma EN 301 549 que corresponde a cada criterio, por versión de la norma
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 gratuita

O 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

Escribir a Validiscan

Para una revisión gratuita, indique la dirección web de su tienda y su plataforma.

Validiscan utiliza lo que usted envía para responderle. Política de privacidad