aria-colindex不能用于原生或元素，仅适用于role="grid"或role="treegrid"中的role="gridcell"，必须配合aria-colcount等属性使用，原生表格应依赖dom结构和推导列索引。

aria-colindex 不能用在普通

的

或

上 这是最常被忽略的前提：如果你的表格是原生 <table> 结构，哪怕用了 <code>colspan 或 rowspan，也**完全不能**给 <td> 或 <code><th> 加 <code>aria-colindex。WAI-ARIA 规范明确禁止，浏览器会静默忽略，屏幕阅读器读不到，axe 工具还会报错。 原因很简单：aria-colindex 不是“告诉屏幕阅读器这个单元格在第几列”，而是“在自定义网格中声明该单元格在完整逻辑列序列里的绝对位置”。它只对 role="grid" 或 role="treegrid" 有效，且必须配合 aria-colcount、aria-rowcount 和每个 gridcell 的显式索引。 anything-to-html 将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。 下载 普通表格靠 DOM 顺序和 <colgroup></colgroup> 隐式定义列结构，colspan 会自动调整可访问性 API 的列映射，无需、也不该手动干预 你看到的“合并后列号乱了”，其实是误以为需要补 aria-colindex —— 实际上，只要 HTML 结构正确（比如 <th colspan="2">姓名/学号</th> <th>班级</th>），NVDA / VoiceOver 就能正确报告“第1列，跨2列” 强行加 aria-colindex="1" 到 <th colspan="2"> 上，反而可能破坏原有语义，导致列数计算冲突 <h3>合并单元格后，逻辑列索引怎么算才对</h3> <p>在原生表格里，<code>aria-colindex 不参与计算，但列的逻辑索引仍由结构决定：从左到右，按所有 <th>/<code><td> 展开后的顺序编号（1-based），<code>colspan 单元格占据多个连续列号，rowspan 不影响列号分配。 <th colspan="2">A</th> <th>B</th> → A 占据逻辑列 1 和 2，B 是逻辑列 3 <th rowspan="2">X</th> <th>Y</th> + 下一行 <td>Z</td> → X 是逻辑列 1，Y 是逻辑列 2，Z 是逻辑列 2（因为第二行第一列留空） 验证方法：在控制台运行 Array.from(document.querySelector('thead tr').children).reduce((s, el) => s + (el.colSpan || 1), 0)，结果应等于你预期的总列数；再用 document.querySelectorAll('tbody tr:first-child td') 看每个 td 的 cellIndex，它就是浏览器内部认定的逻辑列号 真要用 aria-colindex？必须切换成 role="grid" 只有当你放弃原生 <table>，改用 <code>div 模拟网格（例如虚拟滚动表格、Canvas 渲染表格），才需要且能用 aria-colindex。此时合并效果不是靠 colspan，而是靠布局逻辑 + CSS 视觉控制。 外层容器设 role="grid"，并声明 aria-colcount="5"（完整逻辑列数，含隐藏列） 每个单元格用 role="gridcell"，并设 aria-colindex="3"（1-based，严格对应其在完整逻辑列中的位置，哪怕它视觉上跨了两列） 跨列视觉效果用 CSS 实现，比如 grid-column: span 2 或 width: 200px，但 aria-colindex 仍只写起始列号（如 aria-colindex="2" 表示从第2列开始，不管它视觉占几列） 关键约束：所有 gridcell 的 aria-colindex 值必须覆盖 1 到 aria-colcount 的全部整数，不能跳号、不能重复——合并单元格只是视觉呈现，逻辑列索引必须连续 容易踩的坑：colspan 后手动调 aria-colindex 有人试图在原生表格里“修复”合并后的索引，给后续单元格加偏移值，比如第一行 <th colspan="2"> 后，第二行第一个 <code><td> 写 <code>aria-colindex="3"。这完全无效，且危险： 浏览器不识别 aria-colindex 在 <td> 上，属性被丢弃 <li>若同时用了 <code>role="grid" 却漏设 aria-colcount，屏幕阅读器会 fallback 到 DOM 顺序，反而更混乱 导出 Excel 或打印时，aria- 属性不生效，只认 HTML 结构，手动索引和实际列对不上会导致数据错位 真正要检查的不是 aria-colindex，而是用 WAVE 工具跑一遍，看“表头与数据列关联是否正确”——这取决于 <th scope="col"> 是否合理、<code>colspan 是否没破坏行列对齐 复杂点不在怎么标，而在于：原生表格的列索引是推导出来的，不是写出来的；想“精准控制”，就得先放弃 <table>，再从零构建 grid 语义——没有中间态。</table>

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