提升表格可访问性需正确使用scope、caption、id+headers，禁用summary和axis；caption须为table首个子元素；复杂结构须用headers显式绑定表头。
用 <th> 标签定义表头只是第一步，真正提升可访问性的关键是让它和数据单元格建立明确的语义关系——不能靠视觉位置“猜”，必须用标准属性告诉屏幕阅读器“这个标题管哪一列、哪一行”。
必须配 scope 属性，且写对方向
<th> 没有 scope，就等于没声明作用域。浏览器和读屏器不会自动推断第一行是列标题、第一列是行标题。
-
scope="col"只能用于<thead>中的列标题，比如<th scope="col">姓名</th> -
scope="row"只能用于<tbody>每行第一个<th>，比如员工编号、部门名称这类行级标识 - 别在同一个
<tr>里混用两种scope，除非是左上角那个极少见的总表头
caption 必须是 table 的第一个子元素
表格标题不是装饰，而是屏幕阅读器进入表格时最先播报的上下文。它得紧贴 <table> 开始标签，不能塞进 <thead> 或用 CSS 模拟。
- ✅ 正确：
<table><caption>2026年Q1前端班考核成绩</caption><thead>…</thead></table> - ❌ 错误：
<table><thead><caption>…</caption></thead></table>（被当成普通文本） - 内容要具体，避免“数据表”“表格1”这类空泛描述
复杂结构必须用 id + headers 显式绑定
只要出现 rowspan、colspan、多级表头（比如“2026年 → Q1 → 线上”），scope 就失效。此时必须人工指明每个 <td> 属于哪些表头。
立即学习“前端免费学习笔记（深入）”；
- 每个相关
<th>加唯一id，如<th id="year2026">2026年</th> - 对应
<td>写headers="year2026 q1 channel-online"，用空格分隔，顺序即播报顺序 - 别写错大小写或空格；别用逗号、引号；别漏掉任一维度
别碰已废弃的属性
summary 和 axis 在现代辅助技术中完全不被支持，检测工具会直接报错，VoiceOver/NVDA 也会忽略。
- 禁用
summary：它已被 HTML5 废弃，且无任何实际播报效果 - 禁用
axis：W3C 明确标记为过时，所有主流读屏器均不识别 - 不要给
<tr>加role：原生表格结构已有足够语义，加 ARIA 反而破坏解析
