role="gridcell"是专用于非<td>/<th>元素的网格单元格角色，仅在div等模拟表格时使用，须配合aria-rowindex、aria-colindex等属性，并与role="grid"结构配套。
role="gridcell" 是什么，什么时候该用
它不是表格单元格的默认语义，而是给非 <td> / <th> 元素“声明”为网格单元格用的。常见于用 <div> 实现的虚拟滚动表格、可编辑网格（比如 Excel 风格）、或 React/Vue 自定义表格组件中——这些地方没用原生表格标签，但又需要屏幕阅读器识别成表格结构。
直接在 <td> 上写 role="gridcell" 多余且可能干扰，默认已有正确角色；只有当用 div/section 等替代标签模拟单元格时，才需要显式设置。
必须配合的 ARIA 属性有哪些
单独写 role="gridcell" 几乎没用，屏幕阅读器无法定位它属于哪行哪列。至少得配 aria-rowindex 和 aria-colindex：
-
aria-rowindex：从 1 开始的行号（不是数组下标），必须是整数 -
aria-colindex：同理，列号也从 1 起 - 如果单元格跨行/列，补上
aria-rowspan或aria-colspan - 若内容可编辑，加
aria-readonly="false"或aria-disabled="true"
示例：
<div role="gridcell" aria-rowindex="2" aria-colindex="3">销售额</div>
立即学习“前端免费学习笔记（深入）”；
和 role="cell" 的区别在哪
role="cell" 是通用单元格角色，不绑定表格上下文；role="gridcell" 明确属于 role="grid"（或 role="treegrid"）容器内。二者不能混用：
- 父容器用了
role="grid"，子单元格必须用role="gridcell" - 用了
role="table"，就该用role="cell"或直接<td> - 误把
role="gridcell"放在role="table"下，会导致 AT（辅助技术）解析错乱，比如读不出行列关系
容易被忽略的焦点与键盘导航问题
仅设 role="gridcell" 不等于支持方向键导航。真实可用的网格必须：
- 让单元格能获得焦点：加
tabindex="0"（只对可交互单元格）或tabindex="-1"（只供程序聚焦） - 监听
ArrowUp/ArrowDown等事件，手动实现焦点移动逻辑 - 确保
aria-rowindex/aria-colindex始终与实际视觉位置一致——滚动后未更新索引，AT 会“迷路” - 避免在单元格内嵌套
input时同时设tabindex，否则 Tab 键会跳两次
最常出问题的是虚拟滚动场景：DOM 节点复用后忘了同步更新 aria-rowindex 和 tabindex，结果屏幕阅读器报的行列号和眼睛看到的完全对不上。
