Get professional support for eslint-plugin-jsx-a11y on Tidelift # eslint-plugin-jsx-a11y Static AST checker for accessibility rules on JSX elements. #### _Read this in [other languages](https://github.com/ari-os310/eslint-plugin-jsx-a11y/blob/HEAD/translations/Translations.md)._ [Mexican Spanish🇲🇽](https://github.com/ari-os310/eslint-plugin-jsx-a11y/blob/HEAD/translations/README.mx.md) ## 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](https://github.com/dequelabs/axe-core-npm/tree/develop/packages/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](https://github.com/airbnb/javascript/tree/HEAD/packages/eslint-config-airbnb#eslint-config-airbnb-1).** You'll first need to install [ESLint](https://eslint.org/docs/latest/user-guide/getting-started): ```sh # npm npm install eslint --save-dev # yarn yarn add eslint --dev ``` Next, install `eslint-plugin-jsx-a11y`: ```sh # 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. ## Usage - Legacy Config (`.eslintrc`) Add `jsx-a11y` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix: ```json { "plugins": ["jsx-a11y"] } ``` Then configure the rules you want to use under the rules section. ```json { "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`: ```json { "extends": ["plugin:jsx-a11y/recommended"] } ``` ### Configurations > As you are extending our configuration, you can omit `"plugins": ["jsx-a11y"]` from your `.eslintrc` configuration file. ```json { "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. ```js 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 ```js const jsxA11y = require('eslint-plugin-jsx-a11y'); export default [ jsxA11y.flatConfigs.recommended, { // Your additional configs and overrides }, ]; ``` #### ESM ```js 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`](https://eslint.org/docs/latest/user-guide/configuring/configuration-files-new#configuration-objects). For most of the cases, you probably want to configure some of these properties yourself. ```js 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 To configure the JSX property to use for attribute checking, you can set global settings in your configuration file by mapping each DOM attribute to the JSX property you want to check. For example, you may want to allow the `for` attribute in addition to the `htmlFor` attribute for checking label associations. #### Polymorphic Components You can optionally use the `polymorphicPropName` setting to define the prop your code uses to create polymorphic components. This setting will be used determine the element type in rules that require semantic context. For example, if you set the `polymorphicPropName` setting to `as` then this element: `Configurations ` will be evaluated as an `h3`. If no `polymorphicPropName` is set, then the component will be evaluated as `Box`. To restrict polymorphic linting to specified components, additionally set `polymorphicAllowList` to an array of component names. ⚠️ Polymorphic components can make code harder to maintain; please use this feature with caution. ## Supported Rules 💼 Configurations enabled in.\ 🚫 Configurations disabled in.\ ☑️ Set in the `recommended` configuration.\ 🔒 Set in the `strict` configuration.\ ❌ Deprecated. | Name | Description | 💼 | 🚫 | ❌ | | :----------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------- | :---- | :---- | :- | | [accessible-emoji](docs/rules/accessible-emoji.md) | Enforce emojis are wrapped in `` and provide screenreader access. | | | ❌ | | [alt-text](docs/rules/alt-text.md) | Enforce all elements that require alternative text have meaningful information to relay back to end user. | ☑️ 🔒 | | | | [anchor-ambiguous-text](docs/rules/anchor-ambiguous-text.md) | Enforce `` text to not exactly match "click here", "here", "link", or "a link". | | ☑️ | | | [anchor-has-content](docs/rules/anchor-has-content.md) | Enforce all anchors to contain accessible content. | ☑️ 🔒 | | | | [anchor-is-valid](docs/rules/anchor-is-valid.md) | Enforce all anchors are valid, navigable elements. | ☑️ 🔒 | | | | [aria-activedescendant-has-tabindex](docs/rules/aria-activedescendant-has-tabindex.md) | Enforce elements with aria-activedescendant are tabbable. | ☑️ 🔒 | | | | [aria-props](docs/rules/aria-props.md) | Enforce all `aria-*` props are valid. | ☑️ 🔒 | | | | [aria-proptypes](docs/rules/aria-proptypes.md) | Enforce ARIA state and property values are valid. | ☑️ 🔒 | | | | [aria-role](docs/rules/aria-role.md) | Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role. | ☑️ 🔒 | | | | [aria-unsupported-elements](docs/rules/aria-unsupported-elements.md) | Enforce that elements that do not support ARIA roles, states, and properties do not have those attributes. | ☑️ 🔒 | | | | [autocomplete-valid](docs/rules/autocomplete-valid.md) | Enforce that autocomplete attributes are used correctly. | ☑️ 🔒 | | | | [click-events-have-key-events](docs/rules/click-events-have-key-events.md) | Enforce a clickable non-interactive element has at least one keyboard event listener. | ☑️ 🔒 | | | | [control-has-associated-label](docs/rules/control-has-associated-label.md) | Enforce that a control (an interactive element) has a text label. | | ☑️ 🔒 | | | [heading-has-content](docs/rules/heading-has-content.md) | Enforce heading (`h1`, `h2`, etc) elements contain accessible content. | ☑️ 🔒 | | | | [html-has-lang](docs/rules/html-has-lang.md) | Enforce `` element has `lang` prop. | ☑️ 🔒 | | | | [iframe-has-title](docs/rules/iframe-has-title.md) | Enforce iframe elements have a title attribute. | ☑️ 🔒 | | | | [img-redundant-alt](docs/rules/img-redundant-alt.md) | Enforce `` alt prop does not contain the word "image", "picture", or "photo". | ☑️ 🔒 | | | | [interactive-supports-focus](docs/rules/interactive-supports-focus.md) | Enforce that elements with interactive handlers like `onClick` must be focusable. | ☑️ 🔒 | | | | [label-has-associated-control](docs/rules/label-has-associated-control.md) | Enforce that a `label` tag has a text label and an associated control. | ☑️ 🔒 | | | | [label-has-for](docs/rules/label-has-for.md) | Enforce that `` elements have the `htmlFor` prop. | | ☑️ 🔒 | ❌ | | [lang](docs/rules/lang.md) | Enforce lang attribute has a valid value. | | | | | [media-has-caption](docs/rules/media-has-caption.md) | Enforces that `

			Stars	Issues	Version	Updated	Created	Size
	eslint-plugin-import		5,467	609	2.30.0	17 days ago	10 years ago
	eslint-plugin-jsx-a11y		3,386	104	6.10.0	16 days ago	9 years ago

eslint-plugin-import vs eslint-plugin-jsx-a11y

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past