Moving Focus After an Action

For keyboard and screen reader users, focus is where they are on the page. After an action, you decide where that point lands next.

When a button reveals new content, focus often stays put and the user never learns anything changed. Moving focus brings them to the result.

You move focus in JavaScript by calling element.focus() on the target you want the user to land on next.

A plain div will not accept focus, so give the destination tabindex="-1" so your script can move focus to it.

After loading new content, show it and then send focus there so the screen reader starts reading the new region. 🔎

Pointing focus at the new section's heading often reads best, giving the user a clear title for where they just arrived.

When the user removes a row, focus would otherwise be lost. Move it to the next item or a nearby control so they can keep going.

Letting focus snap back to the page top after every action is jarring. Aim it at the relevant spot instead so context is preserved.

Only move focus in response to a user action. Grabbing it during background updates yanks people out of whatever they were doing.

Test by triggering the action with the keyboard and watching the focus ring land where you intended, every single time.

Each meaningful action should result in exactly one deliberate focus move. Predictable beats clever every time.

You want to move focus to a freshly shown div after a button click. What must the div have?

You learned to move focus on purpose: make the target focusable with tabindex="-1", call focus() after the action, and aim for the most useful spot. ✨