role="grid"非表格默认语义，需显式声明并配套aria-multiselectable/aria-readonly等属性，每行须设role="row"，单元格须区分role="gridcell"/"columnheader"，动态更新须重建DOM而非修改属性。

role="grid"不是表格的默认语义，必须显式声明

原生

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

元素默认没有role="grid"，它在无障碍树中只是generic容器。屏幕阅读器对普通table的朗读是“表格，X行X列”，但不会暴露排序、选中、编辑等交互能力——这些只有加了role="grid"并配套状态属性后才被识别。

常见错误是只写

却不设aria-multiselectable或aria-readonly，导致读屏器无法判断是否支持多选或编辑。

• role="grid"必须搭配aria-multiselectable="true"（如支持Ctrl+Click多选）或aria-readonly="false"（如单元格可编辑）
• 若表格仅用于展示（无排序/筛选/编辑），用原生

即可，强行加role="grid"反而让AT误判为交互控件

不要给

或单独加role——它们是role="rowgroup"的隐式容器，手动覆盖可能破坏行/列关联逻辑

每行必须有role="row"，且需绑定可访问名称

只给

设role="grid"不够。屏幕阅读器需要明确知道“哪一行”被聚焦或选中，这依赖每个上的role="row"和配套的aria-labelledby或aria-label。

典型翻车点：动态渲染的行在JS插入后没补role="row"，NVDA会跳过整行内容，只报“空白行”。

立即学习“前端免费学习笔记（深入）”；

• <tr role="row">是硬性要求，不能省略；<tr>本身无隐式role
• 若行有操作按钮（如“删除该行”），需用aria-labelledby指向行内标题或ID，例如aria-labelledby="row-123-title"
• 避免用aria-label直接写“第3行数据”——它应描述内容意图，比如“用户订单：张三，2026-07-07，待发货”

单元格要区分role="gridcell"和role="columnheader"

th和td在grid上下文中角色不同：<th>默认是role="columnheader"，<td>默认是role="gridcell"。但一旦你用了role="grid"，就必须显式标注所有单元格角色，否则AT可能把th读作普通单元格，丢失表头关联。

尤其注意排序箭头、复选框、操作图标等内嵌控件——它们会让单元格变成复合控件，需额外处理焦点和状态。

• 排序列的<th>必须同时有role="columnheader"和aria-sort="ascending"（或"descending"）
• 含复选框的单元格：<td role="gridcell"><input type="checkbox" aria-label="选择订单 #123"></td>，不能只靠父td的role
• 禁用role="presentation"在表格单元格里——它会剥离所有语义，包括表头关联，导致读屏器无法将td与对应th匹配

动态更新表格时，role不能 runtime 修改

表格加载完再JS加role="grid"，或运行时切换aria-sort值，都不会触发AT重读语义。辅助技术只在元素挂载时解析role，后续修改等于白写。

真正生效的方式只有一种：表格结构变化时，销毁旧DOM、重建带完整role/aria属性的新节点，并重新聚焦到关键位置。

• 排序、筛选、分页等操作，推荐整行替换（而非innerHTML拼接），确保新<tr role="row">从插入那一刻就带全属性
• 不要用el.setAttribute('role', 'grid')试图“激活”表格——DevTools里能看到属性，但NVDA/VoiceOver根本感知不到
• 最常被忽略的是：role="grid"区域必须有唯一aria-label或aria-labelledby，否则AT进入后不知道这是“订单列表”还是“用户权限表”