aria-colindex仅声明逻辑列号，不提供可读文本；要让屏幕阅读器读出列名，必须配合role="columnheader"或原生<th>中的可见文本，或通过aria-label/aria-labelledby显式关联文本。
aria-colindex 本身不提供可读文本，它只声明逻辑列号；要让屏幕阅读器读出列名，必须配合语义化表头或 aria-labelledby
aria-colindex 不是替代 <th> 的方案
aria-colindex 是 WAI-ARIA Grid 模式中用于定位的数值型属性（如 aria-colindex="3"），它告诉辅助技术“这个单元格在完整表格中处于第 3 列”，但完全不携带任何文本内容。
- 如果你用
div+role="grid"构建虚拟表格，仅靠aria-colindex，屏幕阅读器只会读“第3列，张三”，不会知道这列叫“姓名” - 真正负责播报列名的是：
- 原生
<th scope="col">姓名</th> - 或虚拟表格中带
role="columnheader"的单元格，且其内部有可访问文本
- 原生
虚拟表格中列名怎么读出来
当你不用原生 <table>，而用 div role="grid" 时，列名必须显式放在 role="columnheader" 元素里：
-
role="columnheader"元素本身需包含可见文本（如“邮箱”），或通过aria-label/aria-labelledby关联文本 -
aria-colindex只负责对齐位置，不能省略，也不能和列名混为一谈
<div role="grid" aria-rowcount="100" aria-colcount="5">
<div role="row">
<div role="columnheader" aria-colindex="1">姓名</div>
<div role="columnheader" aria-colindex="2">邮箱</div>
<div role="columnheader" aria-colindex="5">最后登录时间</div>
</div>
<div role="row">
<div role="gridcell" aria-colindex="1">李四</div>
<div role="gridcell" aria-colindex="2">li@example.com</div>
<div role="gridcell" aria-colindex="5">2026-08-10</div>
</div>
</div>
容易踩的坑
- 把
aria-colindex当成aria-label用，比如写aria-colindex="姓名"→ 浏览器直接忽略，属性值必须是整数 - 在原生
<table>中错误添加aria-colindex→ 完全多余，且可能干扰浏览器默认列映射 - 虚拟表格中漏掉
role="columnheader"，只留aria-colindex→ 屏幕阅读器无法识别“这是列标题”，只会把表头当普通单元格读 - 表头用了
aria-label却没同步更新视觉文本（比如排序后图标变，但aria-label还是“点击排序”）→ 语义与视觉脱节
真正决定“读什么”的，永远是可访问文本节点或明确的 aria-label/aria-labelledby；aria-colindex 只管“在哪一列”。这两者职责不同，强行合并会破坏可访问性基础。
立即学习“前端免费学习笔记（深入）”；
