• Success Criterion 2.4.3
  • Conformance level A

Activating a Control That Throws Keyboard Focus Elsewhere

2.4.3 — Focus Order

Scenario

Setting

A fashion e-commerce site's checkout page

What’s wrong

Activating a control (a filter checkbox, a Next button) throws keyboard focus somewhere else instead of keeping it on the control — the user loses their place after every action.

Example 

shippingRadio.addEventListener('change', () => {
  updateOrderSummary();
  document.getElementById('search-input').focus();
});

Why it matters

Selecting a shipping option throws focus into the site search box, so the next Tab press no longer continues down the checkout form.

How to test

Activate a filter checkbox or a 'Next' button and check focus: if it jumps away from the control you just used instead of staying on/near it, it fails.

How to fix

Only move focus deliberately, such as to a new dialog or an error message; otherwise leave it where the user put it.

shippingRadio.addEventListener('change', () => {
  updateOrderSummary();
});

Outcome

A shopper selects a shipping method and continues tabbing straight down the checkout form.

Who is affected

Keyboard users checking out lose their place every time they pick an option, forcing them to relocate the form each time.

Learn more

Related scenarios