Principio 1/1.4 Distinguible/1.4.10-A

De WCAG Wiki

1.4.10-A. Evitar scroll en dos dimensiones

Discapacidades afectadas

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

Enunciado del criterio (Observatorio de Accesibilidad Web)

  • El contenido se puede presentar sin perder información o funcionalidad, y sin requerir scroll en dos dimensiones para contenido que se desplaza:
    • 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 refluír (reflow) y ajustarse a pantallas estrechas o zoom alto.

Referencias WCAG

  • C31: Usar Flexbox para reflow del contenido
  • C32: Usar CSS Grid y media queries para columnas fluidas
  • F102: Fallo por contenido que desaparece al reflow

Recursos de apoyo

  • 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 Comprobación manual

Procedimiento de evaluación

  1. Paso 1. Activar herramientas de dispositivo en el navegador.
  2. Paso 2. Simular vista de 320px de ancho / zoom 400%.
  3. Paso 3. Confirmar que no hay scroll horizontal y que todo el contenido sigue accesible.
  4. Paso 4. Verificar funcionalidad completa (formularios, menús, botones).

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

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

El contenido fluye y evita scroll horizontal.

Ejemplo no accesible: 

<div style="width:900px;">Contenido fijo que genera scroll</div>

Contenido rígido que obliga a desplazamiento en dos direcciones.

Otras herramientas de evaluación

  • Modo responsive Chrome/Firefox
  • Zoom de navegador
  • Herramientas de inspección CSS










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

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

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.4_Distinguible/1.4.10-A&oldid=3344»