Implementing Rule J
§ 1194.22 Web-based intranet and internet information and applications.
(j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.
Some people have photosensitive epilepsy and can get seizures from flashing lights. Other people get headaches from looking at rapidly changing displays.
What Is Flicker?
Dictionary definitions of "flicker" include: to burn unsteadily, to vibrate, to quiver, or to produce a brief spark. (Source: American College Dictionary, Random House, New York, 1970)
Without a legal definition of "flicker", the interpretation of this one is up to the courts.
In the loose sense, then, avoiding causing the screen to flicker can be interpreted to mean keeping a steady image on the screen, or, preventing the image from vibrating at a rate between 2 and 55 Hz.
What Causes the Screen to Flicker?
Flickering is partly a function of your monitor. We will assume your monitor itself will not flicker in the above range. Thus, the only way your Web page will cause the screen to flicker is through the use of animated graphics, blinking or moving text, flashing videos, or rapid page changes.
Animated Graphics
Animated graphics include GIF animations, Flash presentations, and JavaScript actions.
Blinking or Moving Text
Blinking and moving items are attention getters, but tend to work in a negative manner. They function more as warning messages. They are also annoying to someone who is trying to read information on the screen. Read more about blinking or moving text in the context of timed response in Implementing Rule P.
The <blink> tag is an older tag created by Netscape, and is
not included in the HTML
DTDs. This means it is
non-standard HTML, and
for that reason alone, it should not be used.
The <marquee> tag is an older tag created by Microsoft, and,
like <blink>, is not standard
HTML, and should not be used.
Again, while blinking or moving text can be simulated using animated graphics or through JavaScript, their usage should be avoided, both to comply with this rule for avoiding flicker, and also to comply with Rule P, for allowing the user to have adequate time to respond to it.
Video
Another cause of page flickering is video that changes focus rapidly. This includes portions with flashing lights, or strobe light effects.
To get around this, the user can be given the option to play the video, or read the captions. If the video is a news film, for example, avoiding flicker may not be possible. But, not looking at it and still getting the information can suffice - the basic page, with options to play video, will still meet the requirements of this rule.
A warning notice should be put on the page above the portion where the video is activated indicating that the video has flashing effects.
Page Redirects
To avoid flickering caused by rapid page changes, program your redirects so they have a longer wait. A good wait length is 5 seconds. How much of a "flicker" effect the redirect has, though, also depends on the rate your monitor changes the display, which is also a function of your video card speed.
Redirects sometimes are necessary. However, it can be confusing and disorienting to visit a page, and before it loads, it "disappears" and another page appears. At least leave a message explaining what is happening, and wait.
This is discussed further on the page Implementing Rule P.
Rendering the Page
Browsers render a page as information becomes available. When a browser renders a page, it first displays the non-image page contents and estimates space for the images before they are loaded. Then, as the images are loaded, the browser obtains the images' sizes and then redisplays the page to accommodate the actual sizes of the images. This causes the page to shift while loading. I don't know if this falls under the category of "flickering".
However, avoiding the above problem is easy: when designing your page, program into
the <img> tag the height and width attributes.
This enables the browser to lay out the page to allow for an image of that size, and
can avoid re-rendering the display. The height and width values should be the same
as those of the image, for correct display; if they are too large, the browser will
recalculate how to display the image into the "window" and render it with a blurry or
pixelated appearance. If the height and width values are too small, the browser will
attempt to "shrink" the image. Recalculating the image size also makes the page load slower.
You can similarly size your table widths (using percents, for stretchability) so the browser will speedily render the table without resizing it after all the information is loaded.
Skip links to other Section 508 Rules and return to main content