Técnica Técnicas generales WCAG 2.2
G225Diseñar los paneles de las secciones con desplazamiento horizontal para que quepan en una anchura de 320 píxeles CSS en una página con desplazamiento vertical
En resumen
Los carruseles y otras secciones que se desplazan en horizontal pueden obligar a quien amplía la página al 400 % a desplazarse en dos direcciones para leer cada tarjeta. Esta técnica pide que cada panel individual quepa en 320 píxeles CSS de ancho, de modo que, aunque se pase de un panel a otro en horizontal, su contenido se lea solo con desplazamiento vertical. Beneficia a personas con baja visión y a quienes usan pantallas pequeñas; aplíquela en carruseles de productos, noticias o testimonios.
Aplicabilidad
Todas las tecnologías.
Descripción
El objetivo de esta técnica es garantizar que los usuarios puedan ampliar el texto de una sección con desplazamiento horizontal sin que sea necesario desplazarse horizontalmente para leer el contenido de cada panel individual. Aunque la sección completa requiere desplazamiento horizontal para pasar de un panel a otro, cada panel está diseñado para caber en una anchura fija de 320 píxeles CSS. Esto garantiza que, cuando se utiliza una ventana gráfica (viewport) de 320 píxeles CSS de ancho y la tarjeta está dentro de la ventana gráfica, cada tarjeta permanezca completamente visible sin necesidad de desplazamiento horizontal adicional para leer su contenido.
Ejemplos
Un carrusel de productos
La página de inicio de un sitio web de venta en línea incluye varias secciones informativas, algunas de las cuales presentan carruseles que muestran productos destacados. Estos carruseles requieren desplazamiento horizontal y tienen una altura calculada superior a 256 píxeles CSS. Cada panel tiene 320 píxeles CSS de ancho, lo que permite a los usuarios ver la anchura completa de la tarjeta sin desplazamiento horizontal. En consecuencia, los usuarios solo necesitan desplazarse verticalmente para ver la tarjeta completa, lo que garantiza el cumplimiento del criterio de conformidad 1.4.10 Reajuste de elementos en esa sección.
Ejemplo práctico: Paneles de carrusel con desplazamiento horizontal diseñados para caber en una anchura de 320 píxeles CSS en una página con desplazamiento vertical.
Pruebas
Procedimiento
- Comprobar que la maquetación incluye secciones de contenido que se desplazan horizontalmente dentro de una página con desplazamiento vertical.
- Comprobar que cada sección con desplazamiento horizontal está dividida en paneles diferenciados.
- Abrir la página web en un agente de usuario que admita una ampliación del 400 %, estableciendo las dimensiones de la ventana gráfica en 1280 píxeles CSS de ancho.
- Activar la función de ampliación para aumentar la vista al 400 %.
- Comprobar que el contenido de cada panel individual de las secciones con desplazamiento horizontal es totalmente legible sin necesidad de desplazamiento horizontal adicional.
La barra de desplazamiento nativa del navegador no se incluye en las dimensiones de la ventana gráfica. Por lo tanto, al establecer la vista en 1280 píxeles CSS de ancho en una página con desplazamiento vertical, asegúrese de excluir la anchura de la barra de desplazamiento.
Resultados esperados
- Todas las comprobaciones anteriores son verdaderas.
Cómo lo comprobamos en ADDAW
En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica G225 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
