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

Readme

Source

A static analysis linter of jsx and its accessibility to all users.

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
    }
}

Supported Rules

img-uses-alt: Enforce that img jsx elements use the alt attribute.
onClick-uses-role: Enforce that non-interactive, visible elements (such as div) that have click handlers use the role attribute.
mouseEvents-require-keyEvents: Enforce that onMouseOver/onMouseOut are accompanied by onFocus/onBlur for strictly keyboard users.
use-onblur-not-onchange: Enforce that onBlur is used instead of onChange.
no-access-key: Enforce that the accessKey prop is not used on any element to avoid complications with keyboard commands used by a screenreader.
use-label-for: Enforce that label elements have the htmlFor attribute

Keywords

FAQs

What is eslint-plugin-jsx-a11y?

Is eslint-plugin-jsx-a11y popular?

Is eslint-plugin-jsx-a11y well maintained?

Last updated on 29 Feb 2016

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install