虚拟滚动表格禁用 aria-rowcount="总数"，应设为当前渲染行数，并配合 role="grid"、aria-rowindex（全量逻辑序号）、aria-describedby 指向范围说明。

aria-colcount 和 aria-rowcount 不适用于虚拟滚动表格

这两个属性在规范中仅用于声明 当前渲染的 DOM 表格区域 的行列数，不是整个数据集的逻辑尺寸。给虚拟滚动表格（比如只渲染 20 行但总数据有 10000 行）设 aria-rowcount="10000" 属于误用，屏幕阅读器不会据此推断可滚动范围，反而可能引发重复播报或导航混乱。

虚拟滚动表格该用什么 ARIA 属性

核心思路是：让屏幕阅读器感知“这是一个可滚动的、有明确范围的列表/网格”，而不是假装它是个完整表格。关键属性组合如下：

• role="grid"（而非 ）—— 声明语义为可交互网格
  aria-rowcount 和 aria-colcount 必须严格等于 当前实际渲染的行数和列数（例如渲染了 15 行 × 8 列，就设 aria-rowcount="15"、aria-colcount="8"）
  aria-rowindex 和 aria-colindex 按需加在每个单元格上（尤其当存在合并或动态插入时），值从 1 开始，对应其在 全量数据中的逻辑位置
  必须配合 aria-labelledby 或 aria-describedby 指向一个说明性元素，例如：

  <div id="grid-desc">数据表格，共 9842 行，使用方向键或 Page Up/Down 浏览</div><br><div role="grid" aria-describedby="grid-desc">...</div>

  为什么不能靠 aria-rowcount 暴露总数

  ARIA 规范明确要求 aria-rowcount 描述的是“当前可见的行数”。实测中：

  • NVDA + Firefox 会忽略超出渲染范围的 aria-rowcount 值，且对超大数值（如 1e6）可能直接跳过网格导航
  • JAWS 在虚拟滚动场景下若发现 aria-rowcount 远大于实际 DOM 节点数，会触发“表格不一致”警告并降级为普通列表处理
  • 移动端 VoiceOver 不支持 aria-rowcount 的动态更新，设错会导致首屏焦点丢失

  真正影响滚动体验的是 role="application" + 自定义键盘行为，或更稳妥地采用 role="listbox" + aria-orientation="vertical" 模拟长列表。

  

  htmlppt.skill

  把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

  下载

  动态更新时最容易漏掉的三件事

  虚拟滚动依赖 JS 驱动 DOM 变更，ARIA 同步稍有遗漏就会让辅助技术“迷路”：

  • 每次滚动后，必须重设容器的 aria-rowcount 和 aria-colcount 为当前渲染尺寸（不是全量）
  • 每个新挂载的
    子元素，要补上 aria-rowindex="{逻辑行号}"（比如第 3201 行数据，就写 aria-rowindex="3201"）
  • 用 aria-live="polite" 包裹页码/范围提示（如“显示第 3201–3220 行，共 9842 行”），避免屏幕阅读器静默跳过位置变更

  最常被忽略的是 aria-rowindex 的连续性——如果某次渲染跳过了第 5000 行（因数据过滤），下一行的 aria-rowindex 仍应是 5001，不能按渲染顺序填 1、2、3。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！