Blinking Content Check

Description

The “Blinking Content Check” evaluates whether there is any blinking visual effects, caused by the deprecated <blink> HTML tag or the CSS code text-decoration: blink.

Example outcome

I found 1 <blink> value in the CSS which causes the blinking of parts of the content.

Impact

• Cognitive Disabilities: Blinking distracts from comprehension, making the experience mentally taxing or confusing for people with cognitive disabilities.
• ADHD/Attention-Related Disorders: Blinking draws visual focus away from primary content. Persistent animation can make it difficult to concentrate or read surrounding content.
• Autism/Sensory Processig Disorders: Rapid or unexpected visual changes can be overwhelming or cause sensory discomfort. It can trigger anxiety or a strong adverse reaction.
• Seizure Disorders: Blinking or flashing content, even at low frequencies, can pose a risk to users with seizure disorders if it crosses thresholds. Even at sub-threshold frequencies, blinking can cause discomfort or anxiety.

Fixes

To address blinking content:

1. Locate any <blink> tags.
2. Remove them.
3. Locate any text-decoration: blink in CSS.
4. Remove or replace the code.
5. If animation is necessary, use subtle transitions and provide a mechanism to pause or stop the animation.

Resources

• WCAG 2.2: Understanding Success Criteria 2.2.2
• WCAG 2.2 Techniques: Technique F4: Failure of Success Criterion 2.2.2 due to using text-decoration:blink without a mechanism to stop it in less than five seconds
• WebAIM: Creating Accessible Flash Content