aria-rowindex必须从1开始连续标识逻辑绝对行号，配合aria-rowcount、tabindex="0"及纯aria或纯原生结构使用，否则屏幕阅读器无法正确识别长表格的行列上下文。
aria-rowindex 必须从 1 开始连续，不能跳号或复用
在 role="grid" 容器中，每个 role="row" 或直接子级 role="gridcell" 的 aria-rowindex 值必须是正整数，且严格对应其在整个逻辑表格中的**绝对行号**——不是渲染序号，也不是数组下标。比如第 1001 行数据，它的 aria-rowindex 就得是 1001，哪怕你只渲染了第 999–1003 行这 5 行。
常见错误是把 v-for 索引或 slice 后的数组下标直接当 aria-rowindex 用，结果所有行都标成 1、2、3……这会让屏幕阅读器误判为“只有 3 行”，彻底丢失长表格上下文。
- ✅ 正确：渲染第 4998 行时，
aria-rowindex="4998" - ❌ 错误：
aria-rowindex="0"（下标）、aria-rowindex="1"（当前页起始）、aria-rowindex="500"（错位偏移） - ⚠️ 注意：即使某行被
display: none或aria-hidden="true"隐藏，只要它仍属逻辑表格的一部分，就不能删掉该行的aria-rowindex声明 —— 否则行列对齐会断裂
配合 aria-rowcount 才能被读屏识别，但兼容性有坑
aria-rowcount 不是可选装饰，而是让 NVDA、JAWS、VoiceOver 理解“这表格到底有多长”的关键信号。没有它，读屏往往只按 DOM 子节点数量报“共 X 行”，而虚拟表格的 DOM 只有可视区那十几二十个 role="row"，结果就是“共 12 行”——完全失真。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
但要注意：旧版读屏支持不一。JAWS 2022 之前基本忽略 aria-rowcount；macOS Sonoma 之前的 VoiceOver 也不稳定。所以光设 aria-rowcount="100000" 不够，还得确保容器有 tabindex="0"（否则无法聚焦进入网格浏览模式），且每行单元格都有明确 role="gridcell" 或 role="columnheader"。
- ✅ 必须同时存在：
role="grid"+aria-rowcount="100000"+tabindex="0" - ❌ 即使数值正确，若容器没
tabindex="0"，JAWS 可能根本不进网格导航模式 - ⚠️ 若用
IntersectionObserver动态加载新行，每次追加后需手动更新aria-rowcount（虽然极少变动，但首次设错就难挽回）
和原生 混用时，aria-rowindex 优先级低于 DOM 顺序
如果你的“虚拟表格”是部分原生 <table> + 部分 <code>div role="grid" 拼接的混合结构，那就得格外小心：aria-rowindex 在这种场景下**不起作用**。浏览器和读屏会回退到 DOM 树顺序解析行位置，导致你辛辛苦苦写的 aria-rowindex="5000" 被无视。
真正安全的做法是二选一：要么全用原生 <table> + <code><tbody> 虚拟滚动（靠 <code>intersectionObserver 控制 <tr> 的渲染/卸载，并给每个 <code><tr> 加 <code>aria-rowindex），要么全用 ARIA Grid 模式（role="grid" 下纯 div 结构）。混用不仅破坏语义连贯性，还会让 aria-rowindex 成为摆设。
- ✅ 原生方案示例：
<tr :aria-rowindex="itemIndex + 1">（Vue 中绑定真实逻辑索引）
<li>❌ 混用反例：表头用 <code><thead>，数据行用 <code>div role="row"，此时 aria-rowindex 对读屏无效
- ⚠️ 特别提醒：
<colgroup></colgroup> 也得提前声明全部逻辑列（哪怕只渲染前 3 列），否则列对齐也会错乱，进而影响行索引的上下文判断
动态高度表格里，aria-rowindex 本身不解决定位偏移
aria-rowindex 只负责告诉读屏“这是第几行”，不参与视觉滚动定位。如果行高不固定（比如某行内容换行撑高），仅靠 aria-rowindex 无法让读屏准确定位到“第 8427 行”在视口中的像素位置 —— 这得靠 JS 计算累计高度并设置 style.top 或使用 scrollTo({ top }) 配合。
也就是说，aria-rowindex 是无障碍语义层的必需品，但不是渲染层的解决方案。两者必须协同：JS 管理滚动位置与占位高度，ARIA 管理逻辑索引与关系声明。漏掉任何一环，视障用户就会听到“第 8427 行”，却卡在第 8426 行的视觉位置上不动。
- ✅ 推荐做法：维护一个
heightCache Map，记录每行真实高度，滚动时用 Array.prototype.reduce 累加前 N-1 行高度，得出第 N 行的 top 值
- ❌ 常见误区：以为设了
aria-rowindex 就自动“对齐”，结果键盘导航跳转时位置漂移
- ⚠️ 最容易被忽略的一点：当用户用键盘
Ctrl+Home 跳到首行时，你不仅要聚焦第一个 gridcell，还要确保容器 scrollTop 归零，否则读屏会报“第 1 行”，但眼睛看到的是中间某行
如果你的“虚拟表格”是部分原生 <table> + 部分 <code>div role="grid" 拼接的混合结构，那就得格外小心：aria-rowindex 在这种场景下**不起作用**。浏览器和读屏会回退到 DOM 树顺序解析行位置，导致你辛辛苦苦写的 aria-rowindex="5000" 被无视。
真正安全的做法是二选一：要么全用原生 <table> + <code><tbody> 虚拟滚动（靠 <code>intersectionObserver 控制 <tr> 的渲染/卸载，并给每个 <code><tr> 加 <code>aria-rowindex），要么全用 ARIA Grid 模式（role="grid" 下纯 div 结构）。混用不仅破坏语义连贯性，还会让 aria-rowindex 成为摆设。
- ✅ 原生方案示例：
<tr :aria-rowindex="itemIndex + 1">（Vue 中绑定真实逻辑索引） <li>❌ 混用反例：表头用 <code><thead>，数据行用 <code>div role="row"，此时aria-rowindex对读屏无效 - ⚠️ 特别提醒：
<colgroup></colgroup>也得提前声明全部逻辑列（哪怕只渲染前 3 列），否则列对齐也会错乱，进而影响行索引的上下文判断 - ✅ 推荐做法：维护一个
heightCacheMap，记录每行真实高度，滚动时用Array.prototype.reduce累加前 N-1 行高度，得出第 N 行的top值 - ❌ 常见误区：以为设了
aria-rowindex就自动“对齐”，结果键盘导航跳转时位置漂移 - ⚠️ 最容易被忽略的一点：当用户用键盘
Ctrl+Home跳到首行时，你不仅要聚焦第一个gridcell，还要确保容器 scrollTop 归零，否则读屏会报“第 1 行”，但眼睛看到的是中间某行
动态高度表格里，aria-rowindex 本身不解决定位偏移
aria-rowindex 只负责告诉读屏“这是第几行”，不参与视觉滚动定位。如果行高不固定（比如某行内容换行撑高），仅靠 aria-rowindex 无法让读屏准确定位到“第 8427 行”在视口中的像素位置 —— 这得靠 JS 计算累计高度并设置 style.top 或使用 scrollTo({ top }) 配合。
也就是说，aria-rowindex 是无障碍语义层的必需品，但不是渲染层的解决方案。两者必须协同：JS 管理滚动位置与占位高度，ARIA 管理逻辑索引与关系声明。漏掉任何一环，视障用户就会听到“第 8427 行”，却卡在第 8426 行的视觉位置上不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
