JSX a11y
An ESLint plugin that statically analyzes JSX to enforce accessibility (a11y) rules in React applications.
What is JSX a11y?
eslint-plugin-jsx-a11y is an ESLint plugin that statically analyzes JSX code to enforce accessibility rules. It helps developers identify and fix common accessibility issues in React applications during development, such as missing alt text, improper ARIA usage, and keyboard navigation problems. The plugin integrates directly into the ESLint workflow, providing immediate feedback as code is written.
Frontend developers and teams building React applications who need to ensure their UIs are accessible to users with disabilities. It's particularly valuable for projects with strict accessibility requirements or those following compliance standards like WCAG.
Developers choose eslint-plugin-jsx-a11y because it provides a comprehensive, configurable set of accessibility rules specifically for JSX, integrates seamlessly with ESLint, and catches issues early in the development cycle. Its static analysis approach is fast and doesn't require running the application, making it ideal for CI/CD pipelines and pre-commit hooks.
Overview
Static AST checker for a11y rules on JSX elements.
Use Cases
Best For
- Enforcing accessibility standards in React codebases during development
- Catching missing alt text, ARIA attributes, and semantic HTML violations in JSX
- Integrating a11y checks into CI/CD pipelines and pre-commit hooks
- Educating developers on common accessibility pitfalls in React
- Maintaining consistent accessibility practices across large React teams
- Preventing runtime accessibility errors through static analysis
Not Ideal For
- Projects primarily using non-JSX frameworks like Vue or Svelte with their own accessibility linting
- Applications where dynamic, runtime accessibility issues are the main concern, as it only performs static analysis
- Teams with highly abstracted component libraries unwilling to configure custom mappings for accurate linting
- Environments where ESLint integration is prohibited or not feasible due to legacy toolchains
Pros & Cons
Pros
Offers over 40 rules targeting ARIA attributes, semantic HTML, and keyboard navigation, as detailed in the README's rule table, ensuring wide accessibility checks.
Uses AST analysis to flag issues during development without running code, promoting faster fixes and reducing runtime errors.
Supports both 'recommended' and 'strict' presets for easy adoption, plus custom component and polymorphic prop mapping for tailored setups.
Works with legacy .eslintrc and modern flat config (eslint.config.js) formats, ensuring integration with current ESLint ecosystems.
Cons
Cannot detect runtime accessibility problems like dynamic content changes or focus management, necessitating additional tools like @axe-core/react as noted in the README.
Configuration for polymorphic components (e.g., 'as' prop) adds overhead and can make code harder to maintain, with the README cautioning about this trade-off.
Relies entirely on ESLint and JSX; projects without these or using alternative linters may find integration cumbersome or irrelevant.
Frequently Asked Questions
Related Projects
React HooksThe library for web and native user interfaces.
MeteorMeteor, the JavaScript App Platform
ReactReact-specific linting rules for ESLint
VueJSOfficial ESLint plugin for Vue.js
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.