2.4.3 Focus Order

Focus moves through the page in an order that keeps its meaning and operation.

Level A

What the automated checks look for

Focus fell back to the page when the element was replaced, so keyboard users lose their place.

Who it affects. Keyboard and screen reader users are sent back to the top of the page after an action, and must find their way back.

How to fix it. When you remove or replace the element that has focus, move focus to what replaced it, or to the next sensible control.

<script>
  saved.hidden = false;
  saved.focus(); // saved has tabindex="-1"
</script>

const ref = useRef(null);
useEffect(() => { if (done) ref.current?.focus(); }, [done]);
<p ref={ref} tabIndex={-1}>Saved.</p>