role="grid"仅声明语义，不提供交互能力；必须显式标记role="row"/role="gridcell"、设置tabindex、监听键盘事件并同步ARIA状态，否则无法实现键盘导航与屏幕阅读器支持。
role="grid" 本身不等于可交互网格
直接给 <table> 加 role="grid" 只是告诉辅助技术“这看起来像一个网格”，但**不会自动获得键盘导航（如方向键移动）、焦点管理或选中逻辑**。真正的交互式网格需要手动补全 ARIA 行为和 DOM 控制逻辑。
常见错误现象：role="grid" 加了，但按 Tab 进不去、ArrowDown 没反应、屏幕阅读器读不出当前行/列位置 —— 这是因为缺少 role="row"、role="gridcell" 的显式标记，以及缺失键盘事件监听。
-
<table>元素上设role="grid"后，必须显式为每行加role="row"，每个单元格加role="gridcell"（不能依赖<td>默认语义） - 所有参与导航的单元格需有
tabindex="-1"，首单元格额外设tabindex="0"保证初始可聚焦 - 必须监听
keydown事件，手动实现方向键跳转、Home/End行首行尾、Ctrl+Home到顶等行为 - 若单元格含可聚焦子元素（如
<input>、<button>），需用roving tabindex模式控制焦点归属，避免子元素抢走网格级导航
为什么不能只靠语义 HTML + role 属性
原生 <table> 是静态数据容器，浏览器不为其内置网格导航逻辑；而 ARIA role="grid" 是一种“契约”——你声明了它是网格，就得自己兑现所有对应交互能力。
使用场景：当表格需要支持 Excel 式键盘操作（比如编辑多个单元格、批量选中、行列跳转），且不能改用第三方组件时，才值得投入手写逻辑。
立即学习“前端免费学习笔记（深入）”；
- 纯展示表格（无编辑、无选中、无键盘操作需求）→ 不要用
role="grid"，保持原生<table>更轻量、更兼容 - 含表单控件的表格 → 若每个
<td>里都有<input>，优先考虑让每个<input>自然可Tab导航，而非强行套role="grid" - 性能影响：每行每单元格都加
role属性 + 大量keydown监听器，对百行以上表格会造成明显响应延迟
最小可行交互网格的 DOM 结构要点
以下结构是让屏幕阅读器识别为网格、且能被键盘进入的前提，缺一不可：
<table role="grid" aria-label="销售数据表">
<thead>
<tr role="row">
<th role="columnheader" scope="col">产品</th>
<th role="columnheader" scope="col">销量</th>
</tr>
</thead>
<tbody>
<tr role="row">
<td role="gridcell" tabindex="-1">A</td>
<td role="gridcell" tabindex="-1">120</td>
</tr>
</tbody>
</table>
-
role="row"必须出现在<tr>上，不能省略或挪到<tbody> -
role="gridcell"必须出现在<td>或<th>上，<div>包裹无效 -
tabindex="-1"是 roving tabindex 的基础，没有它，方向键无法聚焦到目标单元格 -
aria-label或aria-labelledby必须提供，否则屏幕阅读器可能只读“网格”，不读内容上下文
容易被忽略的焦点与状态同步问题
交互式网格最常出问题的地方不在结构，而在状态维护：焦点移到哪个单元格，就得同步更新 aria-selected、aria-rowindex 等属性，否则屏幕阅读器会读错位置，多选逻辑也会失效。
- 每次键盘移动后，必须调用
element.focus()并设置element.setAttribute('aria-selected', 'true')，同时清除上一个单元格的aria-selected - 若支持多选（
Shift+Arrow或Ctrl+Click），需维护一个选中单元格列表，并为每个选中项设置aria-selected="true" - 滚动容器内嵌网格时，焦点移入视口外单元格，必须手动
element.scrollIntoView({ block: 'nearest' })，否则用户看不到当前聚焦位置 - 不要依赖 CSS
:focus样式判断焦点状态 —— roving tabindex 下焦点可能在tabindex="-1"元素上，但:focus不生效，得靠 JS 跟踪
真正难的不是加 role，而是让每一个键盘动作、每一次焦点切换、每一种选中状态都和 ARIA 属性严格同步。漏掉任意一环，对屏幕阅读器用户来说就是不可用的。
