eslint-plugin-jsx-a11y weekly downloads statistics

<p align="center"> <a href="https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/actions"> <img src="https://img.shields.io/endpoint?url=https://github-actions-badge-u3jn4tfpocch.runkit.sh/jsx-eslint/eslint-plugin-jsx-a11y" alt="CI status" /> </a> <a href="https://npmjs.org/package/eslint-plugin-jsx-a11y"> <img src="https://img.shields.io/npm/v/eslint-plugin-jsx-a11y.svg" alt="npm version"> </a> <a href="https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/LICENSE.md"> <img src="https://img.shields.io/npm/l/eslint-plugin-jsx-a11y.svg" alt="license"> </a> <a href='https://coveralls.io/github/jsx-eslint/eslint-plugin-jsx-a11y?branch=master'> <img src='https://coveralls.io/repos/github/jsx-eslint/eslint-plugin-jsx-a11y/badge.svg?branch=master' alt='Coverage Status' /> </a> <a href='https://npmjs.org/package/eslint-plugin-jsx-a11y'> <img src='https://img.shields.io/npm/dt/eslint-plugin-jsx-a11y.svg' alt='Total npm downloads' /> </a> </p>

<a href='https://tidelift.com/subscription/pkg/npm-eslint-plugin-jsx-a11y?utm_source=npm-eslint-plugin-jsx-a11y&utm_medium=referral&utm_campaign=readme'>Get professional support for eslint-plugin-jsx-a11y on Tidelift</a>

eslint-plugin-jsx-a11y

Static AST checker for accessibility rules on JSX elements.

Read this in other languages.

Mexican Spanish🇲🇽

Why?

This plugin does a static evaluation of the JSX to spot accessibility issues in React apps. Because it only catches errors in static code, use it in combination with @axe-core/react to test the accessibility of the rendered DOM. Consider these tools just as one step of a larger a11y testing process and always test your apps with assistive technology.

Installation

If you are installing this plugin via eslint-config-airbnb, please follow these instructions.

You'll first need to install ESLint:

# npm
npm install eslint --save-dev

# yarn
yarn add eslint --dev

Next, install eslint-plugin-jsx-a11y:

# npm
npm install eslint-plugin-jsx-a11y --save-dev

# yarn
yarn add eslint-plugin-jsx-a11y --dev

Note: If you installed ESLint globally (using the -g flag in npm, or the global prefix in yarn) then you must also install eslint-plugin-jsx-a11y globally.

<a id="usage"></a>

Usage - Legacy Config (.eslintrc)

Add jsx-a11y to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
  "plugins": ["jsx-a11y"]
}

Then configure the rules you want to use under the rules section.

{
  "rules": {
    "jsx-a11y/rule-name": 2
  }
}

You can also enable all the recommended or strict rules at once. Add plugin:jsx-a11y/recommended or plugin:jsx-a11y/strict in extends:

{
  "extends": ["plugin:jsx-a11y/recommended"]
}

Configurations

As you are extending our configuration, you can omit "plugins": ["jsx-a11y"] from your .eslintrc configuration file.

{
  "settings": {
    "jsx-a11y": {
      "polymorphicPropName": "as",
      "components": {
        "CityInput": "input",
        "CustomButton": "button",
        "MyButton": "button",
        "RoundButton": "button"
      },
      "attributes": {
        "for": ["htmlFor", "for"]
      }
    }
  }
}

Usage - Flat Config (eslint.config.js)

The default export of eslint-plugin-jsx-a11y is a plugin object.

const jsxA11y = require('eslint-plugin-jsx-a11y');

module.exports = [
  …
  {
    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
    plugins: {
      'jsx-a11y': jsxA11y,
    },
    languageOptions: {
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    rules: {
      // ... any rules you want
      'jsx-a11y/alt-text': 'error',
    },
    // ... others are omitted for brevity
  },
  …
];

Shareable Configs

There are two shareable configs, provided by the plugin.

• flatConfigs.recommended
• flatConfigs.strict

CJS

const jsxA11y = require('eslint-plugin-jsx-a11y');

export default [
  jsxA11y.flatConfigs.recommended,
  {
    // Your additional configs and overrides
  },
];

ESM

import jsxA11y from 'eslint-plugin-jsx-a11y';

export default [
  jsxA11y.flatConfigs.recommended,
  {
    // Your additional configs and overrides
  },
];

Note: Our shareable configs do NOT configure files or languageOptions.globals. For most of the cases, you probably want to configure some of these properties yourself.

const jsxA11y = require('eslint-plugin-jsx-a11y');
const globals = require('globals');

module.exports = [
  …
  {
    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
    ...jsxA11y.flatConfigs.recommended,
    languageOptions: {
      ...jsxA11y.flatConfigs.recommended.languageOptions,
      globals: {
        ...globals.serviceworker,
        ...globals.browser,
      },
    },
  },
  …
];

Component Mapping

To enable your custom components to be checked as DOM elements, you can set global settings in your configuration file by mapping each custom component name to a DOM element type.

Attribute Mapping…