• Success Criterion 2.4.3
  • Conformance level A

Focus Jumping to the Page Top on Every Route Change

2.4.3 — Focus Order

Scenario

Setting

An online marketplace's seller dashboard

What’s wrong

Focus jumping to top on every single-page app route change mid-task, or to arbitrary widgets on load.

Example 

router.afterEach(() => {
  document.getElementById('app-root').scrollIntoView();
  document.body.setAttribute('tabindex', '-1');
  document.body.focus();
});
<!-- fires even mid-wizard, after step 2 of a 4-step listing flow -->

Why it matters

A seller finishing step 2 of a listing wizard gets thrown back to the dashboard's page top, losing their place mid-task.

How to test

Navigate to a new route in a single-page app: check where focus lands — jumping to the page top or an arbitrary widget instead of the new content's heading fails.

How to fix

Route-change focus should land on the new view's heading, not a blanket reset to the top of the app shell.

router.afterEach(() => {
  const heading = document.querySelector('h1, [role="heading"]');
  heading.setAttribute('tabindex', '-1');
  heading.focus();
});

Outcome

A seller moves from step 2 to step 3 and lands right at the new step's heading, ready to continue.

Who is affected

Keyboard and screen reader users completing multi-step wizards must re-navigate from scratch after every step.

Learn more

Related scenarios