Moving Content
Carousels on a news site, scrolling marquees with the latest weather, strobing lights in movies, and animated transitions in slide presentations are just a few examples of moving content. The use of motion, animation, and flashing is all too prevalent in digital content. Yet moving content presents difficulties for many people. Individuals who are photosensitive, have vestibular disorders, or have cognitive and learning disabilities are all affected by motion, animation, and flashing. Moving content can also cause difficulties for keyboard and screen reader users.
It is best to avoid flashing content due to the severity of its impact. You should only use other types of motion where needed to support your content. When you include moving content, you must provide people with the ability to control the movement themselves.
Overview
Section titled “Overview”Any animation or moving content that can’t be paused or stopped reduces the effectiveness of other content by constantly distracting our attention. For some people, this can make content unusable. For other people, certain types of movement can cause anxiety, nausea, headaches, or even seizures.
The most severe effects of changing content come from flashing effects in animations and videos. People can and have ended up in a hospital due to the effects of flashing content. While you can manipulate color, area, and timing to make it possible to use flashing in ways that have less impact, given the severe consequences, the best recommendation is to avoid all flashing content.
The first and best way to limit the impacts of other types of motion and animation is to limit their use. When the use of moving content is required, you can limit its negative impact by:
- Having all motion initially disabled.
- Limiting the duration, complexity, and speed of the movement or animation.
- Giving individuals options to control on-screen movement themselves.
- People should be able to pause, stop, or hide all moving content.
- Honoring system settings if the user has asked for reduced motion.
Who is Helped
Section titled “Who is Helped”Flashing and moving content can present difficulties for people who are photosensitive or have vestibular disorders. For these individuals, the effects of flashing and movement can be severe or even life-threatening, with symptoms that range from anxiety, nausea, and headaches to seizures.
When people cannot pause or stop animations or moving content, it can be highly distracting.
- For people with certain cognitive and learning disabilities, such as attention deficit disorders, movement can divert their attention from other information. In some cases, it can completely negate all other content.
- For other people, certain types of movement can cause anxiety, nausea, headaches, or even seizures. Some types of animations can also cause problems for people using screen readers.
People with cognitive and learning disabilities who have trouble scanning text or tracking moving objects can struggle to understand moving content that conveys information. This content can also cause difficulties for keyboard and screen reader users.
Motion & Animation
Section titled “Motion & Animation”When people can’t pause or stop moving content, it can distract their attention from other content. For some people, movement is so distracting that it can prevent them from finding other content. For other people, certain types of movement can cause anxiety, nausea, headaches, or even seizures.
It’s best to limit the use of motion and animations. When you include moving content on a page, you should start with all movement turned off and let people control it themselves.
The Web Content Accessibility Guidelines (WCAG) have specific requirements regarding motion and animation. Although people often use motion and animation interchangeably, they have distinct differences in this context.
WCAG defines animations as any moving, blinking, or scrolling content. Animations include image carousels, scrolling marquees, looping GIFs, moving icons, moving background images, background videos, or similar types of movement. It can be highly distracting when individuals can’t pause, stop, or hide moving content. For some people, movement can completely distract their attention from other content.
Motion refers specifically to animations that create a sense of movement. WCAG refers to these as motion animations. Motion animations, such as parallax effects, can be very triggering for people with vestibular (inner ear) motion disorders and cause dizziness, nausea, and headaches that can last for many hours. These same types of movements can be distracting or cause anxiety for some neurodiverse people. For people with epilepsy and migraine sensitivities, they can cause nausea, headaches, or even seizures.
It’s best to limit the use of animations as much as possible. A basic principle in design is to start with content and then add other features, such as animations, only if they add value to the content. Following this principle means you should carefully consider the use of each animation in context. Sometimes, animation is the best way to help people understand a concept. When you decide to include motion or animation on a page:
- Start with the motion or animation turned off.
- Give individuals the option to control on-screen movement themselves.
Flashing Content
Section titled “Flashing Content”Flashing content can cause migraines and seizures. People can and have ended up in a hospital as a result of the effects of flashing content.
Flashing is any quick switch from high contrast to low contrast that happens more than 3 times a second but is slow enough to still be visible (3-50 flashes per second). Once common on websites, now it is more often seen in videos.
Given the serious consequences of using flashing content, it is strongly recommended that all flashing is avoided.
A Pokemon cartoon broadcast in Japan in 1997 contained repetitive flashing effects. As a result, 685 children were taken to hospital by ambulances and over 150 were hospitalized. Some of the children had blurred vision, headaches, dizziness, and nausea. Others experienced blindness, convulsions, seizures, and loss of consciousness. Two of the children remained hospitalized for over two weeks.
The Pokemon Shock incident is not an isolated event. Beyond WCAG: Losing Spoons Online describes one person’s painful reaction to the use of flashing and animation.
| Quick Table | Column 2 |
|---|---|
| Row 1 | Row 2 |
While color, area, and timing make it possible to use flashing in ways that will have less impact, it’s easy to avoid and not worth taking a chance.
Photosensitive seizures can be triggered by:
- Flashing or flickering lights.
- Rapidly changing or alternating images or blocks of color.
- Patterns such as stripes and squares, even if they do not move.
There are only very narrow parameters for the safe use of flashing. The negative impacts of flashing content are so serious that it is strongly recommended not to use flashing.