Animations and Visual Effects

The Standards

Section 508 Standards:

  • Standard 1194.21, h “When animation is displayed, the information shall be displayable in at least one non-animated presentation mode at the option of the user.” (Section508.gov)
  • Standard 1194.22, j “Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.” (Section508.gov)
  • Standard 1194.21, k “Software shall not use flashing or blinking text, objects, or other elements having a flash or blink frequency greater than 2 Hz and lower than 55 Hz.” (Section508.gov)

WCAG 2.0 Guidelines:

  • Guideline 2.2.2 “Pause, Stop, Hide: For moving, blinking, scrolling, or auto-updating information, all of the following are true: (Level A)” (W3C)
    • Moving, blinking, scrolling: For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and
    • Auto-updating: For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.
  • Guideline 2.3.1 “Three Flashes or Below Threshold: Web pages do not 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. (Level A)” (W3C)

What do the Standards Mean?

For individuals with photosensitive seizure disorders, flashing or blinking lights can trigger seizures. Many animations (e.g. gif animation), visual effects (e.g. transitions in slides or videos) and objects that automatically update (e.g. RSS feeds) on web pages, videos, slide presentations, and games have rapid flashing or blinking components. Whether the resource is dangerous to individuals with photosensitivity depends on the speed and size of the animation; for instance, if the object is large and blinks more than three times in a second then it is dangerous. If the requirements are not met then that resource should not be used.

Whenever animations and visual effects are presented in a resource, ensure that any content conveyed by those animations and visual effects are also detailed in the accompanying text. In addition, provide a method for users to pause, stop or slow down the animation, visual effect or automatically updating objective. An example would be allowing users to control the play and speed of the automatic refresh of an RSS feed.

How to Test an Object?

One easy method for assessing whether or not an object meets the above standards is checking to see if the resource blinks or flashes more than three times in a single second. If it does then that animation, visual effect or object could potentially cause individuals with photosensitivity to have a seizure.

There are also tools available that can assess an object for issues related to photosensitivity. Review the page in week 6 for more information.

Tips for Using Animations and Visual Effects

While it is possible to make blinking objects safe, it is often easier and quicker to forgo using any blinking and flashing animations, visual effects or other related objects. Also, when creating slide presentations and videos, use simple, slow transitions and visual effects.