• Success Criterion 2.3.1
  • Conformance level A

Loading Spinner Built as a Rapid Full-Screen Flicker

2.3.1 — Three Flashes or Below Threshold

Scenario

Setting

A news outlet's article page

What’s wrong

Loading spinners implemented as full-region white/dark flicker.

Example 

setInterval(() => {
  article.style.filter = article.style.filter ? "" : "invert(1)";
}, 120); // used as the loading indicator

Why it matters

A reader waiting for an article to load faces a rapid invert flicker across the whole visible article region.

How to test

Review full-region loading spinners/flicker effects with PEAT: white/dark flicker patterns above threshold fail.

How to fix

A skeleton layout or slow fade-in loads content without any screen flicker.

<div class="skeleton-article" aria-hidden="true"></div>
<!-- remove the invert-filter setInterval -->

Outcome

A reader waits through a calm loading state and reads the article without any screen flicker.

Who is affected

Readers with photosensitive epilepsy risk a seizure from a full-region flicker used only as a loading indicator.

Learn more

Related scenarios