html表格必须用caption作为首个子元素提供可访问标题，配合scope属性明确表头作用域，复杂结构需用id与headers精确关联；禁用视觉隐藏手段破坏语义。
用 caption 而不是 summary 或普通 p 标题
HTML 表格的标题必须用 caption，且必须是 table 的第一个子元素。它不只是“看起来像标题”，而是被屏幕阅读器当作表格的可访问名称——用户一进入表格，就会先听到这个文本。废弃的 summary 属性（曾用于提供隐藏摘要）已不被现代辅助技术支持，强行使用反而可能被忽略或误读。
常见错误：把标题写成 <p class="table-title">销售汇总</p> 或用 CSS 模拟居中样式。这类写法对键盘用户和屏幕阅读器完全不可见，等于没写标题。
-
caption内容应简洁、具描述性，例如<caption>2026 年 Q1 各区域销售额（单位：万元）</caption> - 控制位置用 CSS：
caption-side: top | bottom；对齐用text-align，别依赖align这类废弃属性 - 如果需要补充说明（比如数据来源、统计口径），用
aria-describedby指向页面中另一个div或p，而不是塞进caption
scope 属性决定表头关联方向，不能省略
仅用 th 不够。没有 scope，屏幕阅读器无法判断这个表头管的是列还是行——尤其在表格有多个 th 且结构不对称时，容易读成“张三、18、北京”而完全丢失“姓名/年龄/城市”的上下文。
简单表格里浏览器有时能“猜”对，但这种推测不稳定，不同辅助技术表现不一致。显式声明才是可靠做法。
-
scope="col"用于列标题（如第一行的<th scope="col">姓名</th>） -
scope="row"用于行标题（如首列的<th scope="row">Q1</th>） - 避免混用：同一行里既有
scope="col"又有scope="row"会引发逻辑冲突，除非是左上角那个“总表头”单元格（极少见，需谨慎）
复杂表格必须用 id + headers 建立精确映射
当表格出现跨行/跨列表头、多级表头（比如“2026年”下分“Q1/Q2”，每季度再分“线上/线下”），scope 就失效了。此时屏幕阅读器无法自动推断某个 td 同时属于“年度+季度+渠道”三个维度，必须人工绑定。
核心逻辑：每个 th 给唯一 id，每个 td 的 headers 属性列出它所归属的所有 th 的 id，用空格分隔。
- 错误写法：
<td headers="q1">120万</td>（只关联一级，漏掉年度和渠道） - 正确写法：
<td headers="year2026 q1 channel-online">120万</td> -
headers中的id顺序影响屏幕阅读器播报顺序，建议按语义层级从粗到细排列（如年→季→渠道）
标题与概要信息不能靠视觉样式“假装存在”
可访问性不是加几个标签就完事。很多团队用 CSS 把普通段落“看起来像标题”，或者把 caption 设为 display: none 再用伪元素画个视觉标题——这会让屏幕阅读器彻底失联，键盘用户 Tab 到表格时也得不到任何上下文。
真正关键的是 HTML 结构与视觉呈现的一致性：你在源码里怎么组织，用户（无论是否视障）看到的逻辑就应该一样。
- 禁用
visibility: hidden或position: absolute; left: -9999px隐藏caption——它必须在 DOM 中可见且可聚焦 - 不要用
font-size: 0或color: transparent“藏”标题文字 - 如果设计要求标题不出现在表格上方，考虑用
caption-side: bottom或调整布局，而非破坏语义
headers 漏写、一个 scope 错位，就可能导致整张表对屏幕阅读器用户变成无意义的数据堆。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
