Accessibility Patterns in React

Accessibility is not a package you install after UI is “done.” In React it is correct semantics, keyboard paths, focus management, and announcements for async updates — expressed as components that compose.

Docs: Accessibility — react.dev, WAI-ARIA practices.

Prefer native elements

// Prefer
button type="button" onClick={...}
// over
div onClick={...} role="button" tabIndex={0} onKeyDown={...}

Native controls bring keyboard and SR behavior. If you build a custom widget, implement the full APG pattern (roving tabindex, arrow keys, escape).

Labels and names

function IconButton({ label, onClick }) {
  return (
    <button type="button" onClick={onClick} aria-label={label}>
      <TrashIcon aria-hidden="true" />
    </button>
  );
}

Every interactive control needs an accessible name. Use visible <label> for fields (useId), aria-label when the design is icon-only.

Focus management

When a modal opens, move focus inside; on close, restore to the opener. When a route changes, focus a heading. When a list item is deleted, move focus to a sensible neighbor.

useEffect(() => {
  if (open) {
    closeBtnRef.current?.focus();
  }
}, [open]);

Portals for dialogs still need traps and Escape handling — see portals.

Live regions for async UI

<div aria-live="polite" className="sr-only">
  {status}
</div>

Announce “Saved,” “3 results,” or error text without stealing focus. Prefer polite unless the message is critical.

Keyboard and composition

Pattern	Expectation
Menu	Arrow keys, Home/End, Escape
Tabs	Arrows within tablist; Tab moves to panel
Dialog	Focus trap; Escape closes
Combobox	Arrow + filter + enter

Build these as compound components (children patterns) so consumers cannot forget the wiring.

Interview out-loud

“I start with semantic HTML, wire labels and names, manage focus on open/close and route changes, and use live regions for async status. Custom widgets follow APG keyboard patterns. React-specific tools include useId for SSR-safe ids and portals for dialogs.”

Related on this site

• useId for Accessibility IDs
• Portals
• Forms in React
• Accessible modals

Further reading

• Accessibility — react.dev
• ARIA Authoring Practices Guide

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Related guides

• useCopyToClipboard HookCopy text with navigator.clipboard, fallback execCommand, transient copied state, and permissions that fail in insecure contexts.
• useDebouncedValue HookDebounce a changing value in React without firing effects on every keystroke. Cleanup, leading vs trailing, and the stale timer that updates unmounted state.
• useEventListener HookAttach a window, document, or element listener with a stable handler ref so you do not rebind on every render. Capture option and target changes.
• useFetch With AbortControllerFetch in an effect with a signal, ignore aborted errors, and prevent the slow response from winning a race after the url changes.
• useIdle HookDetect idle users: reset a timer on input events, fire idle after timeout, and decide whether mount starts the timer immediately.