Foundations: animations and flashing content

Posted on Monday, 10 January 2022 by Patrick H. Lauke in Design and development

Animation and movement can add to the visual appeal of content, but poorly designed animations can cause problems for many people unless they are implemented correctly.

The types of issues animations and flashing content can cause are:

Seizures can be triggered in people with photosensitive epilepsy by rapidly flashing or bright lights, with red and high-contrast flashes carrying the most risk
Symptoms like motion sickness, headaches and nausea can be triggered in people with vestibular disorders when looking at large animations
Concentration may be difficult or impossible for people with cognitive disabilities that affect attention and focus
Distraction for people with low vision browsing with screen magnification where movement can take up all or large parts of the screen

Adding animations or flashing content

The first thing to consider is whether you need to use animation or flashing content. Only include them if they enhance the user experience without causing undue distraction. Make sure that animations and flashing are only used as additional “eye-candy”, and give people control over the animations and movement. For example movement can be removed or suppressed without affecting the meaning of the content and without loss of important information.

Rules for animations

Avoid using animated content that starts automatically — for example on page load, or animation triggered by any event outside of direct user interaction such as a timer or external event — and lasts for longer than five seconds.

If the use of animated content is unavoidable, add a mechanism for people to pause/hide the animation. Generally, the mechanism can be a control/button on the page itself, or an option in a site-wide user account profile or set of preferences. This is particularly important for large “hero” type animated panels, or panels that use auto playing video.

In the case of more minor animations, for example animated effects on controls, designed to catch people’s attention, where it wouldn’t be possible to add separate play/pause controls, consider stopping the animation effect after five seconds.

Consider keeping the animation effect very subtle for animations that happen due to user interaction — such as parallax scrolling effects or animations that start once a control has been triggered. Avoid excessively fast and big movements that last for more than a few seconds.

Another suggestion is to take advantage of the prefers-reduced-motion media query. CSS-based animations can be set to only play if a person has not enabled the relevant reduced motion setting in their browser/operating system. See for instance Defensive prefers-reduced-motion use - no motion first design).

/* non animated styles */

@media (prefers-reduced-motion: no-preference) {
  /* specific animation styles, only shown if the browser
     supports the media query and an explicit preference
     for reduced motion has not been set*/
}

You can also provide explicit fallback/alternative styles that come into effect if a person did enable the setting for reduced motion:

@media (prefers-reduced-motion: reduce) {
  /* alternative styles when a preference for
     reduced motion has been set*/
}

This media query feature can also be queried from JavaScript, and can be used to inform the default state of any custom play/pause buttons that are added to animations.

const mqList = window.matchMedia('(prefers-reduced-motion:no-preference)');

if (mqList.matches) {
  /* the browser supports the media query, and no preference
     for reduced motion has been set.
     consider it safe to start playing animations by default */
} else {
  /* the browser either doesn’t support the media query, or an
     explicit preference for reduced motion has been set.
     start off with animations paused */
}

Rules for flashing content

Even if you provide explicit play/pause controls for animations, or take advantage of the prefers-reduced-motion media query, there are additional requirements if your animations include flashing content. People may be severely affected by flashing content even before they get a chance to pause/stop an animation or explicitly set a preference in their browser. In extreme cases, a severe seizure can put someone in hospital, so there are critical rules to follow when using content that flashes:

Content must not flash more than 3 times per second
Do not flash red or colours on the red spectrum
Keep the area of flashing content small

The safest option is usually to avoid flashing altogether. If it’s absolutely necessary to flash content, make sure the flashing frequency is very low.

Tips for animations and flashing content

When designing animations and movement consider it's goal:

Animation to communicate change on a page such as an accordion opening, is better than animation intended to disrupt and grab attention such as a flashing advert
Animation caused by a person interacting with the page is better than animation that occurs automatically

For flashing content:

Check any videos you host to not have flashing content, if they do add a warning at the start of the video

More information

Next steps

Read more accessibility foundations posts, our WCAG primer or how assessments can help you identify issues in your websites, mobile applications, design systems, and other products and services.