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

• Avoid Prop Drilling with CompositionStop threading props through intermediates: children slots, inversion of control, and when context is the right escape hatch.
• Batching State UpdatesHow React 18+ batches setState in events, timeouts, and promises: when updates flush and why double setState still works.
• Children Prop PatternsUsing children and slot props for flexible APIs: wrappers, compound components, and when to prefer explicit props.
• Client Component BoundariesWhere to put use client: push interactivity to leaves, serializable props, and children as server slots.
• Client Routing Mental ModelClient-side routing updates the URL and UI without full reloads: history API, link interception, and data loading.