aria-rowindex是ARIA 1.2引入的属性，用于显式声明role="row"或role="gridcell"元素在逻辑表格中的行序号（从1开始），必须配合role="table"/role="grid"及连续有效的数值才被读屏正确识别，禁用于原生<table>。
aria-rowindex 是什么，什么时候该用
aria-rowindex 是 ARIA 1.2 引入的属性，用于显式声明表格行（row）或网格行（gridcell）在逻辑表格结构中的序号（从 1 开始）。它不改变渲染，只影响辅助技术（如读屏软件）对行位置的理解。
常见误用场景：给普通 <div> 或未正确标注 role="row" 的元素加 aria-rowindex —— 这样无效，因为辅助技术不会识别它。必须配合语义化角色（如 role="row" 或嵌套在 role="table"/role="grid" 中）才起作用。
怎么写才被读屏软件正确识别
关键不是“写了就行”，而是整套 ARIA 表格结构要闭环：
-
aria-rowindex必须出现在具有role="row"的元素上（或role="gridcell"内部，且其父级是row） - 父容器需有
role="table"或role="grid"，且最好配aria-rowcount（尤其当行数动态变化时） - 序号必须连续、从 1 开始；跳号（如 1→3）或重复会导致读屏混乱
- 不要和原生
<table>混用 —— 原生表格已有隐式行序，加aria-rowindex反而可能干扰解析
示例（有效）：
立即学习“前端免费学习笔记（深入）”；
<div role="table" aria-rowcount="3">
<div role="row" aria-rowindex="1">
<div role="gridcell">姓名</div>
<div role="gridcell">年龄</div>
</div>
<div role="row" aria-rowindex="2">
<div role="gridcell">张三</div>
<div role="gridcell">28</div>
</div>
</div>
常见错误现象和调试方法
用户反馈“读屏没读出行号”或“报错‘invalid row index’”，大概率是以下问题：
-
aria-rowindex值为 0、负数或非数字字符串（如"row-1"）→ 读屏直接忽略 - 同一
role="table"下多个role="row"共享相同aria-rowindex→ NVDA 会警告并跳过后续行 - 用了
aria-rowindex却漏了aria-rowcount，且实际行数 > 50 → JAWS 可能截断行号播报 - 在虚拟滚动列表里静态写死
aria-rowindex="1"到"100"，但可视区只渲染 10 行 → 辅助技术会尝试读取全部 100 行，造成卡顿
调试建议：用 Chrome DevTools 的 Accessibility 面板检查节点的 “Computed Properties”，确认 row index 字段是否显示为有效数字；再用 NVDA + F1 查看“详细信息”确认是否被纳入表格导航流。
性能与兼容性要注意什么
aria-rowindex 本身开销极小，但滥用会拖慢辅助技术遍历：
- IE 和旧版 Edge（≤18）完全不支持
aria-rowindex，仅依赖原生表格或 fallback 的aria-label描述 - 在 React/Vue 等框架中动态生成大量行时，避免每次 re-render 都重设
aria-rowindex—— 它是纯语义属性，只要逻辑序号不变，无需频繁更新 - 如果表格支持排序/过滤，
aria-rowindex必须随视觉顺序实时重算（不是原始数据索引），否则读屏会报“第 3 行”实际却是筛选后的第 1 行
真正容易被忽略的是：当用 display: contents 或 CSS Grid 模拟表格布局时，aria-rowindex 无法弥补缺失的语义层级 —— 此时应优先用原生 <table>，而非硬套 ARIA。
