aria-rowindex 必须严格用于 role="row" 或 role="gridcell" 元素，显式声明逻辑行号；原生 table 中禁用，仅虚拟表格（div+role="grid"）适用；需与 aria-rowcount 严格匹配，且每行/单元格均需正确设置。

aria-rowindex 必须写在 role="row" 或 role="gridcell" 元素上

它不是给

或 加的装饰属性，而是为每个逻辑行（或单元格）显式声明其在整个表格中的绝对行号。如果你把它加在 上但没设 role="row"，或者加在 上却没设 role="gridcell"，屏幕阅读器直接忽略。

常见错误：<tr aria-rowindex="5"> —— 无效，

是原生语义元素，不参与 ARIA grid 模式；<div aria-rowindex="5"> —— 无效，缺少 role="row" 或 role="gridcell"，AT 不识别其为“行”。

• 正确写法：用 <div role="row" aria-rowindex="5"> 声明第 5 行
• 如果该行内有单元格，每个 <div role="gridcell" aria-rowindex="5" aria-colindex="1"> 都得带 aria-rowindex，不能只靠父容器继承
• 动态渲染时，哪怕只显示第 49–53 行，aria-rowindex 仍必须是 49、50、51、52、53，不能重置为 1–5

多列表格中，aria-rowindex 和 aria-colindex 要独立配对，不能靠 DOM 顺序推断

虚拟表格（比如用 div + CSS Grid 实现的横向滚动表格）里，列可能被裁剪或懒加载，视觉上只显示前 3 列，但逻辑上有 50 列——这时 aria-colindex 必须如实反映真实列序（如 aria-colindex="47"），aria-rowindex 同理，且二者组合才能定位唯一单元格。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

如果某行只渲染了姓名、邮箱两列，但它们实际对应逻辑第 1 列和第 47 列，你就得写：<div role="gridcell" aria-rowindex="12" aria-colindex="1">张三</div> 和 <div role="gridcell" aria-rowindex="12" aria-colindex="47">zhang@example.com</div>。

立即学习“前端免费学习笔记（深入）”；

• 跳过中间列（如从 1 直接到 47）完全合法，但数值必须准确，否则 NVDA 会把“第 47 列”读成“第 2 列”
• 不能省略 aria-rowindex 只留 aria-colindex，否则 screen reader 无法确认这是哪一行的数据
• 同一行多个 gridcell 的 aria-rowindex 值必须一致，否则会被解析为跨行单元格（而你没声明 aria-rowspan，这反而造成语义矛盾）

原生

里不要用 aria-rowindex

<tr> 和 <td> 已有内置行列结构，浏览器和 AT 通过 DOM 层级自动计算位置。aria-rowindex 在原生表格中不仅多余，还可能干扰解析——尤其当它和实际 DOM 顺序不一致时（比如用 JS 移动了

位置但忘了更新 aria-rowindex）。

只有两种情况例外：

• 你用 Vue/React 动态生成

，但表格结构本身是原生的，此时 aria-rowindex 仍是多余的

你用 <div role="grid"> 模拟表格（即所谓“虚拟表格”），这才是 aria-rowindex 的唯一合法使用场景

简单判断标准：如果外层是 <table>，就别碰 aria-rowindex；如果是 <div role="grid">，就必须每行、每个单元格都带它。

aria-rowcount 和 aria-rowindex 要严格对齐

aria-rowcount 写在外层 role="grid" 容器上，代表整个表格的总行数（比如 1000）；aria-rowindex 写在每个 role="row" 或 gridcell 上，代表该行在全部 1000 行中的序号。两者数值范围必须能闭合——如果 aria-rowcount="1000"，那出现 aria-rowindex="1001" 就是硬错误。

• 分页表格中，aria-rowcount 应为全量数据总行数，不是当前页行数
• 空行（如占位符、加载中提示）如果参与逻辑结构，也要分配 aria-rowindex；如果纯视觉占位且 aria-hidden="true"，则不应计入 aria-rowcount
• 用 axe 或 WAVE 扫描时，aria-rowcount 缺失或与实际最大 aria-rowindex 不匹配，会直接报 ARIA 报错

最易被忽略的一点：当你用 JS 动态插入新行，不仅要生成 DOM，还得同步更新外层的 aria-rowcount 值，并给新行分配正确的 aria-rowindex——漏掉任一环节，视障用户就会在“第 100 行”之后突然听到“第 1 行”。