aria-colindex 仅在 role="grid" 或 role="treegrid" 容器内有效，需配合 aria-colcount 使用，且必须手动实现键盘导航逻辑，否则视障用户无法操作。
aria-colindex 只对 role="grid" 有效，不是给 加的
直接往 <td> 或 <th> 上写 aria-colindex 是无效的——WAI-ARIA 规范明确禁止。它只在 role="grid" 或 role="treegrid" 容器下被读屏软件识别。你用原生 <table> 就别碰这个属性，否则会被忽略甚至报错。
常见错误现象：
– 屏幕阅读器完全不朗读列号
– 控制台出现 ARIA 属性无效警告（如 Chrome DevTools 的 axe 插件提示）
– 某些旧版 JAWS 直接跳过整行
- 必须把原生
<table> 替换为 <div role="grid"> 结构
- 所有单元格都要用
role="gridcell" 或 role="columnheader"，不能留 <td>
-
aria-colindex 值是 1-based 整数，且必须落在 aria-colcount 范围内（比如 aria-colcount="50"，那 aria-colindex 就只能是 1–50）
稀疏渲染时，跳过中间列必须显式声明逻辑位置
虚拟滚动表格通常只渲染可视区域的几列，但屏幕阅读器需要知道“这一格实际对应第几列”，而不是“它在当前 DOM 里排第几个”。aria-colindex 正是用来干这个的：它描述的是逻辑列号，不是视觉顺序。
例如，你只渲染了第 1、2 和第 47 列，那么：
立即学习“前端免费学习笔记（深入）”；
<div role="gridcell" aria-colindex="1">姓名</div>
<div role="gridcell" aria-colindex="2">邮箱</div>
<div role="gridcell" aria-colindex="47">最后登录时间</div>
不能省略 aria-colindex="47" 改成 "3"——那样会误导用户以为这是第三列数据。
- 缺失列（如 3–46）不能靠空
<div></div> 占位，否则破坏性能；应完全不渲染
- 若某列需隐藏但语义上仍存在（如权限控制列），用
aria-hidden="true" + aria-colindex，而非 display: none
- 每行所有
gridcell 都必须有 aria-colindex，哪怕只渲染一个单元格
aria-colcount 必须反映完整逻辑列数，不是当前渲染列数
aria-colcount 是告诉屏幕阅读器“这张表总共有多少列”的元信息。它和 aria-colindex 是配套使用的：没有 aria-colcount，读屏无法验证 aria-colindex 是否越界；设小了，比如 aria-colcount="10" 却用了 aria-colindex="47"，JAWS 会直接报“列索引超出范围”。
动态场景下容易出错：
- 搜索过滤后列数变化？
aria-colcount 必须同步更新（不是只改 DOM，要 setAttribute）
- 列冻结功能启用/禁用？冻结列属于逻辑列的一部分，
aria-colcount 不变
- 用
<colgroup> 定义了列宽？原生 <table> 下不用 aria-colcount，它反而可能干扰自动推断
键盘导航和焦点管理必须手动补全
role="grid" 不自带方向键切换单元格的能力，浏览器也不会自动处理 Tab 进入/退出逻辑。如果只加 aria-colindex 不管导航，视障用户根本没法按 ←→ 键移动到目标列。
关键点：
- 容器要设
tabindex="0"，否则无法获得焦点
- 每个
gridcell 要能接收焦点（tabindex="-1" 或可交互内容如 <button>）
- 监听
keydown 事件，根据 aria-colindex 和 aria-rowindex 计算相邻单元格位置，再 focus() 到目标元素
- Home/End 键需跳转到首列/末列，得查当前行中最小/最大的
aria-colindex 值
最常被忽略的是：aria-colindex 写对了，但没配键盘逻辑，等于只画了地图却不修路。
直接往 <td> 或 <th> 上写 aria-colindex 是无效的——WAI-ARIA 规范明确禁止。它只在 role="grid" 或 role="treegrid" 容器下被读屏软件识别。你用原生 <table> 就别碰这个属性，否则会被忽略甚至报错。
常见错误现象：
– 屏幕阅读器完全不朗读列号
– 控制台出现 ARIA 属性无效警告（如 Chrome DevTools 的 axe 插件提示）
– 某些旧版 JAWS 直接跳过整行
- 必须把原生
<table>替换为<div role="grid">结构 - 所有单元格都要用
role="gridcell"或role="columnheader"，不能留<td> -
aria-colindex值是 1-based 整数，且必须落在aria-colcount范围内（比如aria-colcount="50"，那aria-colindex就只能是 1–50）
稀疏渲染时，跳过中间列必须显式声明逻辑位置
虚拟滚动表格通常只渲染可视区域的几列，但屏幕阅读器需要知道“这一格实际对应第几列”，而不是“它在当前 DOM 里排第几个”。aria-colindex 正是用来干这个的：它描述的是逻辑列号，不是视觉顺序。
例如，你只渲染了第 1、2 和第 47 列，那么：
立即学习“前端免费学习笔记（深入）”；
<div role="gridcell" aria-colindex="1">姓名</div> <div role="gridcell" aria-colindex="2">邮箱</div> <div role="gridcell" aria-colindex="47">最后登录时间</div>
不能省略 aria-colindex="47" 改成 "3"——那样会误导用户以为这是第三列数据。
- 缺失列（如 3–46）不能靠空
<div></div>占位，否则破坏性能；应完全不渲染 - 若某列需隐藏但语义上仍存在（如权限控制列），用
aria-hidden="true"+aria-colindex，而非display: none - 每行所有
gridcell都必须有aria-colindex，哪怕只渲染一个单元格
aria-colcount 必须反映完整逻辑列数，不是当前渲染列数
aria-colcount 是告诉屏幕阅读器“这张表总共有多少列”的元信息。它和 aria-colindex 是配套使用的：没有 aria-colcount，读屏无法验证 aria-colindex 是否越界；设小了，比如 aria-colcount="10" 却用了 aria-colindex="47"，JAWS 会直接报“列索引超出范围”。
动态场景下容易出错：
- 搜索过滤后列数变化？
aria-colcount必须同步更新（不是只改 DOM，要setAttribute） - 列冻结功能启用/禁用？冻结列属于逻辑列的一部分，
aria-colcount不变 - 用
<colgroup>定义了列宽？原生<table>下不用aria-colcount，它反而可能干扰自动推断
键盘导航和焦点管理必须手动补全
role="grid" 不自带方向键切换单元格的能力，浏览器也不会自动处理 Tab 进入/退出逻辑。如果只加 aria-colindex 不管导航，视障用户根本没法按 ←→ 键移动到目标列。
关键点：
- 容器要设
tabindex="0"，否则无法获得焦点 - 每个
gridcell要能接收焦点（tabindex="-1"或可交互内容如<button>） - 监听
keydown事件，根据aria-colindex和aria-rowindex计算相邻单元格位置，再focus()到目标元素 - Home/End 键需跳转到首列/末列，得查当前行中最小/最大的
aria-colindex值
最常被忽略的是：aria-colindex 写对了，但没配键盘逻辑，等于只画了地图却不修路。
