// ❌ A div pretending to be a button gives screen readers and keyboard users nothing to work with
<div onClick={handleClick}>Submit</div>

// ✅ A real button is focusable, keyboard-operable, and announced correctly by screen readers automatically
<button onClick={handleClick}>Submit</button>

The single highest-impact accessibility practice is simply using the correct native HTML element for the job — <button> for actions, <nav> for navigation, <main> for primary content — rather than generic <div>s with click handlers attached. Browsers and assistive technology already understand these elements' roles for free.

function LoginForm() {
  return (
    <form>
      <label htmlFor="email">Email Address</label>
      <input id="email" type="email" />

      <button type="submit">Log In</button>
    </form>
  );
}

Connecting a <label> to its input via matching htmlFor / id attributes lets screen readers announce what each field is for, and lets users click the label text itself to focus the input — a form with only placeholder text and no real labels is a very common, easily fixed accessibility failure.

function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-title"
    >
      <h2 id="modal-title">Confirm Action</h2>
      {children}
      <button onClick={onClose} aria-label="Close dialog">✕</button>
    </div>
  );
}

ARIA (Accessible Rich Internet Applications) attributes fill gaps HTML alone can't express — role="dialog" and aria-modal="true" tell assistive technology this <div> behaves like a modal window, and aria-label gives an icon-only button (✕) a meaningful name for screen readers, since there's no visible text to announce otherwise.

import { useRef, useEffect } from "react";

function Modal({ isOpen }) {
  const closeButtonRef = useRef(null);

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

  return <button ref={closeButtonRef}>Close</button>;
}

When a modal opens, moving keyboard focus into it (using useRef, from Chapter 20) is essential for keyboard-only users, who would otherwise have no idea the modal even appeared. Separately, ensure sufficient color contrast between text and its background — light gray text on a white background may look elegant but is genuinely unreadable for many users with low vision.