能否通过CSS Grid创建无行标签的无障碍表格？

可以实现，无需新增任何DOM标签，仅靠ARIA属性就能解决屏幕阅读器的行识别问题，方案如下：

具体修改规则 #

• 外层设置role="table"的容器新增aria-rowcount属性，属性值为表格的总行数，你当前的示例一共3行，所以设为3
• 每一组配对的键值单元格（同一行的.KeyCell和.ValueCell）添加相同的aria-rowindex属性，行号从1开始依次递增
• 所有单元格新增aria-colindex属性，.KeyCell属于第一列设为1，.ValueCell属于第二列设为2

修改后的完整代码 #

<div class="Table" role="table" aria-rowcount="3">
  
  <div class="KeyCell" role="rowheader" aria-rowindex="1" aria-colindex="1">Given name</div>
  <div class="ValueCell" role="cell" aria-rowindex="1" aria-colindex="2">Gregg</div>
  
  <div class="KeyCell" role="rowheader" aria-rowindex="2" aria-colindex="1">Family name</div>
  <div class="ValueCell" role="cell" aria-rowindex="2" aria-colindex="2">Simmons</div>

  <div class="KeyCell" role="rowheader" aria-rowindex="3" aria-colindex="1">Gender</div>
  <div class="ValueCell" role="cell" aria-rowindex="3" aria-colindex="2">male</div>
  
</div>

实现原理 #

WAI-ARIA规范允许省略显式的行容器标签，只要同属一行的单元格配置了相同的aria-rowindex属性，屏幕阅读器就会自动将这些单元格识别为同一行的内容，配合aria-colindex明确列位置，完全可以达到和新增role="row"标签完全一致的语义效果，同时不会破坏你原本基于display: grid实现的响应式布局逻辑。

目前主流的NVDA、VoiceOver、JAWS屏幕阅读器均已兼容该写法，无障碍识别效果正常。

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD