标题层级应以数据逻辑为纲：h1直指核心结论，每section用h2定义图表角色，内部子图用h3标注，操作控件禁用h标签，js图表须预埋语义骨架。

为复杂图表页面设计标题层级，核心是让结构反映数据逻辑，而不是视觉分组。图表不是装饰，而是内容主体，标题要帮用户快速建立“这张图在讲什么—怎么展开—哪些细节可深挖”的认知路径。

主标题必须锚定图表的核心结论

h1 不写“销售趋势图”或“2024年数据可视化”，而要直指洞察，例如：

Q2华东区客单价提升17%主要来自复购用户增长

这个 h1 告诉用户：这不是一张泛泛的数据图，而是一个有明确归因的业务判断。它出现在

开头、图表容器之前，且全页唯一。

用语义区块包裹不同图表类型，各自启动独立子层级

一个页面常含多个图表（趋势图、分布图、对比热力图），它们不是平级罗列，而是服务于同一分析目标的不同证据模块。用

包裹每类图表，并在其中用 h2 定义其角色：

• 核心指标变化趋势（时间维度）

  …折线图…

• 区域表现差异（空间维度）

  …地图/柱状图…

• 用户分层贡献度（人群维度）

  …堆叠条形图…

每个

内部从 h2 开始，不复用全局 h1；若某图内需标注子图（如“图A：新客转化率”“图B：老客留存率”），用 h3，不跳到 h4。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

图表说明与交互控件不挤占标题流

图例、单位说明、筛选器、下载按钮等属于操作层，不能用 h 标签包装。正确做法：

• 图标题用 h3（如“按渠道划分的新客来源占比”），放在

  内部

• 图注、数据源说明用
  ，它天然关联图像，语义清晰
• 筛选栏用
  ，加 aria-label="图表筛选选项"，不参与大纲生成

这样，屏幕阅读器用户能通过 h2→h3 跳转到具体图表，再通过

获取上下文，不会被控件打断阅读流。

动态图表需预埋结构，避免 JS 注入后标题缺失

如果图表由 JS 渲染（如 ECharts、D3），不能等数据加载完再插入 h2/h3。应在 HTML 初始结构中预留语义骨架：

• 服务端或模板中先写好

  …
• JS 初始化时只向 div 注入 SVG 或 Canvas，不替换 h2
• 加载状态用 aria-busy="true" 控制，完成后再设 aria-live="polite" 向读屏器播报“图表已就绪”

确保首屏 HTML 源码里已有完整 h1→h2→h3 层级，不依赖 JS 补全——这对 SEO 和无网络环境下的静态快照至关重要。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！