Logo
  • DB
  • About
  • Updates
eslint-plugin-jsx-a11y

Static AST checker for accessibility rules on JSX elements.

❯ npm i --save-dev eslint-plugin-jsx-a11y
📖 README🐛 BugsGitHub LogoGitHubnpm Logonpmreactreact-dom
🕵️‍♂️ Linter
  • 2 Configs
  • 39 Rules
GitHub LogoGitHub
  • JavaScript
  • 3.3K Stars
  • 48 Watchers
npm Logonpm
  • 7.2M Wkly Downloads
  • +41% WoW
  • 6.8.0 739 kB
📋 Requirements
  • Node: >=4
  • ESLint: ^3 || ^4 || ^5 || ...
🗂️ Keywords
  • accessibility
  • aria
  • react
ConfigurationRules
recommended31 error • 3 off
🔒 strict31 error • 2 off
RuleDescription🔧💡💭🗂️⚙️🔒
accessible-emoji

Enforce emojis are wrapped in <span> and provide screenreader access.

alt-text

Enforce all elements that require alternative text have meaningful information to relay back to end user.

⚙️🔒
anchor-ambiguous-text

Enforce <a> text to not exactly match "click here", "here", "link", or "a link".

⚙️🚫
anchor-has-content

Enforce all anchors to contain accessible content.

⚙️🔒
anchor-is-valid

Enforce all anchors are valid, navigable elements.

⚙️🔒
aria-activedescendant-has-tabindex

Enforce elements with aria-activedescendant are tabbable.

🔒
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.

🔒
autocomplete-valid

Enforce that autocomplete attributes are used correctly.

⚙️🔒
click-events-have-key-events

Enforce a clickable non-interactive element has at least one keyboard event listener.

🔒
control-has-associated-label

Enforce that a control (an interactive element) has a text label.

⚙️🚫🚫
heading-has-content

Enforce heading (h1, h2, etc) elements contain accessible content.

⚙️🔒
html-has-lang

Enforce <html> element has lang prop.

🔒
iframe-has-title

Enforce iframe elements have a title attribute.

🔒
img-redundant-alt

Enforce <img> alt prop does not contain the word "image", "picture", or "photo".

⚙️🔒
interactive-supports-focus

Enforce that elements with interactive handlers like onClick must be focusable.

⚙️🔒
label-has-associated-control

Enforce that a label tag has a text label and an associated control.

⚙️🔒
label-has-for

Enforce that <label> elements have the htmlFor prop.

⚙️🚫🚫
lang

Enforce lang attribute has a valid value.

media-has-caption

Enforces that <audio> and <video> elements must have a <track> for captions.

⚙️🔒
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-aria-hidden-on-focusable

Disallow aria-hidden="true" from being set on focusable elements.

no-autofocus

Enforce autoFocus prop is not used.

⚙️🔒
no-distracting-elements

Enforce distracting elements are not used.

⚙️🔒
no-interactive-element-to-noninteractive-role

Interactive elements should not be assigned non-interactive roles.

🔒
no-noninteractive-element-interactions

Non-interactive elements should not be assigned mouse or keyboard event listeners.

⚙️🔒
no-noninteractive-element-to-interactive-role

Non-interactive elements should not be assigned interactive roles.

🔒
no-noninteractive-tabindex

tabIndex should only be declared on interactive elements.

⚙️🔒
no-onchange

Enforce usage of onBlur over onChange on select menus for accessibility.

no-redundant-roles

Enforce explicit role property is not the same as implicit/default role property on element.

🔒
no-static-element-interactions

Enforce that non-interactive, visible elements (such as <div>) that have click handlers use the role attribute.

⚙️🔒
prefer-tag-over-role

Enforces using semantic DOM elements over the ARIA role property.

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.

🔒
© 2024 Lintbase