aria-rowspan 不是标准属性,WAI-ARIA 规范中不存在,浏览器和屏幕阅读器均不识别;应使用 headers 属性显式绑定表头,或改用语义化结构如 dl/dt/dd、treegrid 或 CSS Grid 避免 rowspan 的可访问性缺陷。

aria-rowspan 不是标准属性,浏览器和屏幕阅读器都不识别它——想靠这个实现可访问的行合并,行不通。
为什么 aria-rowspan 不存在也不起作用
WAI-ARIA 规范里根本没有 aria-rowspan 这个属性。ARIA 的目标是补充语义,不是复制 HTML 布局属性。HTML 的 rowspan 本身已是结构性声明,但它的可访问性缺陷(比如屏幕阅读器无法自动关联跨行单元格与表头)不能靠虚构一个 ARIA 属性来修复。
- 所有主流屏幕阅读器(NVDA、VoiceOver、JAWS)只响应真实存在的 ARIA 属性,如
aria-labelledby、headers、role="grid"等 - 写
aria-rowspan="3"不会改变任何行为,开发者工具里也看不到对应语义暴露 - 若误以为它有效,反而会掩盖真正需要处理的语义断裂问题
替代方案:用 headers 显式绑定被跨行单元格
当 rowspan 跨越多行时,后续行中原本该有表头的位置被留空,屏幕阅读器就“断联”了。解决办法是让每个数据单元格主动指明它属于哪些表头:
- 给每个
<th>设置唯一id,例如<th id="dept">部门</th> - 给跨行影响下的每个
<td>添加headers属性,列出对应表头的id,例如<td headers="dept course">数学</td> - 即使该
<td>在视觉上没挨着<th id="dept">,headers也能强制建立语义关联
注意:headers 值是空格分隔的 ID 列表,不是逗号,也不是 CSS 选择器。
立即学习“前端免费学习笔记(深入)”;
更健壮的做法:避免 rowspan,改用语义化结构 + CSS
复杂跨行表格几乎必然伴随可访问性风险。与其在 rowspan 上打补丁,不如换结构:
- 用
<dl>+<dt>/<dd>模拟“主项-子项”关系,天然支持嵌套与语音导航 - 用
role="treegrid"配合aria-expanded和aria-level实现可折叠课程表或组织架构 - 纯 CSS Grid 布局配合
aria-hidden="true"隐藏装饰性线条,把数据逻辑交给语义化标签,视觉样式交给 CSS
这类方案不依赖 rowspan 的网格锁定机制,也就绕开了它带来的列偏移、JS 读取异常、屏幕阅读器跳行等连锁问题。
真正难的不是写对 rowspan 数值,而是让每个被跨过的单元格依然能被准确说出“这是谁的数据”。这一步漏掉,再多的视觉合并都只是对健全用户的妥协。



















