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

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

Canvas 图表必须用 figure + figcaption 包裹

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

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

  
    canvas id="sales-chart" width="600" height="300">
    

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

  
  

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

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

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

• 不要用 包进 figure——这样 SVG 变成黑盒，figcaption 无法关联其内部元素
• 正确做法是把 标签直接放在
  内，figcaption 放前后均可，按语义需要选择
• 若 SVG 含交互（如 hover 提示、点击筛选），figcaption 应放在后面，避免打断操作流
• 示例（figcaption 在后，解释型）：

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

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

  
  

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

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

• 没有 alt 属性，可用 aria-label 做极简提示（如“季度销售趋势图”），但不能代替 figcaption
• 若内联，不需 alt；若用 引用，alt 必须描述图形核心信息（如“饼图：用户设备分布”），而 figcaption 补充数据背景、来源、结论等
• 永远负责解释图表的语义意图：它展示什么、为什么重要、怎么解读，而不是复述图像外观

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

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

• 每个静态视图（如“月度数据”“年度汇总”）应各自包裹在独立
  中
• 若需统一标题（如“图5-1 至 5-4：用户行为路径分析”），用
  或
  在 figure 外标注，而不是让一个 figcaption 覆盖多个 figure
• 动态切换逻辑由外层容器（如
  ）管理，figure 只管当前激活项的语义闭环

  不复杂但容易忽略

  

  Html2md

  使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

  下载

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