HTML表格无障碍适配：aria-requires-children报错如何解决？

把第二行的role="search"改为role="row"是正确的处理方式，原因如下：

• HTML表格的<thead>容器下的直接子元素<tr>默认语义就是表格行（row角色），强制给<tr>设置search角色会破坏表格的语义结构。search角色属于搜索区域的容器语义，不应该用于表格行元素，这也是Accessibility Insights触发告警的核心原因——表格行元素需要符合表格的层级语义，而search角色的元素有自身的子元素要求，和表格行的预期结构不匹配。
• 修改为role="row"后，thead的两行都属于表头行，符合表格的无障碍语义规范，既能消除告警，也能让屏幕阅读器正确识别表格的表头结构。

除了修改role，还需要确保筛选器本身的无障碍适配：

• 每个列的筛选控件（比如输入框、下拉框）需要和对应的表头文本建立关联，使用aria-labelledby绑定表头单元格的ID，例如：

  <thead>
    <tr role="row">
      <th id="col-name">姓名</th>
      <th id="col-age">年龄</th>
    </tr>
    <tr role="row">
      <td><input type="text" aria-labelledby="col-name" placeholder="筛选姓名"></td>
      <td><input type="number" aria-labelledby="col-age" placeholder="筛选年龄"></td>
    </tr>
  </thead>
  

• 如果筛选器是按钮或其他控件，也要确保有清晰的可访问名称，让屏幕阅读器用户知道控件的功能（比如“筛选姓名”而非仅“搜索”）。

如果一定要保留搜索相关的语义，不应给表格行设置search角色，而是可以给每个筛选控件的父容器（比如<td>内的<div>）添加role="search"，但这对于单列筛选来说并非必要，只要控件和表头的关联清晰，屏幕阅读器就能正确识别功能。

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