如何修复Axe Dev Tool检测出的交互式控件嵌套无障碍错误

错误原因 #

你的代码里<tr>元素本身被设置为交互式（绑定ng-click且添加了tabindex="0"），但它内部又嵌套了<input type="checkbox">这个独立的交互式控件。无障碍规则明确禁止交互式控件嵌套——这会导致键盘导航混乱（比如按Tab聚焦到行后，按Space会同时触发行点击和复选框切换），也会让屏幕阅读器用户无法清晰识别操作逻辑，违反WCAG标准。

修复方案 #

核心是消除交互式控件的嵌套关系，同时满足“点击行内单元格切换状态”的需求，以下是两种可行方案：

方案1：拆分交互式区域，仅非复选框单元格绑定点击逻辑 #

把行点击的逻辑从<tr>移到除复选框所在单元格外的其他单元格上，让复选框和可点击单元格成为并列的交互式元素：

<tr data-ng-repeat="getUser in getUserList">
  <!-- 复选框单元格：仅保留复选框自身的交互 -->
  <td>
    <input 
      type="checkbox" 
      ng-change="onchange()" 
      ng-model="getOrganization.check" 
      aria-checked="{{getOrganization.check ? 'true' : 'false'}}"
      aria-label="选择用户 {{getUser.firstName}} {{getUser.secondname}}"
    />
  </td>
  <!-- 姓名单元格绑定行点击逻辑，设置tabindex支持键盘访问 -->
  <td data-ng-click="toggleOrganizationSelection(getOrganization)" tabindex="0">
    {{getUser.firstName}}
  </td>
  <td data-ng-click="toggleOrganizationSelection(getOrganization)" tabindex="0">
    {{getUser.secondname}}
  </td>
</tr>

优化说明：移除了冗余的role="checkbox"（原生复选框自带语义），动态绑定aria-checked匹配模型值，同时优化aria-label包含用户名，提升屏幕阅读器识别精度。

方案2：统一行点击与复选框逻辑，点击行直接切换复选框 #

如果需求是点击整行都要切换复选框状态，可保留行点击事件，但移除<tr>的tabindex，让键盘焦点仅落在复选框上（复选框本身支持键盘操作）：

<tr data-ng-repeat="getUser in getUserList" data-ng-click="getOrganization.check = !getOrganization.check; onchange()">
  <td>
    <input 
      type="checkbox" 
      ng-change="onchange()" 
      ng-model="getOrganization.check" 
      aria-checked="{{getOrganization.check ? 'true' : 'false'}}"
      aria-label="选择用户 {{getUser.firstName}} {{getUser.secondname}}"
    />
  </td>
  <td>{{getUser.firstName}}</td>
  <td>{{getUser.secondname}}</td>
</tr>

说明：这种方案下，行点击仅作为复选框切换的快捷方式，交互核心仍是复选框。键盘用户可通过Tab聚焦复选框，用Space切换状态；鼠标用户点击行任意位置都能触发状态变更，同时不会出现嵌套控件的问题。

额外注意事项 #

• 移除<tr>上的aria-hidden="false"，该属性无需给可见元素设置，反而可能干扰屏幕阅读器识别。
• 确保onchange()函数能同步处理视觉反馈（比如给选中的行添加高亮样式），让所有用户都能清晰感知状态变化。

内容的提问来源于stack exchange，提问作者Ranjan Singh