Diferencia entre revisiones de «Principio 2/2.3 Reacciones físicas/2.3.1-A»

De WCAG Wiki
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=2.3.1-A. Umbral de tres destellos
|wcag_titulo_criterio=2.3.1-A. Umbral de tres destellos
|wcag_nivel=A
|wcag_nivel=A
|wcag_version=2.2
|wcag_version=2.0
|wcag_principio=2_Operable
|wcag_principio=2_Operable
|wcag_principio_url=Principio_2
|wcag_principio_url=Principio_2
|wcag_pauta=2.3_Ataques_fotosensitivos
|wcag_pauta=2.3_Reacciones_físicas
|wcag_pauta_url=Principio_2/2.3_Ataques_fotosensitivos
|wcag_pauta_url=Principio_2/2.3_Reacciones_físicas
|wcag_grupo=Percepción_visual
|wcag_grupo=Percepción_visual
|wcag_subgrupo=Fotosensibilidad
|wcag_subgrupo=Fotosensibilidad
Línea 14: Línea 14:


|wcag_discapacidades=
|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">
<li class="discapacidad-item">
   [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
   [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
   <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –  
   <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –  
   <span class="gravedad gravedad-grave">Barrera grave</span>
   <span class="gravedad gravedad-grave">Barrera grave</span>
</li>
<li class="discapacidad-item">
  [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –
  <span class="gravedad gravedad-moderada">Barrera moderada</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-leve">Barrera leve</span>
</li>
<li class="discapacidad-item">
  [[Archivo:Auditiva.png|20px|class=icon-discapacidad|alt=Discapacidad auditiva]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad auditiva|Auditiva]]</span> –
  <span class="gravedad gravedad-leve">Barrera leve</span>
</li>
</li>


|wcag_lista_discapacidades=
|wcag_lista_discapacidades=
[[Categoría:Discapacidad baja visión]]
[[Categoría:Discapacidad cognitiva]]
[[Categoría:Discapacidad cognitiva]]
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad motriz]]
[[Categoría:Discapacidad auditiva]]


|wcag_texto_criterioOAW=
|wcag_texto_criterioOAW=
Línea 51: Línea 27:


|wcag_descripcion_resumida=
|wcag_descripcion_resumida=
El contenido no puede incluir destellos rápidos que puedan provocar ataques fotosensitivos. Si hay destellos, su frecuencia debe ser menor o igual a tres por segundo o cumplir el umbral de tamaño seguro.
El contenido no puede incluir destellos rápidos que puedan provocar ataques fotosensitivos.  
 
Si hay destellos, su frecuencia debe ser menor o igual a tres por segundo o cumplir el umbral de tamaño seguro.


|wcag_objetivo=
|wcag_objetivo=
Línea 57: Línea 35:


|wcag_importancia=
|wcag_importancia=
Los destellos intensos y rápidos pueden causar ataques, mareos o desorientación. Controlar la frecuencia y área destellante protege la salud y seguridad de las personas usuarias.
Los destellos intensos y rápidos pueden causar ataques, mareos o desorientación.  
 
Controlar la frecuencia y área destellante protege la salud y seguridad de las personas usuarias.


|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold.html Understanding Success Criterion 2.3.1]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G19 G19: Ensuring that no component of the content flashes more than three times in any 1-second period]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/quickref/#three-flashes-or-below-threshold WCAG Quick Reference – 2.3.1]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G176 G176: Keeping the flashing area small enough]</span></li>
<li>[https://trace.umd.edu/peat/ PEAT – Photosensitive Epilepsy Analysis Tool]</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G15 G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold]</span></li>
</ul>
</ul>


Línea 69: Línea 49:
<ul>
<ul>
<li>[https://trace.umd.edu/peat/ Herramienta PEAT para epilepsia fotosensitiva]</li>
<li>[https://trace.umd.edu/peat/ Herramienta PEAT para epilepsia fotosensitiva]</li>
<li>[https://wave.webaim.org/ WAVE Evaluation Tool]</li>
<li>[https://accessibilityinsights.io/ Accessibility Insights]</li>
</ul>
</ul>


|wcag_tipo_evaluacion=Semiautomática
|wcag_tipo_evaluacion=Manual


|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
<ol class="paso-list">
<ol class="paso-list">
<li>Identificar videos, animaciones o efectos con destellos visibles.</li>
<li><span class="paso-badge">Paso 1.</span>
<li>Comprobar si hay más de tres destellos por segundo.</li>
Localizar si existe en la página algún contenido que presente destellos.
<li>Analizar el área destellante para confirmar si entra dentro del umbral permitdo.</li>
</li>
<li>Utilizar PEAT u otras herramientas de evaluación fotosensible.</li>
 
<li>Validar que el contenido no supone riesgo ni genera malestar visual.</li>
<li><span class="paso-badge">Paso 2.</span>
Verificar que no se producen más de tres destellos en un segundo.
</li>
</ol>
</ol>


|wcag_resultado_evaluacion=
|wcag_resultado_evaluacion=
Línea 89: Línea 70:
|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<div class="accessibility-card">
<strong>✅ Accesible</strong>
Cualquier contenido web que no parpadee.
<pre class="wcag-codigo-html">
<style>
.pulse { animation: slowBlink 1.5s infinite; }
@keyframes slowBlink {
  0%,100% { opacity:1; }
  50% { opacity:.4; }
}
</style>
<div class="pulse">Mensaje destacado</div>
</pre>
</div>
 
<div class="accessibility-card">
<strong>❌ No accesible</strong>
<pre class="wcag-codigo-html">
<style>
.flash { animation: fastBlink .2s infinite; } /* 5 destellos/segundo */
@keyframes fastBlink {
  0%,100% { opacity:1; background:red; }
  50% { opacity:.2; background:yellow; }
}
</style>
<div class="flash">¡Oferta!</div>
</pre>
</div>
</div>


|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>PEAT — análisis de destellos fotosensitivos</li>
<li>'''Revisión visual''': identificar contenido que parpadee o destelle (animaciones, anuncios, efectos visuales, vídeos, banners).</li>
<li>AXE, WAVE, Accessibility Insights</li>
<li>'''Prueba de frecuencia''': comprobar que no se producen destellos superiores a tres por segundo, o bien verificar que el área de destello es lo suficientemente pequeña para no provocar problemas.</li>
<li>Pruebas en distintos monitores y contrastes</li>
<li>'''Herramientas de análisis''': utilizar el Evaluador de Destellos del W3C (W3C Photosensitive Epilepsy Analysis Tool - PEAT) u otras herramientas de verificación para medir la frecuencia y el área de los destellos.</li>
<li>'''Revisión de animaciones y vídeo''': inspeccionar CSS/JS o contenido multimedia para identificar patrones de parpadeo y asegurarse de que no superan el umbral permitido.</li>
</ul>
</ul>
}}
}}

Revisión actual - 12:42 6 nov 2025

2.3.1-A. Umbral de tres destellos

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 no debe presentar destellos con una frecuencia superior a tres destellos por segundo, a menos que el área con destellos sea suficientemente pequeña.

Comprensión del criterio

Descripción resumida

El contenido no puede incluir destellos rápidos que puedan provocar ataques fotosensitivos. Si hay destellos, su frecuencia debe ser menor o igual a tres por segundo o cumplir el umbral de tamaño seguro.

Objetivo

Evitar desencadenar ataques fotosensitivos o convulsiones en personas sensibles a destellos rápidos, garantizando un entorno visual seguro.

Importancia de cumplir el criterio

Los destellos intensos y rápidos pueden causar ataques, mareos o desorientación. Controlar la frecuencia y área destellante protege la salud y seguridad de las personas usuarias.

Referencias WCAG

Recursos de apoyo

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Localizar si existe en la página algún contenido que presente destellos.
  2. Paso 2. Verificar que no se producen más de tres destellos en un segundo.

Resultado esperado

El contenido no supera los tres destellos por segundo o cumple el umbral seguro de área.

Ejemplo

Cualquier contenido web que no parpadee.

Otras herramientas de evaluación

  • Revisión visual: identificar contenido que parpadee o destelle (animaciones, anuncios, efectos visuales, vídeos, banners).
  • Prueba de frecuencia: comprobar que no se producen destellos superiores a tres por segundo, o bien verificar que el área de destello es lo suficientemente pequeña para no provocar problemas.
  • Herramientas de análisis: utilizar el Evaluador de Destellos del W3C (W3C Photosensitive Epilepsy Analysis Tool - PEAT) u otras herramientas de verificación para medir la frecuencia y el área de los destellos.
  • Revisión de animaciones y vídeo: inspeccionar CSS/JS o contenido multimedia para identificar patrones de parpadeo y asegurarse de que no superan el umbral permitido.










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 2.3.1-A. Umbral de tres destellos

Loading comments...