DEV 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
- 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.
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.
- Flash at 2Hz
(recommended lower limit)
- Flash at 4Hz
(recommended lower limit by some guidelines)
- Flash at 20Hz
(the peak sensitivity for many people)
- Flicker at 50Hz
- All flashes/flickers on one page
NB: The above examples may not flash at the exact correct frequency in some browsers - they are illustrative only.