• Success Criterion 2.2.2
  • Conformance level A
  • W3C reference F112

Content That Blinks Past 5 Seconds With No Stop Control

2.2.2 — Pause, Stop, Hide

Scenario

Setting

A fashion e-commerce site's checkout page

What’s wrong

Content blinks for more than 5 seconds and there is no way to stop it.

Example 

.stock-badge {
  animation: blink 0.5s infinite;
}

Why it matters

A shopper entering payment details is distracted by an endlessly blinking stock badge right next to the card fields.

How to test

Time any blinking content: content that keeps blinking past 5 seconds with no way to stop it fails outright.

How to fix

Limit the animation to a few cycles, such as iteration-count 3, instead of infinite.

@keyframes blink { 50% { opacity: 0.4; } }
.stock-badge { animation: blink 0.5s ease-in-out 3; }

Outcome

A shopper completes checkout without a blinking badge distracting them at the payment step.

Who is affected

Users with vestibular or attention disorders struggle to concentrate on checkout fields near constant blinking.

Learn more

Related scenarios