Here’s a full transcript of the video, complete with detailed descriptions of the visuals. For visual users, we’ve included screenshots to show how transcripts are structured and why they’re such an important part of accessibility. Whether you prefer to watch, read, or both, we’ve got you covered.
Visual:
An elderly black man with glasses sits on a sofa watching TV. A warning message appears on the screen, with a lightning bolt icon underneath.
Jessica, voice over:
Warning. This film contains flashing images that may cause discomfort or trigger seizures for people with photosensitive epilepsy.
Visual:
The TV screen changes to a PC monitor in a different location, with the same warning icon, being watched by Benson, a grey cat with white spots.
Jessica:
Think that only applies to the movies? Think again.
Visual:
The cat turns half way to look at you, with a worried expression.
Jessica:
Welcome to What in the World is WCAG? 2.3 Seizures and Physical reactions.
Visual:
Title card. 2.3 Seizures and Physical reactions is scrawled onto a sticky note, which is slapped onto the screen by a cat’s paw. Now, we’re entering a presentation-style format.
Jessica:
Three Flashes.
Web content should not contain anything that flashes more than three times in any one second period. This applies to videos, animations and interactive features that produce quick bright flashes.
Flashing content can cause seizures in individuals with photosensitive epilepsy. By limiting the frequency of flashes, websites can prevent serious physical reactions in these users. The film industry puts warnings on things, but in the digital world, there is no excuse for putting people at risk.
Animation from interactions.
This is a triple-A requirement, but I wanted to highlight it.
Visual:
A screenshot of the success criterion as it is written in WCAG. The brief explainer text reads “Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.”
Jessica:
Separate from Pause, Stop, Hide, where the movement is initiated by the website, this is animation that happens due to user interaction, like scrolling down the page.
Visual:
A fictional website promoting a mobile phone. A picture of the phone appears above the fold, similar to the Nokia N-Gage. The top level heading says “The future. You want it.”
Jessica:
Parallax scrolling effects, a fancy term for when the background moves at a different rate to the foreground. Zooming animations, sliding panels… These can cause discomfort or disorientation for some people.
Visual:
As the website scrolls down, the mobile phone image follows, floating behind the text that appears up from the bottom, creating a parallax effect. The text says things like “Crystal clear. 176 x 208 pixel display. Yes, really.” and “At your fingertips. Full numerical keypad. No compromises.”
There’s even a table that compares the phone to a modern smartphone. The comparison points are: Tactile keypad, Headphone jack, Looks cool, and Doesn’t break when you so much as blow on it. The phone wins on all points.
Finally, the bottom of the page says “We’re done here. Statistically, this smug approach to marketing has worked on you, so go ahead and click the “Buy now” button. Brought to you by the Cargo Cult School of Design.”
Jessica:
Providing options to reduce or remove these animations allows users to interact with content without experiencing adverse physical reactions. But again, ask yourself if you really need that animation.
Seizures and Physical reactions. Safety first. No flashes, no fears.