role="grid"必须严格遵循grid→rowgroup→row→gridcell的层级结构，缺失row或rowgroup会导致屏幕阅读器解析错误、键盘导航失效；需显式设置tabindex和动态同步aria-rowcount/aria-colcount。
role="grid" 必须配 role="rowgroup 和 role="row"
直接给 <div role="grid"> 套一堆 <div role="cell"> 会破坏屏幕阅读器解析逻辑——它根本不会当这是表格，而是当成普通容器加一堆孤立的 cell。WAI-ARIA 规范强制要求层级：grid → rowgroup（可选但推荐）→ row → gridcell/rowheader/columnheader。
常见错误写法：
<div role="grid"> <div role="cell">A</div> <div role="cell">B</div> </div>
正确结构示例：
<div role="grid">
<div role="rowgroup">
<div role="row">
<div role="columnheader">Name</div>
<div role="columnheader">Age</div>
</div>
<div role="row">
<div role="gridcell">Alice</div>
<div role="gridcell">32</div>
</div>
</div>
</div>
-
role="rowgroup"虽非强制，但缺失时部分读屏（如 NVDA + Firefox）会跳过首行或误判表头范围 -
role="row"不能省略：没有它，role="gridcell"会被视为无上下文的独立元素，方向键导航失效 - 所有
role="gridcell"必须严格嵌套在role="row"内，不能跨行或浮动定位
键盘导航失效？检查 tabindex 和 focusable 元素
即使 ARIA 结构写对了，用户按 Tab 进不去 grid、方向键不移动焦点，大概率是没处理可聚焦性。role="grid" 本身不自动获得焦点，必须显式设置 tabindex="0"；而每个 role="gridcell" 若需单独聚焦（如可编辑单元格），也要加 tabindex="0" 或用 contenteditable="true"。
立即学习“前端免费学习笔记（深入）”；
- 只给 grid 容器设
tabindex="0"，就能用Tab进入网格，然后用方向键遍历 cell（前提是 cell 有 role 且结构合法） - 如果某个 cell 需要点击/编辑，它必须能获得焦点：要么加
tabindex="0"，要么内部放<input>等原生可聚焦元素 - 避免给非交互 cell 加
tabindex="0"—— 会造成 Tab 键跳转路径混乱，用户得按几十次 Tab 才能离开表格
role="grid" 不等于 HTML <table>，别混用
用 <table> 语义已足够时，强行套 role="grid" 反而增加复杂度和兼容风险。只有两种情况才该用 role="grid"：一是用 div/flex/grid-layout 实现的“视觉表格”，二是需要动态控制行列可聚焦性的高级交互表格（比如 Excel 类编辑器）。
-
<table>自带完整的无障碍语义（含 caption、scope、headers 关联），比手写 ARIA 更可靠 - 若用了
role="grid"，就不能再套<table>标签——ARIA role 会覆盖原生语义，导致读屏忽略<th>的表头作用 - 移动端 Safari 对
role="grid"支持弱，部分手势导航（如滑动切换 cell）可能完全不可用，优先测试 VoiceOver 行为
aria-rowcount / aria-colcount 不是摆设，动态更新要同步
当 grid 内容通过 JS 动态增删行/列时，仅操作 DOM 不够。如果没同步更新 aria-rowcount 和 aria-colcount，读屏会缓存旧尺寸，导致方向键走到“不存在的 cell”时报错或静音。
- 初始渲染后立即写死属性值，例如：
<div role="grid" aria-rowcount="5" aria-colcount="3"> - 插入一行后，立刻执行：
gridEl.setAttribute('aria-rowcount', '6')（注意是字符串） - 不要依赖 JS 计算后延迟更新——读屏可能在 DOM 变更前就读取了旧属性
- 如果行列数不确定（如虚拟滚动），设为
aria-rowcount="-1"表示“未知”，但此时方向键导航会受限，需额外提供 skip link 或 search 功能
最常被忽略的是 aria-rowcount/aria-colcount 的动态同步，而不是初始写法。结构对了，但数据变了属性没跟上，读屏就卡在边界外。
