role="grid"必须严格遵循grid→rowgroup→row→gridcell的层级结构，缺失row或rowgroup会导致屏幕阅读器解析错误、键盘导航失效；需显式设置tabindex和动态同步aria-rowcount/aria-colcount。
role="grid" 必须配 role="rowgroup 和 role="row"
直接给 <div role="grid"> 套一堆 <code><div role="cell"> 会破坏屏幕阅读器解析逻辑——它根本不会当这是表格，而是当成普通容器加一堆孤立的 cell。WAI-ARIA 规范强制要求层级：grid → rowgroup（可选但推荐）→ row → gridcell/rowheader/columnheader。
<p>常见错误写法：</p>
<pre class="brush:php;toolbar:false;"><div role="grid">
<div role="cell">A</div>
<div role="cell">B</div>
</div></pre>
<p>正确结构示例：</p>
<pre class="brush:php;toolbar:false;"><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></pre>
<ul>
<li>
<code>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>，别混用
<p>用 <code><table> 语义已足够时，强行套 <code>role="grid" 反而增加复杂度和兼容风险。只有两种情况才该用 role="grid"：一是用 div/flex/grid-layout 实现的“视觉表格”，二是需要动态控制行列可聚焦性的高级交互表格（比如 Excel 类编辑器）。
<table> 自带完整的无障碍语义（含 caption、scope、headers 关联），比手写 ARIA 更可靠
<li>若用了 <code>role="grid"，就不能再套 <table> 标签——ARIA role 会覆盖原生语义，导致读屏忽略 <code><th> 的表头作用
<li>移动端 Safari 对 <code>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">
<li>插入一行后，立刻执行：<code>gridEl.setAttribute('aria-rowcount', '6')（注意是字符串）
- 不要依赖 JS 计算后延迟更新——读屏可能在 DOM 变更前就读取了旧属性
- 如果行列数不确定（如虚拟滚动），设为
aria-rowcount="-1" 表示“未知”，但此时方向键导航会受限，需额外提供 skip link 或 search 功能
最常被忽略的是 aria-rowcount/aria-colcount 的动态同步，而不是初始写法。结构对了，但数据变了属性没跟上，读屏就卡在边界外。
<table> 自带完整的无障碍语义（含 caption、scope、headers 关联），比手写 ARIA 更可靠
<li>若用了 <code>role="grid"，就不能再套 <table> 标签——ARIA role 会覆盖原生语义，导致读屏忽略 <code><th> 的表头作用
<li>移动端 Safari 对 <code>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"> <li>插入一行后，立刻执行：<code>gridEl.setAttribute('aria-rowcount', '6')（注意是字符串） - 不要依赖 JS 计算后延迟更新——读屏可能在 DOM 变更前就读取了旧属性
- 如果行列数不确定（如虚拟滚动），设为
aria-rowcount="-1"表示“未知”，但此时方向键导航会受限，需额外提供 skip link 或 search 功能
最常被忽略的是 aria-rowcount/aria-colcount 的动态同步，而不是初始写法。结构对了，但数据变了属性没跟上，读屏就卡在边界外。
