• Success Criterion 2.3.1
  • Conformance level A

Rapid Hover Effect That Flashes When a Key Autorepeats

2.3.1 — Three Flashes or Below Threshold

Scenario

Setting

An insurance company's claims form

What’s wrong

Hover/press effects that rapidly toggle high-contrast states when a key autorepeats.

Example 

input.addEventListener("keydown", () => {
  input.classList.toggle("highlight-flash");
}); // retriggers on OS key autorepeat

Why it matters

A user holding a key to move through a long claims form triggers a rapid high-contrast flicker on each field.

How to test

Hold down a key that triggers a rapid hover/press toggle effect (autorepeat): check whether the resulting flicker exceeds the flash threshold.

How to fix

Debounce the effect so a held-down key can't retrigger it faster than the flash threshold.

let lastToggle = 0;
input.addEventListener('keydown', () => {
  const now = Date.now();
  if (now - lastToggle > 500) { input.classList.toggle('highlight'); lastToggle = now; }
});

Outcome

Tabbing quickly through the claims form, a user never triggers the rapid flicker.

Who is affected

Users with photosensitive epilepsy risk a seizure trigger from a flicker effect neither expected nor intended by the form's design.

Learn more

Related scenarios