Chrome DevTools Accessibility Inspector 是验证表格语义最直接方式：按 Cmd+Shift+P（Mac）或 Ctrl+Shift+P（Win/Linux）输入“Accessibility”打开，或右键表格单元格选“Inspect Accessibility Properties”，重点检查 Computed Role（应为 table/columnheader/cell）、Name（表头需非空有意义）、States（如 aria-sort 需与实际状态同步）。
怎么用 Chrome DevTools 快速验证表格语义是否正确
Chrome DevTools 的 Accessibility Inspector 是当前最直接的验证入口，不用装插件、不依赖读屏模拟，它显示的是浏览器实际构建的可访问性树——这才是屏幕阅读器真正“看到”的内容。
打开方式：Mac 按 Cmd+Shift+P，Win/Linux 按 Ctrl+Shift+P，输入 “Accessibility”，回车选择 “Show Accessibility”；或右键表格任意单元格 → 选 “Inspect Accessibility Properties”。
重点盯三列：
-
Computed Role：表格应为table，表头单元格（th）应为columnheader或rowheader，普通单元格（td）应为cell。若出现generic，说明语义缺失 -
Name：表头必须有非空、有意义的文本内容；若用了aria-label或aria-labelledby，要确认它没被alt或空th覆盖 -
States：比如带排序功能的表头，aria-sort值（ascending/descending）必须与实际状态一致，JS 更新后 DOM 属性也得同步
为什么 table 里嵌套 div 会导致无障碍失效
常见错误是把整个表格写成 <div role="table"><div role="row">...</div></div>，这种“伪表格”在可访问性树中可能被识别为普通容器，而非真正的表格结构。
立即学习“前端免费学习笔记（深入）”；
屏幕阅读器无法提供表格特有的导航能力（如“跳到第3行第2列”），也无法正确朗读行列关系。真实表格的语义来自原生标签组合：table + thead/tbody + tr + th/td。
以下情况会破坏语义链：
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
-
th或td内部包裹了div且未设role="none"或aria-hidden="true"，导致辅助技术误读嵌套层级 - 用
display: grid或flex模拟表格布局，但没补role="table"及配套属性（极难维护，不推荐） - 省略
caption且没用aria-labelledby关联标题，导致表格目的不明
如何检测缺失的 scope、headers 和 caption
复杂表格（多级表头、跨行跨列）必须明确单元格归属关系，否则屏幕阅读器无法建立行列映射。静态扫描工具（如 Trae 的 @trae/plugin-a11y）能自动抓出这类遗漏。
配置示例（trae.config.js）：
module.exports = {
plugins: ["@trae/plugin-a11y"],
a11y: {
enabled: true,
include: ["table-duplicate-name", "table-fake-caption", "th-has-scope"]
}
};
运行 npx trae check 后，会报告：
-
th缺少scope属性（col/row/colgroup/rowgroup） -
td缺少headers属性，且无法通过父级tr+th自动推导 -
table没有caption，也没用aria-labelledby指向外部标题元素
注意：scope 仅适用于简单表头；复杂结构必须用 headers 显式关联 ID，且目标 th 需有唯一 id。
W3C Validator 和 Axe 能否发现表格无障碍问题
W3C Markup Validation Service 主要检查语法合法性，比如 th 是否闭合、colspan 是否超范围，但它**不会**报 scope 缺失或 caption 不足——这些属于 WCAG 合规性范畴，不在 HTML5 语法规范内。
Axe DevTools（或 Lighthouse 的 Accessibility Audit）则专注这类问题：
- 运行
axe.run()或点击 Lighthouse 的 “Run audits” → “Accessibility” - 它会标记 “
Table header not associated with data cells”、“Caption or summary missing for data table” 等具体项 - 但 Axe 无法判断
scope值是否逻辑合理（比如把scope="row"错用在列头上），这仍需人工结合结构复查
真正容易被忽略的是：即使所有属性都写了，如果表格被 display: none 或 aria-hidden="true" 隐藏，整张表就从可访问性树中彻底消失——此时任何属性都无效。
