Motion
Presenter: Carie Fisher
Educational video taken from the W3Cx Introduction to Web Accessibility course.
Transcript
Hello welcome back!
Now we'll be looking at moving, flashing, or blinking content on websites and apps. Some examples include: carousels, slideshows, SVGs, Gifs, videos, and endless scrolling.
Who does this help? people who have seizures or migraines when viewing flashing or blinking material, people who have vertigo or get nauseous when viewing moving content, people who have difficulty tracking moving objects, or similarly people with attention deficit disorders.
In all of these cases users need to be able to control moving content and choose what works best for them. With the addition of media queries like ‘prefers reduced motion’ this ability to choose what movement a user will be exposed to is becoming a reality.
Before I go on a quick warning – the following example will show an animated SVG. Although the movement is purposefully slowed down for this example, if you are triggered by motion you may want to skip over this part.
Okay now for the example. Here's an animated SVG of a chameleon that has both a default form and a reduce motion form. In the default view the chameleon's colors and eyeball moves in addition the spaceship can be seen speeding past in the distance.
Because the code includes information about what to do when a user wants a different experience when it comes to movement, simply by switching the settings on my computer I will see an alternate version of this SVG.
On my Mac the way I turn on this setting is to go to: System Preferences, accessibility, display, reduce motion.
Now I see that the chameleon colors and eyeballs do not move and the rocket is stationary.
If I decide in the future to enable motion again, I can just reset the preference.
When it comes to moving, flashing, and blinking content it is one thing to distract someone by animation and it's an entirely different thing when the animation actually makes your users sick. Photosensitive seizures and vestibular disorders can be provoked by certain types of flashing or movement on websites and apps. As content becomes more dynamic and media rich it's more important than ever to think about what content you are displaying and what it is you're doing to the health of your users.
Make sure to avoid: content that flashes more than three times in one second, covers a large area of the screen, and is very bright.
If you were concerned your media fits into this category you can test it with Trace Center's photosensitive epilepsy analysis tool or PEAT. This is a free tool that can help authors determine whether animations or videos and their content are likely to cause seizures.
Okay that is all for now on moving flashing or blinking content.
Thanks for watching.
