如果您通过 安装此插件eslint-config-airbnb
,请按照这些说明进行操作。
您首先需要安装ESLint:
1# npm
2npm install eslint --save-dev
3# yarn
4yarn add eslint --dev
接下来,安装eslint-plugin-jsx-a11y
:
1# npm
2npm install eslint-plugin-jsx-a11y --save-dev
3# yarn
4yarn add eslint-plugin-jsx-a11y --dev
**注意:**如果你全局安装了 ESLint(使用-g
npm 中的标志,或者global
yarn 中的前缀),那么你也必须eslint-plugin-jsx-a11y
全局安装。
用法
添加jsx-a11y
到.eslintrc
配置文件的插件部分。您可以省略eslint-plugin-
前缀:
1{
2"plugins":["jsx-a11y"]
3}
然后在规则部分配置您要使用的规则。
1{
2"rules":{
3"jsx-a11y/rule-name":2
4 }
5}
您还可以一次启用所有推荐的或严格的规则。添加plugin:jsx-a11y/recommended
或plugin:jsx-a11y/strict
输入extends
:
1{
2"extends":["plugin:jsx-a11y/recommended"]
3}
支持的规则
-
<span>
access -emoji:强制表情符号被包裹并提供屏幕阅读器访问。 -
alt-text:强制所有需要替代文本的元素都具有有意义的信息以传递回最终用户。
-
anchor-has-content:强制所有锚点包含可访问的内容。
-
anchor-is-valid:强制所有锚点都是有效的、可导航的元素。
-
aria-activedescendant-has-tabindex:使用 aria-activedescendant 强制元素是可选项卡的。
-
aria-props:强制所有
aria-*
道具都有效。 -
aria-proptypes:强制 ARIA 状态和属性值有效。
-
aria-role:强制具有 ARIA 角色的元素必须使用有效的、非抽象的 ARIA 角色。
-
aria-unsupported-elements:强制不支持 ARIA 角色、状态和属性的元素不具有这些属性。
-
autocomplete-valid:强制正确使用自动完成属性。
-
click-events-have-key-events:强制一个可点击的非交互式元素至少有一个键盘事件监听器。
-
标题-具有含量:实施标题(
h1
,h2
等)元素包含可访问的内容。 -
html-has-lang:强制
<html>
元素有lang
道具。 -
iframe-has-title:强制 iframe 元素具有标题属性。
-
img-redundant-alt:强制
<img>
alt 道具不包含“图像”、“图片”或“照片”一词。 -
Interactive-supports-focus:强制具有交互式处理程序的元素
onClick
必须是可聚焦的。 -
label-has-related-control:强制
label
标签具有文本标签和关联控件。 -
lang:强制 lang 属性具有有效值。
-
媒体有字幕:强制执行
<audio>
和<video>
元素必须有一个<track>
为字幕。 -
mouse-events-have-key-events:强制
onMouseOver
/onMouseOut
伴随onFocus
/onBlur
仅用于键盘用户。 -
no-access-key:强制
accessKey
不在任何元素上使用该道具,以避免屏幕阅读器使用的键盘命令出现复杂情况。 -
no-autofocus:不使用强制自动对焦道具。
-
no-distracting-elements:强制不使用分散注意力的元素。
-
no-interactive-element-to-noninteractive-role:不应为交互元素分配非交互角色。
-
no-noninteractive-element-interactions:不应为非交互式元素分配鼠标或键盘事件侦听器。
-
no-noninteractive-element-to-interactive-role:不应为非交互式元素分配交互式角色。
-
no-noninteractive-tabindex:
tabIndex
应该只在交互式元素上声明。 -
no-onchange:为了可访问性
onBlur
,onChange
在选择菜单上强制使用over 。 -
no-redundant-roles:强制显式角色属性与元素上的隐式/默认角色属性不同。
-
no-static-element-interactions:强制
<div>
具有单击处理程序的非交互式可见元素(例如)使用 role 属性。 -
role-has-required-aria-props:强制具有 ARIA 角色的元素必须具有该角色的所有必需属性。
-
role-supports-aria-props:强制定义具有显式或隐式角色的元素仅包含
aria-*
该支持的属性role
。 -
scope : Enforce
scope
prop 仅用于<th>
元素。 -
tabindex-no-positive:强制
tabIndex
值不大于零。