- Success Criterion 2.2.2
- Conformance level A
- W3C reference F7
Embedded Animation That Blinks for Over 5 Seconds Nonstop
2.2.2 — Pause, Stop, Hide
Scenario
Setting
A university's online course catalog
What’s wrong
An embedded object or animation blinks for more than 5 seconds and there is no way to pause or stop it.
Example
<div class="new-badge" style="animation: blink 0.3s infinite;">New!</div>Why it matters
A student browsing course listings can't focus on descriptions while a badge blinks nonstop nearby.
How to test
Time any blinking object/embedded content: beyond 5 seconds with no pause mechanism, it fails.
How to fix
A single static badge communicates the same thing without blinking indefinitely.
<span class="new-badge">New</span>
<!-- static badge, animation removed -->Outcome
A student reads course descriptions without a blinking badge pulling their attention away.
Who is affected
Users with attention disorders or photosensitivity find the constant blinking distracting or triggering.
Learn more
- Understanding Understanding document (opens in a new tab)
- Technique Related technique (opens in a new tab)
Related scenarios
- Auto-Scrolling Ticker or Slider With No Pause Button
- Script-Driven Blinking Content With No Way to Stop It
- Content That Blinks Past 5 Seconds With No Stop Control
- Auto-Rotating Carousel Running Past 5 Seconds With No Pause
- Autoplaying Background Video With No Way to Pause It
- Looping Animated GIF With No Way to Freeze It