React › Accessibility (a11y) in React

What tools can you use to check accessibility issues in a React app?

Beginner

Answer

The eslint plugin jsx a11y catches common accessibility mistakes right inside your code editor while you type. The axe DevTools browser extension and Lighthouse in Chrome scan a running page and list real accessibility problems along with clear suggestions on how to fix each one.

// .eslintrc.js
module.exports = {
  extends: ['plugin:jsx-a11y/recommended'],
};

// This will now show a warning during development:
// <img src="logo.png" /> // missing alt text

Real-world example A team adds the jsx a11y eslint plugin to their project so that any pull request adding an image without alt text fails automatically before it ever reaches production.

Common follow-ups: How does automated accessibility testing differ from testing with a real screen reader?;What accessibility score does Lighthouse usually flag first for a new React project?

Testing;Build Tools & Bundlers (Vite Webpack & CRA)