惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Cisco Talos Blog
Cisco Talos Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
爱范儿
爱范儿
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Jina AI
Jina AI
雷峰网
雷峰网
The Register - Security
The Register - Security
The Cloudflare Blog
博客园 - 【当耐特】
M
MIT News - Artificial intelligence
I
InfoQ
博客园 - 三生石上(FineUI控件)
H
Help Net Security
博客园 - 司徒正美
Vercel News
Vercel News
WordPress大学
WordPress大学
S
SegmentFault 最新的问题
云风的 BLOG
云风的 BLOG
B
Blog
Google DeepMind News
Google DeepMind News
B
Blog RSS Feed
L
LangChain Blog
人人都是产品经理
人人都是产品经理
GbyAI
GbyAI
T
The Blog of Author Tim Ferriss
T
Tailwind CSS Blog
aimingoo的专栏
aimingoo的专栏
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Recorded Future
Recorded Future
小众软件
小众软件
Martin Fowler
Martin Fowler
罗磊的独立博客
Stack Overflow Blog
Stack Overflow Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
酷 壳 – CoolShell
酷 壳 – CoolShell
腾讯CDC
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
Apple Machine Learning Research
Apple Machine Learning Research
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
博客园 - Franky
Hugging Face - Blog
Hugging Face - Blog
Y
Y Combinator Blog
V
Visual Studio Blog
F
Fortinet All Blogs
Microsoft Azure Blog
Microsoft Azure Blog
大猫的无限游戏
大猫的无限游戏
Engineering at Meta
Engineering at Meta
N
Netflix TechBlog - Medium
V
V2EX
Blog — PlanetScale
Blog — PlanetScale

User Agent Man

Introducing Enable: Accessible Web Components You Can Learn From R.I.P. Internet Explorer: A Hate Filled Love Letter How to Fix Seizure Inducing Sequences In Videos How To Style Resized Text and Quickly Fix WCAG 1.4.4 Issues Creating Accessible HTML5 Modal Dialogs For Desktop and Mobile Fixing Firefox’s Keyboard Accessibility Bug With Flex Layout Implementing An Accessible Skip Navigation Link Requires More Thought Than You’d Think Making Framework Agnostic Isomorphic Web Applications with Query Strings and HTML5 pushState How To Fix Transformed Text in HTML5 Canvas In Firefox For Windows
Using PEAT To Create Seizureless Web Animations
zoltan · 2017-04-03 · via User Agent Man

Recently, an accessibility-savvy client asked me if one of the animations they were planning to place on their website could cause seizures with people who have Photosensitive Epilepsy. There are several examples of this happening in the real world, such as this Pokémon episode that caused seizures in several Japanese children in 1997, this promotional video for the 2012 Olympic Games in London and even a case of someone trying to induce a seizure in someone on purpose with an animated GIF. The avoid this from happening in accessible web applications, the W3C’s Web Content Accessibility Guidelines require that a web page cannot “contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds” (this is known as the Three Flashes or Below Threshold requirement)

Testing this requirement may seem a little daunting at first, but luckily there is a free tool called PEAT that web developers can use to test if their animations and videos can cause an epileptic attack in those with Photosensitive Epilepsy. The help files for it are really good at explaining how the seizure risk is determined using the Harding Test (and even what a general flash and a red flash is). However, when I installed it on my computer, I found that there were limitations:

  1. It is Windows-only (and my work computer is a Mac).
  2. While it states that you can capture the animation running on a web browser, I have found this difficult to get working, especially if you are running PEAT in a virtual machine such as VirtualBox (did I mention my work computer was a Mac?)
  3. A work around for the previous point is that you can give PEAT a video capture to analyze. However, the video must be an uncompressed AVI (and most Mac tools deal primarily with MP4 or Quicktime Videos)

In order to work around these issues, we need to produce a video capture, convert it to an uncompressed AVI, and then let PEAT analyze that.

Step 1: Producing a Video Capture of Your Web Browser

On a Mac, use Quicktime to capture the video of your animation. On Windows 10, you can use this built-in feature in Windows to capture video, but since not all computers running Windows support it, you may find CamStudio a good alternative (Note: I have not used either Windows solution to capture video, so your mileage may vary).

Step 2: Convert the Video to Uncompressed AVI format

PEAT is guaranteed to analyze 25 frame-per-second uncompressed AVIs. I have used FFmpeg to convert other types of video content to this format. Once you download the program (or install it with your favourite package manager like macports, brew, or cygwin), you can use the following command line recipe to do this:

ffmpeg -i input.mp4 -an -vcodec rawvideo -y -r 25 output.avi

For those who are interested: the -an removes the audio (since PEAT doesn’t need it to analyze the video), the -vcodec rawvideo converts the output to an uncompressed format, the -y will overwrite the video without asking, and the -r 25 will ensure the output video has a framerate of 25 frames-per-second. Note that even though I use an MPEG-4 as the input video in the command above, FFmpeg can read and write a variety of other video formats.

Sometimes PEAT will fail to read the uncompressed video, or only analyze part of the video, because it’s too big. In that case, you should resize the video using this ffmpeg recipe:

ffmpeg -i input.mp4 -vf scale=640:-1 -an -vcodec rawvideo -y -r 25 output.avi

This will rescale the video to 640 pixels across without changing the aspect ratio. This rescale is acceptable for seizure testing purposes.

Step 3: Get PEAT to analyze the video

You can now use PEAT to analyze the input file. If you are using a Mac or Linux, use VirtualBox or another type of Virtual Machine software to run it on a copy of Windows (this can be done by downloading one of the modern.IE Windows 10 virtual machine images from Microsoft’s developer website). You can open the file using File → Open and then analyze the video using Analysis → Analyze Video. To show how it works, let’s give PEAT a video capture of a game I have been developing in my spare time:

When I put this video through PEAT, it starts producing a graph like this:

PEAT analyzing video capture of a game I am making in my spare time.

As you can see from the graph, the animations used in the video are safe — the only times the graph starts spiking are when the monsters start flashing, but this flashing is well within acceptable levels (the tool shows some light luminance flash).

To show how the tool behaves when it comes across a bad animation, I fed it a the seizure inducing scene from Pokémon that I mentioned earlier. I do not link to the video, since I don’t want people getting seizures as a result of going to my blog (if you want to see it, search for it in YouTube), but here is what PEAT displays when it came across the seizure-inducing part of the show:

screenshot of PEAT analyzing a seizure inducing video.

Note that both luminance and red flash metrics are going off the charts. Flashing saturated reds are especially bad for those who susceptible to seizures.

Further Reading

Acknowledgments

Header photo credit: Gerd Altmann.