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