aria-colcount和aria-rowcount是为无原生语义的网格容器（需设role="grid"）提供行列总数的aria属性，仅在div模拟表格等场景下手动声明，标准html表格中硬加反而导致错误。
aria-colcount 和 aria-rowcount 是什么，什么时候该用
这两个属性不是用来“标记”表格的装饰性标签，而是为屏幕阅读器提供表格结构的元信息——当真实 <table> 结构因性能或设计原因被弃用（比如用 <code><div> 模拟网格、虚拟滚动表格、Canvas 渲染表格），又必须让辅助技术感知行列规模时才需要手动声明。
它们只在无原生 <code><table> 语义的场景下起作用；如果你用标准 HTML 表格，浏览器和读屏软件会自动解析 <code><tr> 和 <code><td> 数量，**硬加 <code>aria-colcount 反而可能覆盖正确推断，导致错误**。
怎么写才不会被读屏软件忽略或报错
aria-colcount 和 aria-rowcount 必须放在容器元素上，且该元素需有明确的网格角色：
aria-colcount 和 aria-rowcount 必须放在容器元素上，且该元素需有明确的网格角色：
• 容器必须设 role="grid"（不能是 role="table"，后者不支持这两个属性）
• 值必须是正整数字符串，例如 aria-colcount="12"，不能是 "12px" 或 12.0
• 如果行列数动态变化（如搜索后刷新），必须同步更新属性值，否则读屏会播报过期信息
• 不要和 aria-rowindex/aria-colindex 混用在同一个单元格上却不配对——比如某行设置了 aria-rowindex="5"，但总行数 aria-rowcount="4"，读屏会直接报“行号超出范围”
<div role="grid" aria-colcount="8" aria-rowcount="200">
<div role="row">
<div role="gridcell" aria-colindex="1" aria-rowindex="1">姓名</div>
<div role="gridcell" aria-colindex="2" aria-rowindex="1">年龄</div>
</div>
</div>
常见错误：为什么设了却没被读出来
• 屏幕阅读器（尤其是旧版 NVDA 或 JAWS）对 aria-colcount 支持不稳定：JAWS 2022+ 才完整支持，VoiceOver 在 macOS Sonoma 之前基本忽略该属性
• 容器缺少 tabindex="0" —— 没焦点能力的 role="grid" 容器，部分读屏根本不会进入网格浏览模式
• 单元格没设 role="gridcell" 或 role="columnheader"/role="rowheader"，导致读屏无法关联行列索引
• 使用了 display: contents 或 visibility: hidden 隐藏了部分行/列，但没同步调整 aria-rowcount，数值与可视内容严重不符
替代方案比硬塞 aria-colcount 更可靠
• 真实数据量大？优先用原生 <table> + <code><tbody> 虚拟滚动（如 <code>intersectionObserver 控制渲染），保留语义完整性
• 必须用 div 模拟？考虑用 aria-live 区域主动播报当前页行列范围（例如“共 237 行，当前显示第 45–64 行”）
• 复杂交互表格？把 aria-colcount 当作最后手段，先验证目标读屏版本是否支持，再测真实用户流——很多视障用户根本不会依赖这个属性，而是靠键盘导航和上下文判断规模
真正难的不是写对这两个属性，而是判断当前表格是否真的需要它。多数情况下，修复结构语义比补 aria 属性更有效。
