html中不存在aria-colspan和aria-rowspan属性，它们未被aria规范定义，也不被浏览器或辅助技术识别；表格跨列跨行语义必须由原生colspan和rowspan属性实现，aria仅可补充角色（如role="grid"）而不能替代结构。

HTML 中并没有 aria-colspan 和 aria-rowspan 这两个属性——它们**不存在于 ARIA 规范中**，也不被任何浏览器或辅助技术支持。试图使用它们不仅无效，还可能干扰屏幕阅读器对表格结构的正确解析。

为什么不能用 aria-colspan / aria-rowspan

ARIA（Accessible Rich Internet Applications）规范中定义了用于增强可访问性的属性，但没有aria-colspan 或 aria-rowspan。表格跨行跨列的语义必须通过原生 HTML 的 colspan 和 rowspan 属性实现。ARIA 只能补充语义（如 role="grid"），不能替代原生表格结构的关键行为。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 浏览器和屏幕阅读器依赖 <table>、<code><th>、<code><td> 及其 <code>colspan/rowspan 属性来构建表格关系模型
• 滥用或虚构 ARIA 属性（如 aria-colspan）会被忽略，甚至触发可访问性检测工具报错
• “虚拟表格”若指用 div + ARIA 模拟的表格（如 role="grid"），其行列跨度需通过 aria-colindex/aria-rowindex 和逻辑布局控制，而非伪造属性

重构虚拟表格的正确做法

若你正在构建一个非原生 <table> 的“虚拟表格”（例如用 <code>div 实现的可滚动/动态加载表格），应遵循 WAI-ARIA Grid 模式：

• 外层容器设 role="grid"，并用 aria-label 或 aria-labelledby 提供名称
• 表头行用 role="row"，每个表头单元格用 role="columnheader" 或 role="rowheader"，并设置 aria-sort（如适用）
• 数据行用 role="row"，单元格用 role="gridcell"
• 跨列/跨行效果不靠“span”，而是通过 aria-colindex 和 aria-rowindex 显式声明逻辑位置，并配合 CSS 控制视觉合并（如 grid-column: span 2）

原生表格仍是首选方案

除非有强约束（如复杂嵌套滚动、Canvas 渲染、性能极端敏感），否则优先使用语义化 HTML 表格：

• 用 <table>、<code><thead>、<code><tbody>、<code><th>、<code><td> 构建结构 <li>需要跨列时写 <code><th colspan="2">姓名与工号</th>
• 需要跨行时写 <td rowspan="3">部门总览</td>
• 辅以 scope 属性（scope="col"/scope="row"）强化表头关联

验证是否真正可访问

重构后务必实测：

• 用 NVDA / VoiceOver 开启表格导航模式（如按 Ctrl+Alt+箭头键），确认能正确跳转行列、读出跨格范围
• 运行 axe 或 WAVE 工具检查 table 或 grid 的 ARIA 属性完整性（如缺失 aria-colcount 或 aria-rowcount 会告警）
• 禁用 CSS 查看源结构是否仍保持逻辑顺序，避免视觉欺骗导致语义断裂

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！