caption必须紧贴table开始标签且为首个子元素，scope属性强制声明以建立语义关系；禁用summary；复杂表格需id+headers显式绑定；筛选行应保留原生tr结构。
caption 必须紧贴 <table> 开始标签，scope 不是可选修饰而是强制声明——漏掉任一，屏幕阅读器就只能读出碎片数字，无法理解“张三，年龄，32”这样的语义关系。
caption 必须是 table 的第一个子元素
它不是视觉标题，而是屏幕阅读器进入表格时最先播报的上下文说明。位置错（比如塞进 <thead> 里）、内容空泛（如写成 <caption>数据表</caption>），都会让视障用户失去对表格意图的基本判断。
- ✅ 正确写法：
<table><caption>2026年Q1前端班学员考核成绩</caption><thead>... - ❌ 错误写法：
<table><thead><caption>...</caption>...或<table>...<caption>数据表</caption> - 禁用已废弃的
summary属性——现代检测工具（如 axe）直接报错，VoiceOver/NVDA 完全忽略
scope="col" 和 scope="row" 必须显式声明
没有 scope，<th> 就只是加粗文本。浏览器和读屏器不会凭位置自动推断“第一行管列、第一列管行”。不写，用户听到的就是孤立数值，不知道归属。
-
<th scope="col">只能出现在<thead>中，用于横向列标题（如“姓名”“城市”） -
<th scope="row">只能出现在<tbody>每行第一个<th>，不能放在<td>里 - 若某列无表头（如操作列），别用
<th>，直接用<td>
复杂表格必须用 id + headers 显式绑定
一旦出现 rowspan、colspan 或多级表头，scope 就失效。屏幕阅读器无法自动推断一个 <td> 同时属于哪几个表头，必须靠 headers 属性手动指明。
立即学习“前端免费学习笔记（深入）”；
- 给每个相关
<th>加唯一id，例如<th id="name-header" scope="col">姓名</th> - 在对应
<td>上用空格分隔多个 id：headers="name-header dept-header" - 不要依赖视觉对齐——屏幕阅读器只认
headers值，哪怕 DOM 顺序错乱，只要写对，播报就正确
带筛选行的表格最容易踩坑
很多人给筛选行的 <tr> 加 role="search"，结果触发 aria-requires-children 报错。根本原因是破坏了 <tr> 的原生角色，让它脱离表格结构。
- ✅ 正确做法：保留原生
<tr>，筛选控件用<input type="search">放在<td>里 - 每个输入框配
aria-label（如aria-label="按姓名筛选"），或用aria-labelledby指向对应列头id - 绝不能给
<tr>加任何role——它的语义已经足够，堆 ARIA 反而破坏结构
真正难的不是查文档写对 scope，而是在每次敲下 <th> 时，下意识问一句：“它管的是行，还是列？”这个条件反射比任何自动化工具都管用。
