Principio 1/1.4 Distinguible/1.4.10-A

1.4.10-A. Evitar scroll en dos dimensiones

1_Perceptible 1.4_Distinguible

• Nivel: AA
• Versión: 2.1
• Principio: 1_Perceptible
• Pauta: 1.4_Distinguible
• Grupo: Diseño_responsivo
• Subgrupo: Scroll_y_reflujo

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

• Baja visión – Barrera grave
• Motriz – Barrera grave

Enunciado del criterio (Observatorio de Accesibilidad Web)

• El contenido debe poder presentarse sin pérdida de información o funcionalidad y sin necesidad de realizar scroll en dos dimensiones en áreas de visualización reducidas (320x256 píxeles CSS).
  • en vertical con una anchura equivalente a 320 píxeles CSS.
  • en horizontal con una altura equivalente a 256 píxeles CSS.

Comprensión del criterio

Descripción resumida

El contenido debe reconfigurarse para evitar la aparición de scroll horizontal y vertical simultáneo cuando se visualiza en ventanas reducidas o con zoom hasta el 400% (equivalente a 320px de ancho). El diseño debe adaptarse sin pérdida de contenido ni funcionalidad.

Objetivo

Garantizar que personas con baja visión o quienes utilizan altos niveles de zoom puedan navegar sin necesidad de desplazamiento complejo en dos direcciones.

Importancia de cumplir el criterio

El desplazamiento en dos dimensiones provoca una carga cognitiva y física muy elevada, especialmente para usuarios con baja visión o movilidad reducida. El contenido debe ajustarse a pantallas estrechas o zoom alto.

Referencias WCAG

• C32: Using media queries and grid CSS to reflow columns
• C31: Using CSS Flexbox to reflow content
• C33: Allowing for reflow with long URLs and strings of text
• C38: Using CSS width, max-width and flexbox to fit labels and inputs
• C34: Using media queries to un-fix sticky headers/footers
• C37: Using CSS max-width and height to fit images
• F102: Failure due to content disappearing and not being available when content has reflowed

Recursos de apoyo

Consejos

• Diseño responsivo con CSS Grid o Flexbox
• Uso de media queries para reorganizar el contenido
• Permitir la ruptura de URLs y cadenas largas
• Usar max-width y height auto para imágenes y vídeo
• Evitar contenedores fijos o overflow horizontal no controlado

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

1. Paso 1. Usando la herramienta de inspección de código del navegador:
   • a. En Chrome, pulsar el botón “Toggle device toolbar” en la parte superior izquierda.
   • b. En Firefox, pulsar el botón “Vista de diseño adaptable” en la parte superior derecha.
2. Paso 2. Modificar la resolución en la vista de dispositivo y seleccionar 320x256 para imitar el comportamiento de un dispositivo móvil de baja resolución.
3. Paso 3. Verificar que todas las funcionalidades de la página son operables y se visualizan de manera correcta sin necesidad de hacer doble scroll.

Resultado esperado

El contenido se adapta a pantallas estrechas sin necesidad de desplazamiento en dos dimensiones, y no se pierde información ni funcionalidad.

Ejemplo

El contenido y las imagenes fluye de forma visual y evita scroll horizontal

<style>
.container { display: flex; flex-wrap: wrap; }
img { max-width: 100%; height: auto; }
</style>

Otras herramientas de evaluación

• Prueba en dispositivo móvil / simulador: visualizar la página en una ventana reducida (mínimo 320 × 256 px CSS) y comprobar que no se requiere desplazamiento horizontal para leer el contenido principal.
• Herramientas de inspección: usar DevTools (modo responsive) para verificar que el diseño se adapta correctamente sin cortar texto, imágenes o controles.
• Inspección de estilos: revisar que se empleen técnicas responsivas (p. ej. flex, grid, unidades relativas, media queries) y evitar tamaños fijos que puedan provocar desbordamiento.
• Navegación por teclado y lectores de pantalla: comprobar que el contenido sigue siendo accesible en pantallas pequeñas sin pérdida de información ni controles inaccesibles.

Comentarios

A continuación se muestran comentarios sobre el criterio 1.4.10-A. Evitar scroll en dos dimensiones

Loading comments...