Focus Management

What It Is

Focus management means controlling how keyboard focus moves through a web page.

It helps keyboard users, screen reader users, and users with motor disabilities understand where they are and how to interact with the interface.

Focus Management = Control where keyboard focus goes and make it visible

Why It Matters

Many users navigate websites without a mouse.

Good focus management ensures:

interactive elements are reachable
focus order is logical
focus indicator is visible
modals do not leak focus to the background
SPA page changes are understandable
keyboard users do not get stuck

Bad focus handling can make a visually correct UI unusable.

Tab navigation is how users move through interactive elements using the Tab key.

The browser usually follows the DOM order and tabindex.

Tab = move forward
Shift + Tab = move backward

Tab navigation matters because keyboard-only users and screen readers depend on the focus order.

Common Issues

visual order differs from DOM order
custom components are not focusable
elements are skipped
positive tabindex creates confusing order
interactive elements are built with non-semantic div

Best Practices

follow natural DOM order
use semantic elements like button and a
avoid positive tabindex
use tabindex="0" only when needed
make every interactive element keyboard reachable

<form>
  <label>Name</label>
  <input type="text" />

  <label>Email</label>
  <input type="email" />

  <button type="submit">Submit</button>
</form>

<div role="button" tabindex="0">Custom Button</div>

Use native buttons when possible because they already support focus and keyboard behavior.

Keyboard Shortcuts

Keyboard shortcuts allow users to trigger actions quickly without navigating through the full UI.

They are common in:

editors
dashboards
search interfaces
productivity tools

Shortcut = Faster action without mouse navigation

Common Keys

Key	Purpose
Enter	Follow link or trigger button action
Escape	Close modal or stop current action
Tab	Move to next focusable element
Shift + Tab	Move to previous focusable element
Space	Scroll or activate controls
Arrow Keys	Move between related controls like radio buttons

Best Practices

avoid conflicts with browser or system shortcuts
make shortcuts discoverable
provide a way to disable shortcuts
do not override native behavior unnecessarily
support Escape for closing modals or temporary UI

document.addEventListener("keydown", (e) => {
  if (e.ctrlKey && e.key === "k") {
    e.preventDefault();
    openSearchModal();
  }
});

useEffect(() => {
  const handler = (e) => {
    if (e.key === "Escape") {
      closeModal();
    }
  };

  window.addEventListener("keydown", handler);

  return () => window.removeEventListener("keydown", handler);
}, []);

Skip Links

Skip links allow keyboard users to jump directly to the main content.

This helps users avoid repeatedly tabbing through navigation menus.

Skip Link = Jump over repeated navigation

Skip links are especially useful on pages with large headers or many navigation links.

Best Practices

place skip link at the top of the page
show it when focused
link it to main
use semantic landmarks

<a href="#main" class="skip-link">Skip to Main Content</a>

<nav>...</nav>

<main id="main">
  <h1>Content</h1>
</main>

.skip-link {
  position: absolute;
  top: -40px;
}

.skip-link:focus {
  top: 0;
  background: black;
  color: white;
}

Focus Indicator

A focus indicator visually shows which element is currently active during keyboard navigation.

Hover = mouse
Focus = keyboard
Active = current page or pressed state

Without a visible focus indicator, keyboard users cannot know where they are.

Best Practices

never remove focus outline without replacement
use high contrast focus styles
keep states consistent
use aria-current="page" for the active navigation link

<nav>
  <a href="/" aria-current="page">Home</a>
  <a href="/about">About</a>
</nav>

a:focus {
  outline: 3px solid blue;
}

a[aria-current="page"] {
  font-weight: bold;
}

Tab Trapping

Tab trapping keeps focus inside a temporary UI component like a modal.

When a modal opens, focus should stay inside the modal until the modal closes.

Modal open -> focus stays inside modal
Modal close -> focus returns to trigger button

This prevents users from accidentally interacting with background content.

Best Practices

trap focus inside the modal
focus the first interactive element on open
return focus to the trigger on close
support the Escape key
keep tab order logical inside the modal

const focusable = modal.querySelectorAll("button, input, a");

const first = focusable[0];
const last = focusable[focusable.length - 1];

modal.addEventListener("keydown", (e) => {
  if (e.key === "Tab") {
    if (e.shiftKey && document.activeElement === first) {
      e.preventDefault();
      last.focus();
    } else if (!e.shiftKey && document.activeElement === last) {
      e.preventDefault();
      first.focus();
    }
  }
});

In Single Page Applications, route changes do not reload the full page.

Because of that, focus may stay on the old element after navigation.

This can confuse screen reader and keyboard users.

SPA route changes -> focus should move to new page content

Best Practices

move focus to the page heading or main content after navigation
announce page changes when needed
use semantic landmarks like main
keep navigation consistent

import { useEffect, useRef } from "react";
import { useLocation } from "react-router-dom";

function Page() {
  const ref = useRef();
  const location = useLocation();

  useEffect(() => {
    ref.current.focus();
  }, [location]);

  return (
    <main>
      <h1 tabIndex="-1" ref={ref}>
        Dashboard
      </h1>
    </main>
  );
}

tabIndex="-1" allows the heading to receive programmatic focus without adding it to normal tab navigation.