最可靠解法是将多级分组表格拆分为多个独立，每个包裹在中并配标题和。单表嵌套破坏屏幕阅读器行列推导，colspan标题无导航功能，aria-describedby无法整行继承语义，headers手动维护易错且兼容性差；键值对应改用而非，确保wcag 2.1“信息与关系”可编程确定。
直接拆成多个独立 <table>，每个包在 <code><section></section> 里，别试图用 colspan 或 aria-describedby 在一张表里硬凑多级分组——这是最可靠、最省维护成本的解法。
为什么单表嵌套分组会破坏可访问性
屏幕阅读器依赖表格固有的行列关系推导上下文。<th colspan="4">住院费用</th> 看起来像标题，实际只是普通单元格；它既不参与 heading 导航，也无法被 headers 属性引用到后续数据行。用户听到“First 60 days, $1,600”，却不知道这属于哪个费用类型。
- 辅助技术不会把
<tr class="section-header"> 当作语义区块，只当它是普通行 <li> <code>aria-describedby只作用于单个元素，无法让整行或整列继承分组语义 - 动态列数变化时，
headers手动维护极易出错，且不同读屏软件兼容性差 - WCAG 2.1 要求“信息与关系”可编程确定，单表多级分组很难满足
- 内部
<table> 必须含 <code><caption></caption>（如<caption>住院费用明细</caption>）和完整<thead></thead> <tbody><li><code><th> 严格区分：列头加 <code>scope="col"，行头加scope="row"，不混用 - 后端返回扁平数组？前端按业务字段名（如
category: "hospitalization"）分组渲染，比 DOM 补丁更稳
@@######@@
- 读屏软件天然支持
<dl></dl>的导航模式，用户能快速跳转到“保单号”再听值 - 避免用
<table><tr> <td>保单号</td> <td>ABC123</td> </tr></table>—— 这会让 NVDA 报“一行两列”，但用户根本不需要“列”的概念 - 若需响应式堆叠，CSS 用
display: grid控制<dl></dl>布局，语义和样式彻底解耦
用 <section></section> + <h2></h2> + 独立 <table> 拆分逻辑区块
<p>把“住院费用”“门诊费用”“药品费用”各自视为语义独立模块，不是同一张表的子集，而是并列的报表单元。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>每个区块用 <code><section aria-labelledby="sec-id"></section> 包裹，<h2 id="sec-id"></h2> 作为真实标题
单列键值对别用 <table>，改用 <code><dl></dl>
“保单号：ABC123”“生效日期：2025-01-01”这类非二维数据，强行塞进 <table> 会误导辅助技术认为存在行列关系。
<ul>
<li>
<code><dl></dl> 是 W3C 明确推荐的键值对语义容器：<dt></dt> 是术语（键），<dd></dd> 是定义（值）
重构时最容易漏掉的三个细节
改完结构一刷新页面看着没问题，不代表可访问性真正落地。
- 检查每个
<section></section>是否都有唯一id且被aria-labelledby正确引用——漏掉一个，NVDA 的 Ctrl+Alt+R 就跳不到该区域 -
<caption></caption>不能为空或仅含空格，也不能用aria-label替代——后者不参与 heading 导航树 - 删除旧的
<table> 布局残留时，务必确认 CSS 中没有 <code>table-layout: fixed或border-collapse泄漏影响新结构真正的难点不在写对标签，而在说服产品和后端接受“每个费用类型返回独立数据结构”——语义清晰的前端，倒逼接口设计回归业务本质。
<section aria-labelledby="sec-hospital"><h2 id="sec-hospital">住院费用</h2> <table> <caption>住院费用明细</caption> <thead><tr> <th scope="col">时间段</th> <th scope="col">自付金额</th> </tr></thead> <tbody><tr> <th scope="row">前60天</th> <td>$1,600</td> </tr></tbody> </table></section>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
