JSX-A11Y 项目中的 ARIA 属性校验规则详解

JSX-A11Y 项目中的 ARIA 属性校验规则详解

eslint-plugin-jsx-a11y Static AST checker for a11y rules on JSX elements. 项目地址: https://gitcode.com/gh_mirrors/es/eslint-plugin-jsx-a11y

什么是 ARIA 属性校验规则

在 JSX-A11Y 项目中，aria-props 规则用于确保开发者在 JSX 元素中使用的 ARIA（Accessible Rich Internet Applications）属性都是有效的。该规则会检查所有以 aria- 开头的属性，验证它们是否符合 WAI-ARIA 规范中定义的标准属性和状态。

为什么需要这个规则

ARIA 属性是 Web 可访问性的重要组成部分，它们为辅助技术（如屏幕阅读器）提供了额外的语义信息。然而：

1. 拼写错误：ARIA 属性名称容易拼写错误（如 aria-labeledby 而非正确的 aria-labelledby）
2. 无效属性：开发者可能会使用不存在的 ARIA 属性
3. 规范一致性：确保使用的属性与最新 WAI-ARIA 规范保持一致

这些问题会导致辅助技术无法正确解读页面内容，影响残障用户的使用体验。

规则工作原理

该规则会：

1. 扫描 JSX 元素中的所有属性
2. 识别以 aria- 开头的属性
3. 对照 WAI-ARIA 1.1 规范中的"States and Properties"列表进行验证
4. 报告任何无效或不存在的 ARIA 属性

使用示例

正确示例

<div id="name_label">请输入姓名</div>
<input aria-labelledby="name_label">

这里使用了正确的 aria-labelledby 属性将输入框与标签关联。

错误示例

<div id="name_label">请输入姓名</div>
<input aria-labeledby="name_label">

这里错误地拼写了 aria-labelledby 为 aria-labeledby，规则会报错。

相关可访问性标准

该规则直接对应以下 WCAG（Web Content Accessibility Guidelines）标准：

• WCAG 4.1.2：名称、角色、值 - 对于所有用户界面组件，名称和角色可以通过编程方式确定，用户可以设置的属性值可以通过编程方式设置，且这些项目的通知对用户代理（包括辅助技术）可用。

配置建议

该规则已包含在项目的 recommended 和 strict 配置中，建议所有重视可访问性的项目都启用它。由于规则不需要任何参数，启用非常简单：

{
  "rules": {
    "jsx-a11y/aria-props": "error"
  }
}

开发注意事项

1. 动态 ARIA 属性：如果使用动态生成的 ARIA 属性名，可能需要禁用该规则或添加例外
2. 自定义元素：对于自定义的 Web 组件，确保它们使用的 ARIA 属性也是标准的
3. 新版本更新：随着 WAI-ARIA 规范的更新，规则也会相应更新支持的属性列表

总结

aria-props 规则是 JSX-A11Y 项目中保障 ARIA 属性正确使用的重要工具。通过静态分析，它能在开发阶段就捕获潜在的 ARIA 属性问题，避免这些错误影响到最终用户的可访问性体验。对于任何使用 React 且关注无障碍访问的项目，都应该考虑启用这一规则。

eslint-plugin-jsx-a11y Static AST checker for a11y rules on JSX elements. 项目地址: https://gitcode.com/gh_mirrors/es/eslint-plugin-jsx-a11y