23. No blinking/No flickering

Design e-learning so that it does not cause blink, flash or flicker

Design e-learning so that it does not cause blink, flash or flicker.
Notes:

This includes text and animations that do not move smoothly, creating a flickering effect.
If blinking, flashing or flickering is necessary for pedagogical purposes, and you are a Pearson employee, contact accessibility@pearson.com.

Rationale

Certain types of blinking, flashing and flickering can cause seizures in people with a condition called photosensitive epilepsy. In addition, users who are susceptible to this condition may not be aware of it and so will pay little attention to warning messages that address people with epilepsy.

The more of the user’s field of vision that is taken up with flashing content, the more likely there will be issues. Although some studies have recently be undertaken to try to determine safe levels of flash based on the speed of the flashing, the size of the area affected, and the colors/brightness involved, details of flashing in Web media (speed, size & color) can vary from system to system and user agent to user agent and so cannot be guaranteed.

In addition, blinking, flashing and flickering content can be distracting to most users and especially users with learning disabilities and attention deficit disorders. If such content is presented along side text, for example, users may have difficulty to concentrating on reading the text.

HTML

Do not use the <blink> tag. (It is non-standard HTML.)
Do not use the <marquee> tag. (It is non-standard HTML and it causes flicker effects while a user focuses on the text trying to read it.)
Do not use animations that blink or flicker.

JavaScript and Applications

Intentional Flicker or Choppy Animations

Don’t create animation that blinks or flickers.

Accidental Flicker

If code that changes the display runs in a loop or may run for a series of user actions, consider whether it depends on accompanying conditions to avoid blinking. For example, code that switches images might depend on the presence of a particular backdrop to avoid blinking. If so, make sure the code will not run without the condition needed to avoid blinking.

Accidental Flicker onLoad

If a page layout is made up of many elements layered on top of each other as shown below, it is important to ensure that slow loading won’t cause blinking.
A page layout has a black border around a white frame that holds two dark grey regions, one of which contains two light grey regions.

If you use code to place each box in the design, the user’s screen may go through the following states:
The browser is white, then filled with black, then a large white rectangle fills most of that, then 2 black rectangles fill most of the white rectangle,then two light grey rectangles fill most of one of the black rectangles.

Depending on the user’s load speed, this can create blinking. To avoid or fix this, make all of the elements the same color while they are loading, and only assign their final colors after they are all in place.

Accidental Flicker Based on User Actions

If code that creates one blink or change in color is triggered by user action, consider:

Is it possible for user action to create a backlog of these events that will be processed later, creating a flicker effect? If so, design the code so that it will not keep running through those actions to catch up.
To work efficiently, would the user have to trigger this repeatedly, creating a flashing effect? If so, avoid changes in blocks of color for that activity.

Testing

Testing technique	Description
Review	Review for anything that blinks or flickers. Look for items that blink or flicker accidentally in addition to items that blink or flicker for the purpose of that effect. For example, sometimes an animation created with too few frames will move in a choppy manner. Watch what happens while the UI is loading. Test on a slow connection in addition to a fast connection to understand what users may experience.
Analysis	If you find such motion, it is an error. If this motion is necessary for the pedagogical value of the materials, and you are a Pearson employee, contact accessibility@pearson.com and we’ll work with you to design a solution with the least problematic type of blinking possible and with warnings so that users can avoid the content if needed.

Review

Review for anything that blinks or flickers. Look for items that blink or flicker accidentally in addition to items that blink or flicker for the purpose of that effect. For example, sometimes an animation created with too few frames will move in a choppy manner. Watch what happens while the UI is loading. Test on a slow connection in addition to a fast connection to understand what users may experience.

Analysis

If you find such motion, it is an error. If this motion is necessary for the pedagogical value of the materials, and you are a Pearson employee, contact accessibility@pearson.com and we’ll work with you to design a solution with the least problematic type of blinking possible and with warnings so that users can avoid the content if needed.

Related Guidelines

508 Web § 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.

508 Software

WCAG 2.0 Level A - SC 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)

WCAG 2.0 Level AAA – SC 2.3.2 Three Flashes

Web pages do not contain anything that flashes more than three times in any one second period. (Level AAA)