Lanzamos la extensión de Google Chrome "Area Flash Checker", la cuarta entrega de nuestras extensiones de accesibilidad web.
Esta vez extendemos el enfoque de "análisis por área", nacido con la primera entrega, "Area Contrast Checker", que permite seleccionar una zona arrastrando el cursor y analizar tal como se ve, hacia el "movimiento".
Conforme a los criterios de éxito 2.3.1 y 2.3.2 de WCAG, puede comprobar en el momento los destellos de los elementos que se mueven en la página.
Antecedentes del desarrollo: los destellos, fáciles de pasar por alto y difíciles de comprobar
Los parpadeos intensos y los destellos rojos pueden provocar crisis de epilepsia fotosensible.
En Japón es ampliamente conocido el caso de la emisión de una serie animada de televisión en 1997, que provocó malestar en muchos espectadores.
WCAG establece como requisito básico de nivel A los criterios de éxito relativos a los destellos.
Aunque no son frecuentes los sitios web con destellos que infrinjan este criterio, cuando ocurren afectan directamente a la salud de los usuarios.
Además, los destellos no se limitan a los vídeos: también pueden producirse en animaciones CSS, efectos con Canvas y espacios publicitarios.
Hasta ahora, para comprobar los destellos se han utilizado herramientas de análisis de archivos de vídeo, como PEAT.
Estas herramientas están pensadas principalmente para revisar el material de vídeo durante la fase de producción.
Para verificar el estado de un sitio web una vez integrado el contenido, había que grabar la pantalla de la página, convertir el archivo de vídeo, cargarlo en la herramienta y repetir ese proceso cada vez que se realizaba una corrección.
"Si encuentro un movimiento sospechoso, quiero comprobarlo en el momento."
Con esta idea, en los equipos de trabajo, comenzó el desarrollo.
Mida la página tal como se mueve, sin necesidad de grabar
Basta con seleccionar la zona que desea analizar arrastrando el cursor (o toda la pantalla) y capturar de 5 a 60 segundos.
Como analiza directamente los fotogramas de renderizado, puede contar los destellos generales y los destellos rojos exactamente como los ve el usuario.
CSS animations, vídeos, Canvas, GIF, carruseles, espacios publicitarios y demás elementos se verifican siguiendo el mismo procedimiento.
※Además, si desea auditar el archivo de vídeo final en sí, las herramientas que analizan el archivo de vídeo son más adecuadas.
Esta herramienta está pensada como una opción para realizar comprobaciones rápidas durante el proceso de producción y diagnóstico.
Funciones principales
1. Evaluación de los criterios de éxito 2.3.1 y 2.3.2 de WCAG
Muestra, por separado para destellos generales y destellos rojos, si se cumple o no se cumple lo establecido en «Tres destellos o por debajo del umbral» (Nivel A) y «Tres destellos» (Nivel AAA).
- Destello general
Un ciclo completo en el que la luminancia relativa aumenta al menos 0,1 y después disminuye (o viceversa). Se cuenta como un destello cuando la luminancia relativa del lado más oscuro es inferior a 0,80. - Destello rojo
Transición entre rojo saturado (R/(R+G+B) ≥ 0,8) y otro color, según la definición de WCAG 2.1 y posteriores, con una diferencia de cromaticidad superior a 0,2 en el espacio CIE 1976 UCS. - Umbral de área
21 824 px² CSS recomendados por WCAG (25 % de 341×256 px)
Los resultados muestran también el número máximo de destellos por segundo, la comparación entre el área de infracción y el umbral, y el intervalo de tiempo en el que se superó el límite (el segundo de máximo pico).
2. Cronología y mapa de destellos
La cronología muestra la evolución del porcentaje de cambio de luminancia, el área de destellos y el área de infracción. Al pasar el cursor o usar las teclas de flecha sobre la cronología, la vista previa de fotogramas superpone las zonas de la selección que estaban parpadeando en ese momento.
3. Consideraciones para usar en páginas reales
- Solicita capturas a 60 fps y muestra la frecuencia de fotogramas efectiva. Emite una advertencia si existe riesgo de pasar por alto destellos rápidos.
- Se adapta automáticamente a pantallas Retina y de alta densidad (high DPI) y al zoom del navegador.
- Para evitar falsos positivos, excluye por defecto las estructuras finas, como líneas delgadas y bordes de texto, del cálculo de áreas (puede desactivarse según el objeto de medición).
- Diseño que evita que las superposiciones de medición aparezcan en las capturas.
4. Accesibilidad de la propia herramienta
Es compatible con lectores de pantalla y anuncia el estado y los resultados de la medición. También se ha cuidado su facilidad de uso como herramienta de accesibilidad, con manejo de la línea de tiempo mediante teclado y la posibilidad de volver atrás en cualquier fase pulsando la tecla Escape.
Nota: No se recopilan datos ni se envía información a ningún servidor externo. Los fotogramas capturados se analizan en la memoria del navegador y se descartan de inmediato, por lo que puede utilizarlo con tranquilidad incluso en páginas no publicadas o entornos internos.
Descargue Area Flash Checker aquí
En Liberogic nos proponemos que la accesibilidad sea una calidad habitual, y no un tratamiento especial.
Los destellos son una de las áreas difíciles de juzgar con diagnósticos automáticos que analizan HTML o CSS, por lo que requieren verificación humana.
Con la herramienta de diagnóstico automático Lente Scanse obtiene una visión general, con la extensión del navegador se verifican elementos individuales y la decisión final de conformidad se toma mediante una auditoría manual realizada por expertos con Lente Audit.
Combinando el diagnóstico automático, las herramientas de uso diario y la auditoría manual de expertos, apoyamos la mejora continua de la accesibilidad.
Hacer la accesibilidad más cercana y fluida.
Seguiremos ofreciendo herramientas y servicios que dan forma a las opiniones de quienes trabajan en el terreno.
