配了多年无障碍表格，今天才知道屏幕阅读器跳着读大表时，跳过的列数根本不是”第几列”——Safari 26.2 用两个属性把它彻底说清楚了

你有一个 128 列的电子表格，用户只看到了其中 4 列——”城市”、”开户日期”、”推荐评级”、”备注”。屏幕阅读器怎么知道用户在看第几列？

aria-colindex="5" 说的是”这是总表的第 5 列”；aria-colindextext 说的是”这列在屏幕上显示的是’开户日期'”。两件事不一样，但旧的 API 只给你第一个。

Safari 26.2 把第二件事做进了浏览器。

为什么需要文本替代

表格很大的时候，DOM 里只渲染了 4 列，但 aria-colcount 说”这张表实际有 128 列”。每一列的单元格用 aria-colindex 声明自己是第几列——比如”第 5 列”。

但 128 列的表格，第 5 列的单元格不一定就是”第 5 列的标题”。有时候列标题被合并了，有时候列的位置和序号不是一一对应的（比如跳过了第 3 列直接显示第 4 列的内容）。这时候屏幕阅读器播报”第 5 列”，用户还得在脑子里翻译一遍——第 5 列是”开户日期”。

aria-colindextext 就是解决这个翻译问题的：

<td aria-colindex="110" aria-colindextext="2021年初的值">
    $12,500
</td>

屏幕阅读器读到这一格，报”2021年初的值，12500″，而不是”第110列，12500″。

对应的行属性

行也有同样的问题：aria-rowindextext 搭配 aria-rowindex 使用：

<tr aria-rowindex="25" aria-rowindextext="第4行：国际站用户">
    <td>International</td>
</tr>

典型场景是棋盘类游戏、赛程表、以及分页加载的表格——行号和实际显示的行位置没有直接对应关系。

浏览器支持

aria-colindextext 和 aria-rowindextext 已经纳入 ARIA 1.1 规范，浏览器支持如下：

从 Safari 26.2 开始，所有主流浏览器全部支持。如果你的用户里有大量 iOS 用户做无障碍浏览，这个属性终于可以用了。

使用场景

最典型的两个场景：

1. 分页或虚拟滚动的表格：只渲染了可见行，但 aria-rowcount 说总共有 1000 行；每行的 aria-rowindextext 可以给一个更有意义的描述

2. 列序号和列标题不对应的表格：合并单元格、隐藏列、动态列顺序——这些情况下 aria-colindex 的数字不一定等于”屏幕上第几列”

<!-- 128列表，只显示4列，第5列（aria-colindex=110）显示"2021年初的值" -->
<table aria-colcount="128">
    <tbody>
        <tr aria-rowcount="500">
            <td aria-colindex="5" aria-colindextext="城市">北京</td>
            <td aria-colindex="110" aria-colindextext="2021年初的值">$12,500</td>
        </tr>
    </tbody>
</table>

需要注意的是：aria-colindextext 是在 aria-colindex 基础上附加的，不是替代它。很多辅助技术依赖数字列索引来定位，两者配合使用效果最好。