Diferencia entre revisiones de «Principio 1/1.4 Distinguible/1.4.10-A»

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestra una edición intermedia del mismo usuario)
Línea 4: Línea 4:
|wcag_titulo_criterio=1.4.10-A. Evitar scroll en dos dimensiones
|wcag_titulo_criterio=1.4.10-A. Evitar scroll en dos dimensiones
|wcag_nivel=AA
|wcag_nivel=AA
|wcag_version=2.2
|wcag_version=2.1
|wcag_principio=1_Perceptible
|wcag_principio=1_Perceptible
|wcag_principio_url=Principio_1
|wcag_principio_url=Principio_1
|wcag_pauta=1.4_Facilitar_ver_y_escuchar_contenido
|wcag_pauta=1.4_Distinguible
|wcag_pauta_url=Principio_1/1.4_Facilitar_ver_y_escuchar_contenido
|wcag_pauta_url=Principio_1/1.4_Distinguible
|wcag_grupo=Diseño_responsivo
|wcag_grupo=Diseño_responsivo
|wcag_subgrupo=Scroll_y_reflujo
|wcag_subgrupo=Scroll_y_reflujo
Línea 29: Línea 29:


|wcag_texto_criterioOAW=
|wcag_texto_criterioOAW=
El contenido se puede presentar sin perder información o funcionalidad, y sin requerir scroll en dos dimensiones para contenido que se desplaza:
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 vertical con una anchura equivalente a 320 píxeles CSS.
* en horizontal con una altura equivalente a 256 píxeles CSS.
* en horizontal con una altura equivalente a 256 píxeles CSS.


|wcag_descripcion_resumida=
|wcag_descripcion_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 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.
El diseño debe adaptarse sin pérdida de contenido ni funcionalidad.


Línea 42: Línea 43:
|wcag_importancia=
|wcag_importancia=
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 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.
 
El contenido debe ajustarse a pantallas estrechas o zoom alto.


|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li>C31: Usar Flexbox para reflow del contenido</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/css/C32 C32: Using media queries and grid CSS to reflow columns]</span></li>
<li>C32: Usar CSS Grid y media queries para columnas fluidas</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/css/C31 C31: Using CSS Flexbox to reflow content]</span></li>
<li>F102: Fallo por contenido que desaparece al reflow</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/css/C33 C33: Allowing for reflow with long URLs and strings of text]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/css/C38 C38: Using CSS width, max-width and flexbox to fit labels and inputs]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/css/C34 C34: Using media queries to un-fix sticky headers/footers]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/css/C37 C37: Using CSS max-width and height to fit images]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/failures/F102 F102: Failure due to content disappearing and not being available when content has reflowed]</span></li>
</ul>
</ul>


|wcag_recursos=
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<ul>
<li>Diseño responsivo con CSS Grid o Flexbox</li>
<li>Diseño responsivo con CSS Grid o Flexbox</li>
Línea 60: Línea 68:
</ul>
</ul>


|wcag_tipo_evaluacion=Comprobación manual
|wcag_tipo_evaluacion=Manual


|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
<ol class="paso-list">
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Activar herramientas de dispositivo en el navegador.</li>
<li><span class="paso-badge">Paso 1.</span>
<li><span class="paso-badge">Paso 2.</span> Simular vista de 320px de ancho / zoom 400%.</li>
Usando la herramienta de inspección de código del navegador:
<li><span class="paso-badge">Paso 3.</span> Confirmar que no hay scroll horizontal y que todo el contenido sigue accesible.</li>
<ul>
<li><span class="paso-badge">Paso 4.</span> Verificar funcionalidad completa (formularios, menús, botones).</li>
<li>a. En Chrome, pulsar el botón <strong>“Toggle device toolbar”</strong> en la parte superior izquierda.</li>
<li>b. En Firefox, pulsar el botón <strong>“Vista de diseño adaptable”</strong> en la parte superior derecha.</li>
</ul>
</li>
 
<li><span class="paso-badge">Paso 2.</span>
Modificar la resolución en la vista de dispositivo y seleccionar <strong>320x256</strong> para imitar el comportamiento de un dispositivo móvil de baja resolución.
</li>
 
<li><span class="paso-badge">Paso 3.</span>
Verificar que todas las funcionalidades de la página son operables y se visualizan de manera correcta sin necesidad de hacer doble scroll.
</li>
</ol>
</ol>


|wcag_resultado_evaluacion=
|wcag_resultado_evaluacion=
Línea 74: Línea 96:


|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
Ejemplo accesible:
 
<div class="accessibility-card">
<div class="accessibility-card">
El contenido y las imagenes fluye de forma visual y evita scroll horizontal
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<style>
<style>
Línea 82: Línea 105:
</style>
</style>
</pre>
</pre>
<p>El contenido fluye y evita scroll horizontal.</p>
 
</div>
</div>


Ejemplo no accesible:
<div class="accessibility-card-error">
<pre class="wcag-codigo-html">
<div style="width:900px;">Contenido fijo que genera scroll</div>
</pre>
<p>Contenido rígido que obliga a desplazamiento en dos direcciones.</p>
</div>


|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Modo responsive Chrome/Firefox</li>
<li>'''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.</li>
<li>Zoom de navegador</li>
<li>'''Herramientas de inspección''': usar DevTools (modo responsive) para verificar que el diseño se adapta correctamente sin cortar texto, imágenes o controles.</li>
<li>Herramientas de inspección CSS</li>
<li>'''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.</li>
<li>'''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.</li>
</ul>
</ul>
}}
}}

Revisión actual - 12:38 6 nov 2025

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 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

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.










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=3711»