Diferencia entre revisiones de «Principio 2/2.2 Tiempo Suficiente/2.2.2-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:
== '''2.2.2-A. Contenido en movimiento''' ==
{{CriterioWCAG
|id_wcag_criterio=2.2.2
|id_wcag_subcriterio=2.2.2-A
|wcag_titulo_criterio=2.2.2-A. Contenido en movimiento, parpadeo o desplazamiento
|wcag_nivel=A
|wcag_version=2.2
|wcag_principio=2_Operable
|wcag_principio_url=Principio_2
|wcag_pauta=2.2_Tiempo_suficiente
|wcag_pauta_url=Principio_2/2.2_Tiempo_suficiente
|wcag_grupo=Interacción
|wcag_subgrupo=Movimiento_visual
|wcag_subcriterio_url=Principio_2/2.2_Tiempo_suficiente/2.2.2-A


<!-- 
|wcag_discapacidades=
   Análisis interno:
<li class="discapacidad-item">
  Este criterio impacta principalmente a: Personas con discapacidad cognitiva y visual 
   [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
   Problema grave: Contenido en movimiento que no puede pausarse o detenerse puede distraer o causar sobrecarga cognitiva y dificultad de seguimiento para personas con discapacidad visual o cognitiva, generando barreras graves. 
   <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –
-->
  <span class="gravedad gravedad-grave">Barrera grave</span>
<html>
</li>
<!-- criterio 2.2.2-A -->
<li class="discapacidad-item">
<article class="wcag-card">
  [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
   <section class="wcag-info">
  <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –
    <ul>
   <span class="gravedad gravedad-moderada">Barrera moderada</span>
      <li><span class="label">Nivel:</span><span class="value">A</span></li>
</li>
      <li><span class="label">Versión:</span><span class="value">2.2</span></li>
<li class="discapacidad-item">
      <li><span class="label">Principio:</span><span class="value">2. Operable</span></li>
  [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
      <li><span class="label">Pauta:</span><span class="value">2.2 Proporcionar tiempo suficiente para leer y utilizar contenido</span></li>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –
      <li><span class="label">Categoría:</span><span class="value">Interacción</span></li>
  <span class="gravedad gravedad-moderada">Barrera moderada</span>
      <li><span class="label">Subcategoría:</span><span class="value">Contenido en movimiento</span></li>
</li>
    </ul>
<li class="discapacidad-item">
  </section>
  [[Archivo:Motriz.png|20px|class=icon-discapacidad|alt=Discapacidad motriz]]
  <section class="wcag-users">
  <span class="discapacidad-texto">[[:Categoría:Discapacidad motriz|Motriz]]</span> –
    <p>Usuarios más afectados</p>
  <span class="gravedad gravedad-leve">Barrera leve</span>
    <ul>
</li>
      <li><img src="/images/4/40/Cognitiva.png" alt="Icono discapacidad cognitiva" class="icono-discapacidad" /> Personas con discapacidad cognitiva – <span class="gravedad">Barrera grave</span></li>
<li class="discapacidad-item">
      <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 moderada</span></li>
  [[Archivo:Auditiva.png|20px|class=icon-discapacidad|alt=Discapacidad auditiva]]
    </ul>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad auditiva|Auditiva]]</span> –
  </section>
  <span class="gravedad gravedad-leve">Barrera leve</span>
</article>
</li>
</html>
 
|wcag_lista_discapacidades=
[[Categoría:Discapacidad cognitiva]]
[[Categoría:Discapacidad baja visión]]
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad motriz]]
[[Categoría:Discapacidad auditiva]]
 
|wcag_texto_criterioOAW=
El contenido en movimiento, que se desplace o parpadee, que comience de forma automática, dure más de cinco segundos y se muestre junto a otro contenido, debe disponer de un mecanismo que permita a los usuarios pausarlo, detenerlo u ocultarlo.
 
|wcag_descripcion_resumida=
Los elementos que se mueven o parpadean automáticamente durante más de cinco segundos deben ofrecer un control visible para pausarlos, detenerlos o esconderlos.
 
|wcag_objetivo=
Evitar distracciones y sobrecarga cognitiva provocada por movimiento continuo en pantalla, permitiendo que las personas mantengan la atención y la capacidad de lectura o interacción.
 
|wcag_importancia=
El movimiento automático y prolongado puede impedir leer, generar confusión, provocar mareo o pérdida de foco, afectando especialmente a personas con discapacidad cognitiva o visual.
 
|wcag_referencias=
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html Understanding Success Criterion 2.2.2]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/quickref/#pause-stop-hide WCAG Quick Reference – 2.2.2]</span></li>
<li>[https://www.w3.org/TR/WCAG22/#dfn-three-flashes-or-below-threshold Tres destellos o menos]</li>
</ul>
 
|wcag_recursos=
<ul>
<li>[https://www.w3.org/WAI/design-develop/animations/ W3C – Animaciones accesibles]</li>
<li>[https://web.dev/prefers-reduced-motion/ Google Web.Dev – prefers-reduced-motion]</li>
<li>[https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion MDN – prefers-reduced-motion]</li>
</ul>
 
|wcag_tipo_evaluacion=Semiautomática
 
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Identificar contenido que se mueve, desplaza o parpadea automáticamente.</li>
<li><span class="paso-badge">Paso 2.</span> Comprobar si dura más de cinco segundos y no es esencial.</li>
<li><span class="paso-badge">Paso 3.</span> Verificar existencia de controles para pausar, detener o esconder la animación.</li>
<li><span class="paso-badge">Paso 4.</span> Asegurar que los controles son accesibles con teclado y lectores de pantalla.</li>
<li><span class="paso-badge">Paso 5.</span> Revisar compatibilidad con <code>prefers-reduced-motion</code>.</li>
</ol>
 
|wcag_resultado_evaluacion=
El usuario puede pausar, detener u ocultar el movimiento sin perder acceso al contenido principal.
 
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<strong>✅ Accesible</strong>
<pre class="wcag-codigo-html">
<button id="pause">Pausar animación</button>
<div id="banner" style="animation: slide 3s infinite linear;">Oferta especial</div>
<script>
let paused=false;
pause.onclick=()=>{paused=!paused;banner.style.animationPlayState=paused?'paused':'running'}
</script>
</pre>
</div>
 
<div class="accessibility-card-error">
<strong>❌ No accesible</strong>
<pre class="wcag-codigo-html">
<div style="animation: slide 8s infinite linear;">Noticias</div>
</pre>
</div>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li>Chrome DevTools → Animación / Performance</li>
<li>AXE / Accessibility Insights</li>
<li>Pruebas con JAWS, NVDA y VoiceOver</li>
<li>Configuración del sistema: prefers-reduced-motion</li>
</ul>
}}

Revisión del 11:38 5 nov 2025

2.2.2-A. Contenido en movimiento, parpadeo o desplazamiento

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 en movimiento, que se desplace o parpadee, que comience de forma automática, dure más de cinco segundos y se muestre junto a otro contenido, debe disponer de un mecanismo que permita a los usuarios pausarlo, detenerlo u ocultarlo.

Comprensión del criterio

Descripción resumida

Los elementos que se mueven o parpadean automáticamente durante más de cinco segundos deben ofrecer un control visible para pausarlos, detenerlos o esconderlos.

Objetivo

Evitar distracciones y sobrecarga cognitiva provocada por movimiento continuo en pantalla, permitiendo que las personas mantengan la atención y la capacidad de lectura o interacción.

Importancia de cumplir el criterio

El movimiento automático y prolongado puede impedir leer, generar confusión, provocar mareo o pérdida de foco, afectando especialmente a personas con discapacidad cognitiva o visual.

Referencias WCAG

Recursos de apoyo

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

  1. Paso 1. Identificar contenido que se mueve, desplaza o parpadea automáticamente.
  2. Paso 2. Comprobar si dura más de cinco segundos y no es esencial.
  3. Paso 3. Verificar existencia de controles para pausar, detener o esconder la animación.
  4. Paso 4. Asegurar que los controles son accesibles con teclado y lectores de pantalla.
  5. Paso 5. Revisar compatibilidad con prefers-reduced-motion.

Resultado esperado

El usuario puede pausar, detener u ocultar el movimiento sin perder acceso al contenido principal.

Ejemplo

✅ Accesible 

<button id="pause">Pausar animación</button>
<div id="banner" style="animation: slide 3s infinite linear;">Oferta especial</div>
<script>
let paused=false;
pause.onclick=()=>{paused=!paused;banner.style.animationPlayState=paused?'paused':'running'}
</script>

❌ No accesible 

<div style="animation: slide 8s infinite linear;">Noticias</div>

Otras herramientas de evaluación

  • Chrome DevTools → Animación / Performance
  • AXE / Accessibility Insights
  • Pruebas con JAWS, NVDA y VoiceOver
  • Configuración del sistema: prefers-reduced-motion










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 2.2.2-A. Contenido en movimiento, parpadeo o desplazamiento

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_2/2.2_Tiempo_Suficiente/2.2.2-A&oldid=3462»