Focus Management
Programmatically move focus when context changes: into a modal on open, back to trigger on close, to the next item after deletion, to new content after dynamic loads.
When something new opens, such as a pop-up, the keyboard's attention should move to it — and return to where you were when it closes.
Focus management is not a single WCAG criterion — it's a pattern that supports 2.4.3 (Focus Order), 2.4.7 (Focus Visible), and 2.1.2 (No Keyboard Trap). The principle: whenever the user's context changes, focus should follow logically.
Why this matters
When focus isn't managed after dynamic changes, keyboard users get lost. After closing a modal, focus might jump to the top of the page. After deleting an item, focus might land on an invisible element. These are disorienting experiences that break task flow.
How to detect
Test with keyboard: open and close a modal (does focus return to the trigger?), delete an item from a list (where does focus go?), submit a form with errors (does focus move to the error summary?), load new content dynamically (is focus moved or announced?).
How to fix
// Modal: move focus in on open, return on close
const trigger = document.activeElement;
dialog.showModal();
dialog.querySelector('[autofocus]').focus();
dialog.addEventListener('close', () => {
trigger.focus(); // Return focus to what opened it
});
// List deletion: move focus to next item
function deleteItem(item) {
const next = item.nextElementSibling || item.previousElementSibling;
item.remove();
if (next) next.focus();
}
// Form errors: focus the error summary
function showErrors() {
errorSummary.focus(); // Must have tabindex="-1"
}