Hussein Oyelaja — Design Engineer
FrontendFeatured

Building Accessible React Components

Practical patterns for making React UIs work for keyboard users, screen readers, and everyone in between.

Hussein OyelajaDesign Engineer
6 min read
  • React
  • Accessibility
  • TypeScript
Building Accessible React Components — blog cover

Summary

Accessible React components start with semantic HTML, predictable keyboard behavior, and manual testing with screen readers — not last-minute ARIA patches.

Key takeaways

  • Use native HTML elements before adding ARIA attributes.
  • Keep keyboard focus managed inside dialogs and overlays.
  • Test tab order, focus visibility, screen reader labels, and contrast.

Accessibility is not a checklist you run at the end of a sprint. It is a design constraint that shapes how components behave from the first commit.

Start with semantic HTML

Before reaching for ARIA, use the right native element. Buttons for actions, links for navigation, and headings in order. React makes it easy to abstract everything into divs — resist that urge.

A reusable focus trap for modals

When a dialog opens, keyboard focus should stay inside it until the user dismisses it. Here is a minimal pattern:

tsx

function Modal({ open, onClose, children }: ModalProps) {
  const dialogRef = useRef<HTMLDialogElement>(null);

  useEffect(() => {
    if (!open) return;
    dialogRef.current?.showModal();
  }, [open]);

  return (
    <dialog ref={dialogRef} onClose={onClose}>
      {children}
    </dialog>
  );
}

What to test manually

  • Tab through every interactive element in logical order
  • Verify visible focus styles on all controls
  • Use VoiceOver or NVDA to confirm labels and live regions
  • Check color contrast for text and focus rings

Ship components that work without a mouse first. Everything else — animation, hover states, micro-interactions — builds on that foundation.