Common React Accessibility Mistakes and How to Fix Them

The most common React accessibility mistakes come from skipping native elements, hiding labels, and leaving focus unmanaged. Each mistake has a small, specific fix that restores the experience for keyboard and screen reader users.

Clickable divs instead of buttons

A div with an onClick handler is the most frequent mistake. It cannot receive keyboard focus, does not announce itself as a button, and does not respond to Enter or Space. The same applies to spans and other generic elements styled to look clickable.

App.jsx

function MenuToggle({ openMenu }) {
  return <button onClick={openMenu}>Open menu</button>;
}

A real button does all of that for free, and it can report a pressed state or be disabled, which a div cannot express. The full comparison of interactive elements is in How to Make Clickable Elements Accessible in React.

Placeholder-only labels

A placeholder disappears as soon as the user types, so it cannot serve as a field's name. The same applies to an aria-label that is missing or mismatched.

Give every input a label. A wrapping label is the simplest form, and it makes the name visible to everyone, not only to screen readers.

App.jsx

function Search() {
  return (
    <label>
      Search
      <input type="search" name="query" />
    </label>
  );
}

When a label is hidden on purpose, an aria-label on the input preserves the accessible name, but that leaves sighted users without a visible name, so a real label is still better. Either way, the field must announce what it is.

Missing or wrong alt text

An image needs an alt attribute that describes its purpose. A product photo should describe the product; a decorative icon should use an empty alt so the screen reader skips it. A missing alt turns the image into an unlabeled control, and a wrong alt misleads the user about what is on the screen.

Writing alt text is a judgment call: describe what the image communicates in context, not a literal list of everything in it. When an image is purely decorative, an empty string is correct, because announcing it would add noise. A chart image needs an alt that summarizes the trend, while an icon inside a button can be decorative because the button text already names it.

Color-only indicators

An error message shown only in red is invisible to color-blind users and to screen readers. State must be communicated with text as well as color. The same applies to success and loading states, which are often shown only through a background tint.

Pair the color with a text message and, for live changes, an accessible announcement. An icon or a text label next to the red text also makes the state readable without color. The pattern for validation messages is in How to Build Accessible Form Errors in React.

Unmanaged focus in dialogs

When a modal opens, focus stays on the button that opened it, so a keyboard user is lost outside the dialog. When it closes, focus must return to that same button.

Move focus to the dialog on open, trap it inside while open, and restore it on close. A simple rule is that focus should never sit on a removed element or behind an overlay. Implementing this by hand is fiddly, which is why How to Build an Accessible React Modal with Portals walks through it step by step.

Verify with a keyboard

After each fix, tab through the component and confirm every control is reachable, visible, and operable. Automated tools find missing labels and alt text, but focus order and color-only state still need a human pass.

Open the component in a browser, put down the mouse, and try to finish the main task. If any step is impossible or confusing, that is an accessibility bug worth fixing before the next feature.