根本原因是缺少语义结构：复杂表格若仅用基础标签堆砌，阅读器无法识别维度归属，必须用、scope、headers等原生语义明确行列关系，并按逻辑顺序编写html源码。
表格朗读顺序错乱，根本原因是缺少语义结构
盲人阅读器（如 NVDA、JAWS、VoiceOver）默认按 HTML 文档流顺序朗读，而复杂表格（多行表头、跨行跨列、嵌套结构）若仅靠 <table> + <code><tr> + <code><td> 堆砌，阅读器无法识别“哪一列对应哪个维度”“标题单元格该绑定到哪些数据单元格”。结果就是：先读完第一行所有单元格（含空的 <code><th rowspan="2">），再跳到第二行——完全打乱逻辑关系。
<p>关键不是“加 ARIA”，而是用原生语义把结构说清楚：</p>
<ul><li>必须用 <code><thead> 包裹所有表头行，哪怕有 3 行表头
<li>每列的顶层表头必须是 <code><th scope="col">，左侧行分类标题用 <code><th scope="row">
<li>跨行表头（如“Q1–Q4”统领四列）需显式用 <code>id + headers 关联，不能只靠 rowspan
<td> 里嵌套 <code><table> 或 <code><div>——阅读器会退出当前表格上下文
<h3>用 <code>scope 和 headers 显式声明单元格归属关系
scope 是最轻量、兼容性最好的方式，适用于标准行列结构；headers 是兜底方案，用于不规则合并场景。二者不能混用同一张表——阅读器会优先读 headers 指向的内容，忽略 scope。
正确示例（双层表头）：
<thead>
<tr>
<th scope="col" rowspan="2">产品</th>
<th colspan="4" id="quarter">季度</th>
</tr>
<tr>
<th scope="col" headers="quarter">Q1</th>
<th scope="col" headers="quarter">Q2</th>
<th scope="col" headers="quarter">Q3</th>
<th scope="col" headers="quarter">Q4</th>
</tr>
</thead>
错误写法：<th colspan="4">季度</th> 后面跟 <th>Q1</th> 却不加 headers——阅读器不知道 Q1 属于“季度”这个维度。
避免用 CSS 改变视觉顺序影响阅读器流
用 display: flex 或 float 调整表格单元格位置，或通过 order 属性重排 <tr>，阅读器仍按源码顺序读取。视觉上“Q4 在最左”，源码里它在最后，就会先读产品名，再跳到 Q4 数值，中间漏掉 Q1–Q3。
<p>解决方案只有两个：</p>
<ul>
<li>老老实实按逻辑顺序写 HTML：需要先显示的列，就放在源码靠前位置</li>
<li>真要反转顺序（如移动端竖排表格），用 <code><div role="table"> 重写语义，并为每个“单元格”补全 <code>role="row" / role="cell" + aria-colindex / aria-rowindex
aria-hidden="true" 隐藏表头——阅读器直接跳过，数据单元格失去上下文测试时别只听“读得顺”，要验证焦点路径和单元格坐标
光用耳朵听“苹果，Q1，250，Q2，310……”不代表正确。打开浏览器开发者工具，选中某个 <td>，看其 <code>computed accessibility properties 中是否包含正确的 rowindex、colindex 和 header cells 引用。
更关键的是手动键盘导航（Tab → Shift+Tab → Arrow keys）：
- 按
Ctrl+Alt+Arrow（NVDA）或Ctrl+Option+Arrow（VoiceOver）能否按行列自然移动？ - 停在 Q2 单元格时，阅读器是否主动播报“Q2，苹果，310”（列头+行头+数值）？
- 右键“检查元素”后，是否能看到该
<td> 的 <code>headers属性指向了正确的<th> 元素？ <p>没走通这些路径，说明语义链断了——哪怕代码看起来“整洁”，对屏幕阅读器就是不可用的。</p> </th>
