应拆分多级分组为独立语义区块：每个费用类型用包裹完整表格，配和scope；标题严格递进（唯一→→）；键值对改用或+；动态列数必用headers属性关联表头。

用

拆分多级分组，别硬塞进一张

金融报表里常见的“住院费用”“门诊费用”“药品费用”等区块，本质是语义独立的子模块，不是同一张表里的行或列。强行用 <tr class="section-header"> + <code>colspan 做视觉分隔，屏幕阅读器只会把它当普通行读，不会建立上下文归属——用户听到“First 60 days, $1,600”，根本不知道这属于哪一类费用。

正确做法是每个区块单独套一层 <section aria-labelledby="sec-id"></section>，里面放完整 <table>： <pre class="brush:php;toolbar:false;">&lt;section aria-labelledby=&quot;sec-hospital&quot;&gt;&lt;h2 id=&quot;sec-hospital&quot;&gt;Hospitalization&lt;/h2&gt; &lt;table&gt; &lt;caption&gt;Hospitalization cost breakdown&lt;/caption&gt; &lt;thead&gt;&lt;tr&gt; &lt;th scope=&quot;col&quot;&gt;Period&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;You pay&lt;/th&gt; &lt;/tr&gt;&lt;/thead&gt; &lt;tbody&gt;&lt;tr&gt; &lt;td&gt;First 60 days&lt;/td&gt; &lt;td&gt;$1,600&lt;/td&gt; &lt;/tr&gt;&lt;/tbody&gt; &lt;/table&gt;&lt;/section&gt;</pre> <ul> <li>每个 <code><section></section> 自动成为可跳转的 landmark，NVDA/JAWS 用户按 Ctrl+Alt+R 就能直达“住院费用”区域；

<caption></caption> 和 scope 在单表内完全自洽，无需手动维护 headers 属性；

响应式布局、CSS 模块化、单元测试都更干净——改一个区块不影响其他；

如果后端 API 返回的是扁平数组，前端拆分逻辑比在 DOM 中 patch aria-describedby 更可靠。

标题层级必须严格递进，

到

不能断层

金融系统常从 <h2></h2> 开始渲染报表区块，但页面顶部没有 <h1></h1>，或者 <main></main> 外堆了多个 <h1></h1>。这会让屏幕阅读器生成错乱的大纲树，用户无法靠 heading 导航快速定位“年度汇总”或“季度对比”部分。

检查要点：

• 整个页面有且仅有一个 <h1></h1>，通常是系统名称或报表总标题；
• 每个 <section></section> 的标题用 <h2></h2>（如“住院费用”）；
• 若某区块内还有子分类（如“住院费用”下分“医保支付”“自费部分”），用 <h3></h3>，禁止跳级；
• 不要为样式妥协——<h2></h2> 看起来太小？用 CSS 调，别换成 <div class="title">。 <h3>单列数据别用 </h3> <table>，改用 <dl> 或语义化段落 <p>像“保单号：ABC123”“生效日期：2025-01-01”这类键值对，在金融报表中大量出现在摘要栏、弹窗、侧边栏。有人图省事写成单列 <code><table>，交替用 <code><th scope="row"> 和 <code><td> ——这是语义错误：<code><table> 表示二维关系，而这里是线性映射。 <p>推荐方案：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a> <p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p> </div> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>用 <code><dl></dl>：<dt></dt> 放字段名（如“保单号”），<dd></dd> 放值，天然支持屏幕阅读器的定义列表播报；
• 用标题 + 段落：<h3>保单号</h3> <p>ABC123</p>，结构清晰，CSS 控制紧凑布局也容易；
• 避免 <table> 套 <code><table> 或 <code><div> 包裹 <code><table>，这会干扰辅助技术的表格识别逻辑； <li>如果必须保留表格样式（比如要对齐冒号），用 CSS Grid/Flex 实现视觉效果，不破坏语义。</li> <h3>动态列数场景下，<headers> 比 aria-describedby 可靠得多</headers> </h3> <p>当报表支持用户自定义列（如勾选“显示汇率”“显示手续费”），列数不确定时，<code>aria-describedby 无法动态绑定到新插入的 <td> 单元格——它只作用于声明它的那个元素，不会继承到后续行。 <p>此时必须用 <code>headers 属性，配合 <th id="col-id"> 显式关联： <pre class="brush:php;toolbar:false;"></pre> <table> <thead><tr> <th id="col-period">Period</th> <th id="col-amount">Amount</th> <th id="col-currency">Currency</th> </tr></thead> <tbody><tr> <td headers="col-period">Q1 2025</td> <td headers="col-amount col-currency">1,200 USD</td> </tr></tbody> </table> <ul> <li> <code>headers 值是空格分隔的 ID 列表，一个单元格可同时归属多个表头；
• JavaScript 动态增删列时，同步更新 <th id="..."> 和对应 <code><td headers="..."> 即可； <li>禁用 <code>aria-describedby 用于表格内部——它不传递语义给 <td>，纯属误导； <li>注意 IE11 不支持 <code>headers，但现代金融系统基本已淘汰该浏览器，不必降级兼容。

真正难的不是写对标签，而是让设计稿、API 结构、前端组件三者在语义上对齐——比如后端返回的“分组名”字段，前端必须原样用作 <h2 id="..."></h2> 的文本和 ID，不能二次加工丢掉空格或大小写，否则 aria-labelledby 就断了。