eslint-plugin-jsx-a11y

What is eslint-plugin-jsx-a11y?

The eslint-plugin-jsx-a11y npm package is a collection of accessibility-related rules for ESLint that enforce best practices for accessibility in JSX (most commonly used with React). It helps developers write code that is accessible to users with disabilities by checking for common accessibility errors and suggesting improvements.

What are eslint-plugin-jsx-a11y's main functionalities?

Accessible elements

Ensures interactive elements are accessible. For example, this rule checks that buttons have an accessible name and can be interacted with via keyboard.

<button onClick={this.handleClick}>Click me</button>

Aria roles

Enforces the use of valid ARIA roles and that elements with ARIA roles have the required attributes for that role.

<div role="button" onClick={this.handleRoleClick}>Role Button</div>

Media captions

Ensures media elements such as audio and video have captions or descriptions to aid users who cannot see or hear the content.

<video><track kind="captions" /></video>

No redundant alt text

Prevents the use of redundant alt text in images, which can be frustrating for screen reader users.

<img src="image.jpg" alt="" />

Keyboard accessibility

Ensures that custom interactive elements are focusable and have keyboard event handlers to mimic native interactive elements.

<div tabIndex="0" onKeyDown={this.handleKeyDown}>Focusable Div</div>

Other packages similar to eslint-plugin-jsx-a11y

eslint-plugin-vuejs-accessibility

Similar to eslint-plugin-jsx-a11y, but specifically tailored for Vue.js applications. It provides a set of accessibility rules for Vue.js templates.

eslint-plugin-react

While not exclusively focused on accessibility, eslint-plugin-react includes some rules related to accessibility. It is a broader linting tool for React-specific code practices.

axe-core

Although not an ESLint plugin, axe-core is a library for accessibility testing that can be integrated into testing frameworks. It provides comprehensive accessibility checks that can be run on rendered HTML, complementing the static analysis provided by eslint-plugin-jsx-a11y.

README

eslint-plugin-jsx-a11y

Static AST checker for accessibility rules on JSX elements.

Why?

Ryan Florence built out this awesome runtime-analysis tool called react-a11y. It is super useful. However, since you're probably already using linting in your project, this plugin comes for free and closer to the actual development process. Pairing this plugin with an editor lint plugin, you can bake accessibility standards into your application in real-time.

Note: This project does not replace react-a11y, but can and should be used in conjunction with it. Static analysis tools cannot determine values of variables that are being placed in props before runtime, so linting will not fail if that value is undefined and/or does not pass the lint rule.

Installation

You'll first need to install ESLint:

$ npm i eslint --save-dev

Next, install eslint-plugin-jsx-a11y:

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

Note: If you installed ESLint globally (using the -g flag) then you must also install eslint-plugin-jsx-a11y globally.

Usage

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 rules at once. Add plugin:jsx-a11y/recommended in extends:

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

Supported Rules

• anchor-has-content: Enforce all anchors to contain accessible content.
• aria-props: Enforce all aria-* props are valid.
• aria-proptypes: Enforce ARIA state and property values are valid.
• aria-role: Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role.
• aria-unsupported-elements: Enforce that elements that do not support ARIA roles, states, and properties do not have those attributes.
• click-events-have-key-events: Enforce a clickable non-interactive element has at least one keyboard event listener.
• heading-has-content: Enforce heading (h1, h2, etc) elements contain accessible content.
• href-no-hash: Enforce an anchor element's href prop value is not just #.
• html-has-lang: Enforce <html> element has lang prop.
• img-has-alt: Enforce that <img> JSX elements use the alt prop.
• img-redundant-alt: Enforce <img> alt prop does not contain the word "image", "picture", or "photo".
• label-has-for: Enforce that <label> elements have the htmlFor prop.
• lang: Enforce lang attribute has a valid value.
• mouse-events-have-key-events: Enforce that onMouseOver/onMouseOut are accompanied by onFocus/onBlur for keyboard-only users.
• no-access-key: Enforce that the accessKey prop is not used on any element to avoid complications with keyboard commands used by a screenreader.
• no-marquee: Enforce <marquee> elements are not used.
• no-onchange: Enforce usage of onBlur over onChange on select menus for accessibility.
• no-static-element-interactions: Enforce non-interactive elements have no interactive handlers.
• onclick-has-focus: Enforce that elements with onClick handlers must be focusable.
• onclick-has-role: Enforce that non-interactive, visible elements (such as <div>) that have click handlers use the role attribute.
• role-has-required-aria-props: Enforce that elements with ARIA roles must have all required attributes for that role.
• role-supports-aria-props: Enforce that elements with explicit or implicit roles defined contain only aria-* properties supported by that role.
• scope: Enforce scope prop is only used on <th> elements.
• tabindex-no-positive: Enforce tabIndex value is not greater than zero.

License

eslint-plugin-jsx-a11y is licensed under the MIT License.