🌟 什么是 eslint-plugin-jsx-a11y？

Source: Dev.to

什么是 eslint‑plugin‑jsx‑a11y？

它是一个 ESLint 插件，能够对你的 JSX 代码进行静态分析，以识别并应用一套可访问性规则。它帮助在代码渲染到浏览器之前就发现潜在问题。

为什么它很重要？

该插件帮助防止常见的可访问性错误，这些错误可能会把有障碍的用户排除在外。将 a11y 集成到 lint 流程中，你可以：

• 预防式开发 – 在编写代码时就修复问题，比事后修复要高效得多。
• 持续教育 – 充当指南，教会你 React/JSX 元素的最佳可访问性实践。
• 合规性 – 帮助代码遵循重要的可访问性规范，如 WCAG（Web Content Accessibility Guidelines）。

它能检测的典型问题

• img 没有 alt – 当图片缺少 alt（替代文本）属性时发出警告，这对屏幕阅读器至关重要。
• onClick 没有 onKeyPress/onKeyDown – 检查使用 onClick 的交互元素是否也能通过键盘触发。
• 表单控件没有关联的 label – 确保 input 等控件正确绑定到 <label> 元素（使用 htmlFor）。
• ARIA 属性使用错误 – 验证 aria- 属性的语法和使用方式。
• 链接 (<a>) 没有可见内容 – 检查链接是否包含文本或 ARIA 描述。

与其他工具的配合

需要注意的是，eslint-plugin-jsx-a11y 只对源代码（JSX）进行静态分析，它并不会测试页面最终渲染的 HTML。

因此，它通常与运行时可访问性测试工具一起使用，例如：

• react‑axe (或 @axe‑core/react) – 审计最终的 DOM。
• jest‑axe – 在渲染后进行单元测试的可访问性检查。

总结： eslint-plugin-jsx-a11y 是确保可访问性成为 React 开发流程中不可或缺的一环的第一道防线。