标题层级应以数据逻辑为纲：h1直指核心结论，每section用h2定义图表角色，内部子图用h3标注，操作控件禁用h标签，JS图表须预埋语义骨架。
为复杂图表页面设计标题层级，核心是让结构反映数据逻辑，而不是视觉分组。图表不是装饰，而是内容主体，标题要帮用户快速建立“这张图在讲什么—怎么展开—哪些细节可深挖”的认知路径。
主标题必须锚定图表的核心结论
h1 不写“销售趋势图”或“2024年数据可视化”，而要直指洞察，例如：
<h1>Q2华东区客单价提升17%主要来自复购用户增长</h1>
这个 h1 告诉用户：这不是一张泛泛的数据图，而是一个有明确归因的业务判断。它出现在
用语义区块包裹不同图表类型，各自启动独立子层级
一个页面常含多个图表（趋势图、分布图、对比热力图），它们不是平级罗列，而是服务于同一分析目标的不同证据模块。用
- <section><h2>核心指标变化趋势（时间维度）</h2>…折线图…</section>
- <section><h2>区域表现差异（空间维度）</h2>…地图/柱状图…</section>
- <section><h2>用户分层贡献度（人群维度）</h2>…堆叠条形图…</section>
每个
立即学习“前端免费学习笔记（深入）”；
图表说明与交互控件不挤占标题流
图例、单位说明、筛选器、下载按钮等属于操作层，不能用 h 标签包装。正确做法：
- 图标题用 h3（如“按渠道划分的新客来源占比”），放在 <figure> 内部
- 图注、数据源说明用 <figcaption>，它天然关联图像，语义清晰
- 筛选栏用 <aside class="chart-controls">，加 aria-label="图表筛选选项"，不参与大纲生成
这样，屏幕阅读器用户能通过 h2→h3 跳转到具体图表，再通过 <figcaption> 获取上下文，不会被控件打断阅读流。
动态图表需预埋结构，避免 JS 注入后标题缺失
如果图表由 JS 渲染（如 ECharts、D3），不能等数据加载完再插入 h2/h3。应在 HTML 初始结构中预留语义骨架：
- 服务端或模板中先写好 <section><h2>…</h2><div id="chart-1" aria-live="polite"></div></section>
- JS 初始化时只向 div 注入 SVG 或 Canvas，不替换 h2
- 加载状态用 aria-busy="true" 控制，完成后再设 aria-live="polite" 向读屏器播报“图表已就绪”
确保首屏 HTML 源码里已有完整 h1→h2→h3 层级，不依赖 JS 补全——这对 SEO 和无网络环境下的静态快照至关重要。
