Diseño · Guía práctica
Cómo comprobar si una tabla obliga a desplazar toda la página a 320 píxeles
Una prueba de ancho reducido ayuda a localizar el componente que arrastra fuera de pantalla el texto y los controles.
Abre una página de lectura y reduce el área visible a 320 píxeles CSS. El criterio 1.4.10 de WCAG 2.2 usa ese ancho de referencia para el contenido que se lee con desplazamiento vertical. Recorre el texto y prueba los controles. Comprueba si puedes leer y operar la página sin tener que moverla también de lado a lado.
Ejemplo ficticio. Una comparativa tiene una tabla de 580 píxeles de ancho entre una introducción y un formulario. En la primera versión, la tabla ensancha toda la página y parte del botón queda fuera. En la segunda, los párrafos y el formulario se ajustan al espacio, mientras la tabla conserva un desplazamiento horizontal propio para comparar columnas.
Prueba las dos zonas por separado. Primero lee el párrafo posterior y llega al botón con el teclado. Después entra en la tabla y comprueba que puedes recorrer las columnas y que el contenido de cada celda se ajusta cuando es posible. Una tabla que necesita conservar relaciones entre filas y columnas puede requerir un diseño bidimensional.
En una prueba de escritorio puedes usar el zoom de página. El W3C da como equivalencia partir de un área visible de 1280 píxeles CSS y aplicar un zoom del 400 %. Si la ventana es más estrecha desde el principio, comprueba el ancho resultante en vez de guiarte solo por el porcentaje.
Para reproducir un fallo, guarda el ancho, el nombre del componente y el primer texto o control que queda fuera. Después de ajustar el diseño, vuelve a recorrer la página y a usar los controles. Esta prueba examina el reflujo de la página concreta.
Comprobación práctica
- Reduce el ancho a 320 CSS px
- Revisa texto y controles
- Prueba la tabla por separado
- Repite tras ajustar el diseño