Focus is the keyboard cursor
Focus is where keyboard input goes right now. For people who navigate without a mouse, moving focus correctly is the difference between a usable app and a maze.
Common needs
- When a modal opens, move focus into it and trap focus so tab does not escape to the page behind.
- When the modal closes, return focus to the element that opened it.
- After a route change, move focus to the new heading so screen reader users know the page changed.
Tab order and tabindex
The natural tab order follows the document. The tabindex attribute adjusts it:
- A value of zero makes a normally non focusable element focusable in order.
- A value of negative one makes an element focusable only by script, useful for headings you move focus to.
- Avoid positive values, which create confusing custom orders.
Always keep a visible focus ring so users can see where they are.
Key idea
Move focus deliberately when UI changes, trap it inside modals, return it to the trigger on close, and keep the focus ring visible so keyboard users stay oriented.