Structure, keyboard, and focus

Manage focus after change

Move focus only when context changes require it and return it to a sensible trigger afterward.

9 minute lesson

~~~

Opening a modal focuses its heading or first useful control, traps interaction appropriately, and returns focus to the opener. This is a small part of a deliberately flawed event-registration page that is audited, repaired, and retested with real evidence, but the boundary it creates affects everything that follows.

Dynamic updates can leave focus on removed elements or make new context impossible to discover. The useful target is not encyclopedic coverage. Make one deliberate choice, observe its consequences, and know which requirement would make you revise it.

Watch for one shortcut in particular: trying to move focus for every small update or leave it inside removed DOM. It makes later failures harder to locate. Instead, define the focus destination and return path as part of the interaction design. Prefer an implementation you can explain from the outside before optimizing it.

Keep the wider goal in view: Make page structure and every interaction understandable and operable without a mouse. A short observation with concrete evidence is more useful than a confident sentence with no reproduction path.

Open, submit, fail, close, and reopen the modal using only the keyboard and verify focus at every step. Hand the result to someone else and see whether the behavior is clear without an oral explanation.

Lesson completed

Take this course offline

Get every free book and course as PDF and EPUB files.

Get the download library →