图表必须用 figure + figcaption 语义化包装：Canvas 需严格遵循 figure 直包 canvas 且 figcaption 唯一；SVG 推荐内联并绑定 figcaption，禁用 img 引用；figcaption 解释语义意图，不重复 alt/aria-label；多状态图表须分设独立 figure。

标签不是用来“装饰”图表的，而是告诉浏览器和辅助技术：**这个图表及其说明是一个完整、自洽、可被单独引用的内容单元**。Canvas 和 SVG 都属于这类需语义化包装的独立内容，但用法有关键区别。

Canvas 图表必须用 figure + figcaption 包裹

Canvas 本身是空白画布，内容完全靠 JavaScript 渲染，屏幕阅读器无法识别其中图形含义。因此，它天然依赖外部说明来传递语义。

• 必须将 <canvas></canvas> 元素直接作为 <figure></figure> 的唯一主要内容子元素（不能套在 div 里再塞进 figure）
• <figcaption></figcaption> 必须是 <figure></figure> 的第一个或最后一个子元素，且只能有一个
• <canvas></canvas> 的 aria-label 或 title 仅作简短提示，不可替代 <figcaption></figcaption> 的完整说明
• 示例：

  
    
    

  图4-2：2025年Q1各区域销售额对比（单位：万元）

  
  

SVG 图表推荐用 figure + figcaption，且优先内联

SVG 是结构化 DOM，本身可被读屏器遍历，但它的语义仍需上下文锚定。内联 SVG（直接写在 HTML 中）能与 `

` 形成强绑定，支持无障碍导航和 CSS 精准控制。

• 不要用 <img src="chart.svg" alt="如何使用HTML5中Figure标签包裹Canvas或SVG并添加标准的图表说明" > 包进 figure——这样 SVG 变成黑盒，figcaption 无法关联其内部元素
• 正确做法是把 <svg></svg> 标签直接放在 <figure></figure> 内，figcaption 放前后均可，按语义需要选择
• 若 SVG 含交互（如 hover 提示、点击筛选），figcaption 应放在后面，避免打断操作流
• 示例（figcaption 在后，解释型）：

  
    
      
      
      柱状图：华东与华北销量对比
    
    

  该图表显示华东区销量（80万元）高于华北区（120万元），数据来源：内部BI系统2025.03.28导出

  
  

figcaption 和 alt / aria-label 的分工要清晰

很多人把相同信息重复写在多个地方，反而降低可访问性。

• <canvas></canvas> 没有 alt 属性，可用 aria-label 做极简提示（如“季度销售趋势图”），但不能代替 figcaption
• <svg></svg> 若内联，不需 alt；若用 <img alt="如何使用HTML5中Figure标签包裹Canvas或SVG并添加标准的图表说明" > 引用，alt 必须描述图形核心信息（如“饼图：用户设备分布”），而 figcaption 补充数据背景、来源、结论等
• <figcaption></figcaption> 永远负责解释图表的语义意图：它展示什么、为什么重要、怎么解读，而不是复述图像外观

多图或多状态图表不要共用 figure

轮播图表、选项卡切换的多个 SVG、或 Canvas 动态重绘的不同视图，都不是“一个”独立单元。

• 每个静态视图（如“月度数据”“年度汇总”）应各自包裹在独立 <figure></figure> 中
• 若需统一标题（如“图5-1 至 5-4：用户行为路径分析”），用 <section></section> 或 <h3></h3> 在 figure 外标注，而不是让一个 figcaption 覆盖多个 figure
• 动态切换逻辑由外层容器（如 <div class="chart-group">）管理，figure 只管当前激活项的语义闭环<p>不复杂但容易忽略</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill9263" title="Html2md">Html2md</a> <p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </div>