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

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
Línea 1: Línea 1:
== '''1.4.10-A. Evitar scroll en dos dimensiones''' ==
{{CriterioWCAG
<!-- 
|id_wcag_criterio=1.4.10
  Análisis interno:
|id_wcag_subcriterio=1.4.10-A
  Este criterio impacta principalmente a: Personas con baja visión y discapacidad motriz 
|wcag_titulo_criterio=1.4.10-A. Evitar scroll en dos dimensiones
  Problema grave: Si el contenido requiere desplazamiento en dos direcciones, los usuarios con baja visión tendrán dificultades de lectura, y usuarios con discapacidad motriz pueden no poder manejar correctamente la interfaz, generando barreras graves.
|wcag_nivel=AA
-->
|wcag_version=2.2
<html>
|wcag_principio=1_Perceptible
<!-- criterio 1.4.10-A -->
|wcag_principio_url=Principio_1
<article class="wcag-card">
|wcag_pauta=1.4_Facilitar_ver_y_escuchar_contenido
   <section class="wcag-info">
|wcag_pauta_url=Principio_1/1.4_Facilitar_ver_y_escuchar_contenido
    <ul>
|wcag_grupo=Diseño_responsivo
      <li><span class="label">Nivel:</span><span class="value">AA</span></li>
|wcag_subgrupo=Scroll_y_reflujo
      <li><span class="label">Versión:</span><span class="value">2.2</span></li>
 
      <li><span class="label">Principio:</span><span class="value">1. Perceptible</span></li>
|wcag_discapacidades=
      <li><span class="label">Pauta:</span><span class="value">1.4 Facilitar ver y escuchar contenido</span></li>
<li class="discapacidad-item">
      <li><span class="label">Categoría:</span><span class="value">Diseño responsivo</span></li>
   [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
      <li><span class="label">Subcategoría:</span><span class="value">Scroll y reflujo</span></li>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –
    </ul>
  <span class="gravedad gravedad-grave">Barrera grave</span>
  </section>
</li>
  <section class="wcag-users">
<li class="discapacidad-item">
    <p>Usuarios más afectados</p>
  [[Archivo:Motriz.png|20px|class=icon-discapacidad|alt=Discapacidad motriz]]
    <ul>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad motriz|Motriz]]</span> –
      <li><img src="/images/b/b7/Bajavision.png" alt="Icono baja visión" class="icono-discapacidad" /> Personas con baja visión – <span class="gravedad">Barrera grave</span></li>
  <span class="gravedad gravedad-grave">Barrera grave</span>
      <li><img src="/images/0/06/Motriz.png" alt="Icono discapacidad motriz" class="icono-discapacidad" /> Personas con discapacidad motriz – <span class="gravedad">Barrera grave</span></li>
</li>
    </ul>
 
  </section>
|wcag_lista_discapacidades=
</article>
[[Categoría:Discapacidad baja visión]]
</html>
[[Categoría:Discapacidad motriz]]
 
|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:
* 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 refluír (reflow) y ajustarse a pantallas estrechas o zoom alto.
 
|wcag_referencias=
<ul>
<li>C31: Usar Flexbox para reflow del contenido</li>
<li>C32: Usar CSS Grid y media queries para columnas fluidas</li>
<li>F102: Fallo por contenido que desaparece al reflow</li>
</ul>
 
|wcag_recursos=
<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=Comprobación manual
 
|wcag_pasos_evaluacion=
<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 2.</span> Simular vista de 320px de ancho / zoom 400%.</li>
<li><span class="paso-badge">Paso 3.</span> Confirmar que no hay scroll horizontal y que todo el contenido sigue accesible.</li>
<li><span class="paso-badge">Paso 4.</span> Verificar funcionalidad completa (formularios, menús, botones).</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=
Ejemplo accesible:
<div class="accessibility-card">
<pre class="wcag-codigo-html">
<style>
.container { display: flex; flex-wrap: wrap; }
img { max-width: 100%; height: auto; }
</style>
</pre>
<p>El contenido fluye y evita scroll horizontal.</p>
</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=
<ul>
<li>Modo responsive Chrome/Firefox</li>
<li>Zoom de navegador</li>
<li>Herramientas de inspección CSS</li>
</ul>
}}

Revisión del 19:04 4 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 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»