aria-colindex仅在role="grid"或role="treegrid"容器内的role="gridcell"上生效，原生中使用无效；必须配合aria-colcount、aria-rowindex等属性及焦点管理，确保逻辑列号与完整语义结构一致。

aria-colindex 只在 role="grid" 里生效，原生

加了也白加

这是最常被忽略的前提：你在 <td> 或 <code><th> 上写 <code>aria-colindex="5"，屏幕阅读器根本不会读它——WAI-ARIA 规范明确禁止。它只接受出现在 role="grid" 或 role="treegrid" 容器下的 role="gridcell" 元素上。如果你用的是标准 HTML 表格（<table>），列逻辑由 DOM 顺序和 <code><colgroup></colgroup> 决定，硬塞 aria-colindex 不仅无效，还可能触发读屏警告。

虚拟滚动中 aria-colindex 必须对应完整逻辑列，不是可视列

你只渲染第 1、2、47 列，但表格总共有 100 列？那 aria-colindex 就得是 1、2、47，同时外层容器必须设 aria-colcount="100"。跳过中间列没问题，但数值必须严格对齐真实语义位置——比如隐藏列（aria-hidden="true"）仍要计入编号，不能从 2 直接跳到 47 却漏掉“第 3 列”这个逻辑存在。

• aria-colindex 是 1-based 整数，不能为 0 或负数
• 每行每个 role="gridcell" 都得有 aria-colindex，缺一个就可能导致行列错位
• 如果某列完全不渲染（比如懒加载未触发），不能留空；要么不加该 gridcell，要么用 aria-hidden="true" + 占位元素并设正确 aria-colindex

为什么设了 aria-colindex 却没被读出来

常见失效原因不是代码写错，而是配套缺失：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

• 容器没设 tabindex="0" —— 没焦点能力的 role="grid"，部分读屏（如旧版 JAWS）压根不进入网格浏览模式
• role="gridcell" 漏写了，或者误写成 role="cell" 等非法值
• aria-colcount 和实际逻辑列数不符（比如设成 50，但某 gridcell 的 aria-colindex 是 51）
• 用了 display: contents 或 visibility: hidden 隐藏单元格，但没同步调整 aria-colcount 或补占位

比 aria-colindex 更稳的替代路径

对大多数长表格场景，硬搞 aria-colindex 往往得不偿失：

• 原生 <table> + IntersectionObserver 虚拟滚动，保留语义完整性，读屏天然支持列推断 <li>若必须用 div 模拟，优先用 CSS Grid 布局 + <code>aria-labelledby 关联表头，避免手动维护列索引
• 真正需要跨百列定位时，aria-colindex 才不可替代——但这时你也得同步管好 aria-rowindex、aria-rowcount 和焦点管理，单点配置没意义

复杂点不在怎么写属性，而在整套 ARIA 网格状态是否闭环：列号、总列数、行号、总行数、焦点位置、隐藏策略，缺一不可。

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