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