• Success Criterion 2.2.1
  • Conformance level A
  • W3C reference F41

Page That Auto-Reloads and Resets the User’s Position

2.2.1 — Timing Adjustable

Scenario

Setting

A subscription box service's account settings

What’s wrong

The page auto-reloads itself on a timer — screen reader and keyboard users lose their place every time it refreshes.

Example 

setInterval(() => location.reload(), 30000);

Why it matters

A user editing their shipping address on a timer-reloaded settings page loses unsaved edits every 30 seconds.

How to test

Check the page source for a meta refresh reloading the page periodically: this fails if it happens without user-initiated control.

How to fix

Patch only the data that changed instead of reloading the whole page, so a subscriber's in-progress address edit survives the periodic update.

async function refreshShippingStatus() {
  const data = await fetch('/api/account/shipping-status').then(r => r.json());
  updateShippingPanel(data);
}
setInterval(refreshShippingStatus, 30000);

Outcome

The subscriber finishes updating their address without the page yanking them back to the top.

Who is affected

Screen reader users lose their reading position and keyboard users lose focus every time the page silently reloads.

Learn more

Related scenarios