How do you build accessible React interfaces?

React does not make an interface accessible by itself. The browser's built-in elements already provide roles, keyboard behaviour and focus semantics. A <button> handles Enter and Space; a clickable <div> does not. Use the native element first and add ARIA only when no native element expresses the pattern.

function SignupForm({ onSubmit }) {
  const [error, setError] = useState("");

  return (
    <form onSubmit={onSubmit}>
      <label htmlFor="email">Email address</label>
      <input
        id="email"
        name="email"
        type="email"
        aria-invalid={Boolean(error)}
        aria-describedby={error ? "email-error" : undefined}
      />
      {error && (
        <p id="email-error" role="alert">
          {error}
        </p>
      )}
      <button type="submit">Create account</button>
    </form>
  );
}

The essentials

• Use headings, lists, buttons, links and form elements for their intended purpose
• Associate every input with a visible label using htmlFor and id
• Make all actions reachable and operable with a keyboard
• Manage focus when opening dialogs, changing routes or revealing content
• Do not remove focus outlines without providing an equally visible replacement
• Meet colour-contrast requirements and do not rely on colour alone

For dynamic content, use a live region such as role="status" for polite updates and role="alert" for urgent errors. For a modal, trap focus while it is open, close on Escape, label it with aria-labelledby, and restore focus to the trigger when it closes.