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 muestran 4 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
== '''EN DESARROLLO''' ==
{{CriterioWCAG
|id_wcag_criterio=1.4.10
|id_wcag_subcriterio=1.4.10-A
|wcag_titulo_criterio=1.4.10-A. Evitar scroll en dos dimensiones
|wcag_nivel=AA
|wcag_version=2.1
|wcag_principio=1_Perceptible
|wcag_principio_url=Principio_1
|wcag_pauta=1.4_Distinguible
|wcag_pauta_url=Principio_1/1.4_Distinguible
|wcag_grupo=Diseño_responsivo
|wcag_subgrupo=Scroll_y_reflujo
 
|wcag_discapacidades=
<li class="discapacidad-item">
  [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –
  <span class="gravedad gravedad-grave">Barrera grave</span>
</li>
<li class="discapacidad-item">
  [[Archivo:Motriz.png|20px|class=icon-discapacidad|alt=Discapacidad motriz]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad motriz|Motriz]]</span> –
  <span class="gravedad gravedad-grave">Barrera grave</span>
</li>
 
|wcag_lista_discapacidades=
[[Categoría:Discapacidad baja visión]]
[[Categoría:Discapacidad motriz]]
 
|wcag_texto_criterioOAW=
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.
 
|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 diseño debe adaptarse sin pérdida de contenido ni funcionalidad.
 
|wcag_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.
 
|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 contenido debe ajustarse a pantallas estrechas o zoom alto.
 
|wcag_referencias=
<ul>
<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><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/css/C31 C31: Using CSS Flexbox to reflow content]</span></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>
 
|wcag_recursos=
<strong> Consejos </strong>
 
<ul>
<li>Diseño responsivo con CSS Grid o Flexbox</li>
<li>Uso de media queries para reorganizar el contenido</li>
<li>Permitir la ruptura de URLs y cadenas largas</li>
<li>Usar max-width y height auto para imágenes y vídeo</li>
<li>Evitar contenedores fijos o overflow horizontal no controlado</li>
</ul>
 
|wcag_tipo_evaluacion=Manual
 
|wcag_pasos_evaluacion=
 
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span>
Usando la herramienta de inspección de código del navegador:
<ul>
<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>
 
 
 
|wcag_resultado_evaluacion=
El contenido se adapta a pantallas estrechas sin necesidad de desplazamiento en dos dimensiones, y no se pierde información ni funcionalidad.
 
|wcag_ejemplo_evaluacion=
 
<div class="accessibility-card">
El contenido y las imagenes fluye de forma visual y evita scroll horizontal
<pre class="wcag-codigo-html">
<style>
.container { display: flex; flex-wrap: wrap; }
img { max-width: 100%; height: auto; }
</style>
</pre>
 
</div>
 
 
|wcag_otras_herramientas_evaluacion=
<ul>
<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>'''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>'''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>
}}

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»