role="cell"不可用于原生<td>或<th>标签，因其已自带语义；仅在用<div>等非表格元素模拟表格时才需手动声明，并须配合完整ARIA结构（role="table"→"rowgroup"→"row"→"cell"）及aria-labelledby建立表头关联。
role="cell" 不能直接用在 <td> 或 <th> 上
浏览器和辅助技术（如屏幕阅读器）默认已将 <td> 和 <th> 视为语义化的表格单元格，强行加 role="cell" 会覆盖原生语义，反而导致读屏异常（例如跳过表头关联、重复播报“单元格”）。WAI-ARIA 规范明确要求：**原生元素已有对应角色时，不得用 ARIA role 覆盖它**。
实操建议：
- 保留原生
<td>/<th>，不加role="cell" - 若必须用非表格元素模拟表格（比如用
<div>布局），才需手动声明role="cell" - 此时必须同时补全整套 ARIA 表格结构：
role="table"→role="rowgroup"→role="row"→role="cell"或role="columnheader"/role="rowheader"
用 <div> 模拟表格时，role="cell" 必须配合 aria-labelledby 或 aria-describedby
纯 role="cell" 不提供行列上下文，屏幕阅读器无法知道它属于哪行哪列。必须通过引用表头 ID 建立关联。
示例（简化版）：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<div role="table">
<div role="row">
<div role="columnheader" id="h1">姓名</div>
<div role="columnheader" id="h2">年龄</div>
</div>
<div role="row">
<div role="cell" aria-labelledby="h1">张三</div>
<div role="cell" aria-labelledby="h2">28</div>
</div>
</div>
注意：
-
aria-labelledby引用的是id，不是class或文本内容 - 若单元格内容复杂（含链接、按钮等），优先用
aria-describedby补充说明，避免aria-labelledby冲突 - 缺失
aria-labelledby或引用错误 ID，会导致读屏只报“单元格”，不读表头
Chrome/VoiceOver 下 role="cell" 的兼容性陷阱
部分旧版辅助技术（尤其是 macOS VoiceOver + Safari 组合）对非原生表格的 role="cell" 支持不稳定：可能跳过单元格、无法响应方向键导航、或错误合并相邻 cell。
规避方式：
- 优先用语义化 HTML 表格（
<table>系列标签），仅在 CSS Grid / Flex 布局不可替代时才用 ARIA 模拟 - 测试必须覆盖 Chrome + NVDA、Safari + VoiceOver、Edge + Narrator 三组组合
- 避免在
role="cell"内嵌套交互控件（如<button>），否则焦点管理易出错；改用aria-haspopup或role="gridcell"替代
role="gridcell" 和 role="cell" 到底选哪个？
二者语义不同：role="cell" 属于 role="table" 结构，role="gridcell" 属于 role="grid" 结构。表格强调行列数据关系，网格强调可聚焦、可编辑的交互单元（如 Excel 风格）。
判断依据：
- 如果用户需要键盘导航（
Tab进入后用方向键移动）、编辑内容、或支持多选 —— 用role="gridcell"+role="grid" - 如果只是静态数据展示，且需与表头形成语义关联 —— 用
role="cell"+role="table" - 混用会破坏辅助技术逻辑，例如在
role="table"里写role="gridcell"，NVDA 可能完全忽略该单元格
role="cell"，而是确保它所在的整个 ARIA 结构被正确识别、关联、导航。漏掉一个 role="row" 或写错一个 aria-labelledby ID，对屏幕阅读器用户来说就是信息黑洞。 
