JSX-A11Y 规则解析：禁止交互元素使用非交互角色

JSX-A11Y 规则解析：禁止交互元素使用非交互角色

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

什么是交互元素与非交互元素

在Web开发中，HTML元素根据其功能特性可以分为交互元素和非交互元素两大类：

交互元素是指那些用户可以与之互动的控件元素，常见的包括：

• <a>（带有href属性）
• <button>
• <input>
• <select>
• <textarea>

非交互元素则主要用于展示内容和构建页面结构，例如：

• <main>
• <h1>到<h6>等标题元素
• <img>
• <li>, <ul>, <ol>等列表元素

为什么需要这条规则

no-interactive-element-to-noninteractive-role规则的核心目的是防止开发者错误地将交互性元素赋予非交互性的ARIA角色，这会导致可访问性问题。

ARIA（无障碍富互联网应用）角色用于增强HTML元素的无障碍特性，但错误使用会适得其反。例如，给<button>元素添加role="img"角色，虽然技术上可行，但会混淆屏幕阅读器用户，因为按钮的交互特性与图像的静态特性相冲突。

常见问题场景与解决方案

场景一：需要将交互元素作为内容容器

错误做法：

<button role="article">
  保存文章
</button>

正确做法： 将交互元素包裹在具有适当角色的容器中：

<div role="article">
  <button>保存文章</button>
</div>

场景二：需要在交互元素中展示非交互内容

错误做法：

<button role="img" aria-label="保存图标">
  保存
</button>

正确做法： 将非交互内容放在交互元素内部：

<button onClick={handleSave}>
  <span role="img" aria-label="保存图标" />
  保存
</button>

规则配置选项

该规则允许通过配置对特定元素放宽限制。默认配置中，唯一例外是<tr>元素可以接受presentation或none角色：

{
  rules: {
    'jsx-a11y/no-interactive-element-to-noninteractive-role': [
      'error',
      {
        tr: ['none', 'presentation']
      }
    ]
  }
}

这种例外是因为表格行在某些情况下确实需要语义中立化，但开发者应谨慎使用这种例外。

无障碍指南与最佳实践

1. 保持元素语义一致性：交互元素应保持其固有的交互特性，不应通过ARIA角色改变其基本性质。

2. 层级结构清晰：如果需要同时包含交互和非交互内容，应通过合理的DOM结构来实现，而非混合角色。

3. 键盘导航兼容：任何交互元素都应确保可以通过键盘操作，这是WCAG 2.1 AA级合规性的基本要求。

4. 屏幕阅读器友好：确保角色分配不会导致屏幕阅读器播报混乱或误导用户。

开发建议

1. 在设计组件时，首先考虑使用语义正确的HTML元素，而非依赖ARIA角色。

2. 当确实需要修改元素语义时，确保新角色与元素的交互特性一致。

3. 使用无障碍测试工具（如屏幕阅读器或浏览器审计工具）验证您的实现。

4. 在团队中建立统一的无障碍开发规范，特别是在大型项目中保持一致性。

通过遵循这些原则和jsx-a11y/no-interactive-element-to-noninteractive-role规则的指导，您可以创建出既功能完善又具备良好可访问性的React组件。

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