最可靠解法是拆分为多个独立表格而非单表多级分组。因屏幕阅读器无法理解colspan语义，aria-describedby不支持整行绑定，headers易出错，且缺caption/thead/tbody将破坏导航；多级分组须用section+独立table封装，并配对应heading；键值对数据应改用dl而非table。
直接拆成多个独立 <table>，别在一张表里硬塞多级分组——这是最可靠、最省维护成本的解法。
<h3>为什么单表嵌套分组标题行会失败</h3>
<p>用 <code><th colspan="4">住院费用</th> 放在 <tbody> 里，屏幕阅读器只把它当普通单元格读，不会建立“后续 5 行都属于这个区块”的语义归属。用户听到“First 60 days, $1,600”，却不知道这属于哪一类费用，上下文彻底丢失。
<ul>
<li>辅助技术不识别 <code>colspan 的逻辑分组意图，仅作视觉渲染
aria-describedby 只能绑定到单个 <th> 或 <code><td>，无法自动延续到整行或整列
<li>动态列数变化时，手动维护 <code>headers 属性极易出错，且 JS 插入新行后常遗漏必须保留的语义骨架：caption + thead + tbody
哪怕只有一行数据，<caption></caption>、<thead>、<code><tbody> 也一个都不能少。缺 <code><thead>，屏幕阅读器就把第一行当数据；缺 <code><tbody>，JS 动态追加的行可能被跳过；缺 <code><caption></caption>，表格就失去唯一可导航标题。
-
<caption></caption>必须紧贴<table> 开头，内容要说明用途（如“住院费用明细”），不能用 <code><h2></h2>替代 <thead> 必须包裹所有列头行，<code><th scope="col"> 才能被正确识别为列标识 <li><code><tbody> 要显式写出，避免依赖浏览器自动补全——旧版 Safari 和部分爬虫不补，导致脚本失效 <h3>多级分组必须用 <code><section></section>+ 独立<table> <p>把“住院费用”“护理机构服务”“药品费用”各自封装进 <code><section aria-labelledby="sec-id"></section>，里面放完整表格结构。每个区块成为可跳转的 landmark，NVDA/JAWS 用户按 Ctrl+Alt+R 就能直达。- 每个
<section></section>配一个<h2 id="sec-id"></h2>，确保标题层级严格递进（全页唯一<h1></h1>→ 各区块用<h2></h2>→ 子类用<h3></h3>） -
<caption></caption>写具体用途（如“住院费用分项汇总”），而非泛泛的“费用表” - 后端返回扁平数组？前端拆分比 DOM 中 patch
aria-describedby更稳定、更易测
键值对摘要类数据别用
<table><p>像“保单号: ABC123”“生效日期: 2025-01-01”这种单列键值对，强行套 <code><table> 会误导屏幕阅读器认为这是二维数据。它既不是行列关系，也不需要排序或筛选。 <ul> <li>改用 <code><dl></dl>：<dt></dt>放键，<dd></dd>放值，天然语义匹配- 每个
- 若需紧凑排版，可用
<p class="key-value"></p>+ CSS Grid，但 DOM 结构必须是线性语义流 - 禁用
<table><tr> <th>保单号</th> <td>ABC123</td> </tr></table>—— 这会让读屏软件反复播报“表格，1 行 2 列”，毫无必要
真正难的不是写对 scope 或 headers，而是承认：业务上的“一组数据”在 HTML 里往往对应多个语义独立的 <table>。强行合并，只会把可访问性问题推给后期 patch，越补越脆。</table>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
