必须将复杂表格拆分为多个独立并用包裹，因单表多级分组破坏可访问性：屏幕阅读器无法识别视觉分组，语义仅支持单层行列，需scope或id+headers显式声明关系，且与标题层级须规范。
复杂表格必须拆成多个独立 根本问题在于： 即使表格结构简单，漏掉 当出现多层表头或 <table>，否则屏幕阅读器根本无法建立正确上下文。
<h3>为什么单张 <code><table> 套多级分组会彻底破坏可访问性
<p>把“住院费用”“护理服务”“终身储备日规则”这些业务上完全独立的区块塞进同一张 <code><table>，哪怕用了 <code><th colspan="4">Hospitalization</th> 或 CSS 视觉分隔，屏幕阅读器仍只把它当普通行处理。用户逐单元格导航时，听到的是“First 60 days, $1,600”，却不知道这属于哪一类费用。
<table> 的语义模型只支持单层行列关系，没有“子区域”概念。辅助技术不会主动将视觉上相邻的 <code><tr> 归属到上方某个 <code><th> 下，除非你显式建立结构化隶属关系。
<ul>
<li>
<code>aria-describedby 只能附加一次描述文本，不随焦点移动重复播报，上下文极易丢失
headers 属性虽能绑定多个表头 ID，但需为每个 <td> 手动维护 ID 列表，大型表格易出错且不可维护
<li>嵌套 <code><table> 不解决本质问题，反而增加 DOM 深度和 AT 解析负担
<h3>用 <code><section aria-labelledby></section> 包裹独立 <table> 是唯一健壮方案
<p>每个业务分组（如 “Hospitalization”）应封装为一个完整、自洽的 <code><table>，并用 <code><section aria-labelledby="sec-id"></section> 包裹。这样每个 <table> 都有自己完整的 <code><thead>/<code><tbody>、<code><caption></caption> 和 scope 关联，无需额外 ARIA 修补；同时 <section></section> 自动成为可跳转 landmark，用户按 Ctrl+Alt+R 就能直达目标区块。
<section></section> 必须配 aria-labelledby 指向内部 <h2></h2> 的 ID，不能只靠 class 或 textContent<h2></h2> 必须在 <section></section> 内部，且层级连续（页面有唯一 <h1></h1>，分组用 <h2></h2>，子分类才用 <h3></h3>）<caption></caption> 应写具体描述（如 Hospitalization cost breakdown），而非泛泛的“费用明细”
scope 属性必须显式声明，漏掉就等于放弃行/列语义scope 也会让屏幕阅读器无法判断某列数据归属哪个维度。例如 <th>First 60 days</th> 若无 scope="row"，AT 可能误判为列标题，导致后续单元格读作“Medicare pays, All but $1,600”，完全丢失行语义。
scope="row"
scope="col"
<tr> 时忘记给首列 <code><th> 加 <code>scope，或误用 scope="col" 在行标题上
跨行跨列结构必须用
id+headers 显式绑定rowspan+colspan 混合布局时，scope 就失效了。此时必须放弃 scope，改用 id+headers：
id="sales"，给子表头（“线上”“线下”）分别设 id="online"、id="offline"
<td headers="sales online">120万</td>，明确它同时属于“销售额”大类和“线上”子类id 全局唯一，且所有被引用的 <th> 都在当前 <code><table> 内
<p>响应式场景下尤其要注意：<code>colspan 值超过当前视口可用列数时，浏览器不会报错，但超出部分被静默截断——看起来“铺满整行”，实际右边留白。安全做法是避免硬编码大数值如 colspan="12"，改用 CSS width: 100% 或 grid-column: 1 / -1 替代视觉铺展。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
