DES 1.5 - Avoid using flashing, flicker and unnecessary animation

Items that change or move on a page can cause distractions and often annoyance for most people.

For some people, the distraction of animation can completely prevent them from concentrating on the important information.

Strobing, blinking, flashing and flickering can cause seizures in sensitive people (e.g. People- with photo sensitive epilepsy.)

Avoid all forms of flickering and blinking:

  • Absolutely do not cause flash or flicker in the 2-59 cycles per second (Hz) range;
  • Don't use <blink> or <marquee> attributes.

Use other animation with care:

  • Use smooth transitions in animated gifs, applets, third-party plugins, etc;
  • Be particularly careful with large animations, especially if full screen;
  • Ensure equivalent information is provided that is not animation dependent;
  • Provide user controls to start and stop;
  • Limit the number of cycles/repetitions so that animation will stop after a short time;
  • Warn in advance if flashing or flicker will occur.

Tip: Question whether it is really necessary or if a simpler alternative would be just as effective or better. Often a static representation is more effective and it is probably easier to produce.

guidance_2.4a (1) Don't use 'ticker tape' (scrolling text) because people cannot see it all the time and it is hard to read

Warning:

Do not select the links if you are sensitive to strobing or suffer from photo epilepsy.

Needless to say, do not use any of these in your designs.

NB: The above examples may not flash at the exact correct frequency in some browsers - they are illustrative only.