Static AST checker for accessibility rules on JSX elements.
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.
You'll first need to install ESLint:
$ npm i eslint --save-devNext, install eslint-plugin-jsx-a11y:
$ npm install eslint-plugin-jsx-a11y --save-devNote: If you installed ESLint globally (using the -g flag) then you must also install eslint-plugin-jsx-a11y globally.
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
}
}- 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.
- heading-has-content: Enforce heading (
h1,h2, etc) elements contain accessible content. - href-no-hash: Enforce an anchor element's
hrefprop value is not just#. - html-has-lang: Enforce
<html>element haslangprop. - img-has-alt: Enforce that
<img>JSX elements use thealtprop. - img-redundant-alt: Enforce
<img>alt prop does not contain the word "image", "picture", or "photo". - label-has-for: Enforce that
<label>elements have thehtmlForprop. - lang: Enforce lang attribute has a valid value.
- mouse-events-have-key-events: Enforce that
onMouseOver/onMouseOutare accompanied byonFocus/onBlurfor keyboard-only users. - no-access-key: Enforce that the
accessKeyprop 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 that
onBluris used instead ofonChange. - onclick-has-focus: Enforce that elements with
onClickhandlers 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 thatrole. - scope: Enforce
scopeprop is only used on<th>elements. - tabindex-no-positive: Enforce
tabIndexvalue is not greater than zero.
eslint-plugin-jsx-a11y is licensed under the MIT License.