必须用<figure>包裹图表并配<figcaption>，因其是语义锚点，确保屏幕阅读器识别图表边界与用途，且需与原始表格共存并建立aria-labelledby关联。
为什么不能用直接包图表容器
把 ECharts 或 Chart.js 的 canvas 或 div#chart 直接丢进一个空 <div>，屏幕阅读器会把它当“装饰性空白区域”跳过——哪怕你加了 <code>aria-label，也补不回缺失的语义骨架。图表不是孤立图像，它背后是结构化数据（比如“华东Q1销售额：¥248万”），而 HTML 语义标签才是把「数据→结构→可访问呈现」串起来的唯一链路。
-
<figure></figure> 是图表的语义外衣：它声明“这是一个独立的、可被引用的内容单元”，浏览器和读屏软件据此识别其边界与用途
-
<figcaption></figcaption> 不是可选说明，而是必须存在的语义锚点：它告诉辅助技术“这张图在表达什么”，且必须紧贴 <figure></figure> 内部，不能靠 CSS 隐藏或用 title 属性模拟
- 如果图表数据来自表格（比如用
table 原始数据驱动柱状图），<figure></figure> 应包裹整个可视化区块，但原始 <table> 仍需保留在 DOM 中（可设 <code>aria-hidden="true"），确保爬虫和打印能拿到真实数据源
如何让图表和底层表格真正语义联动
常见错误是画完图表就删掉原始 <table>，或者把 <code><table> 放在别处当成“数据源注释”。正确做法是让两者共存，并通过属性建立机器可读的关联。
<ul><li>原始 <code><table> 必须完整存在，含 <code><caption></caption>、<thead>、<code><tbody> 和正确的 <code>scope 属性（如 <th scope="col">）
<li>在 <code><figure></figure> 上添加 aria-labelledby，指向 <table> 的 <code><caption></caption> ID，例如：<figure aria-labelledby="sales-caption"></figure> + <caption id="sales-caption">2024年各区域Q1销售额</caption>
- 避免用
aria-describedby 指向表格 ID——它只作补充说明，无法替代标题级语义绑定
- 若图表支持交互式高亮（如鼠标悬停显示某行数据），对应
<td> 应同步设置 <code>tabindex="0" 和 aria-current="true"，否则键盘用户无法感知当前焦点数据
响应式图表页中和怎么分界
很多人把整页图表塞进一个 <section></section>，结果文档大纲崩坏：屏幕阅读器听到“区域一”“区域二”却找不到上级标题，或者多个 <section></section> 共用同一个 <h2></h2>，导致层级错乱。
-
<main></main> 只能有一个，且必须包裹页面核心内容——对图表页来说，就是那个最关键的主视图（如“全国实时疫情分布热力图”），而不是侧边筛选栏或顶部导航
- 每个独立图表区块（如“确诊趋势折线图”“疫苗接种率地图”）应各自用
<section></section> 包裹，并配唯一 <h3></h3>（不能是 <h2></h2>，除非它是页面一级主题）
- 检查方法：打开 Chrome DevTools → 「Accessibility」面板 → 看「Landmarks & Headings」是否形成清晰树状，
<main></main> 下直接跟几个 <section></section>，每个 <section></section> 下有且仅有一个 <h3></h3>
- 动态加载新图表时，不要只替换
<figure></figure> 内容，要连同 <section></section> 和其 <h3></h3> 一起插入，否则大纲会断层
容易被忽略的打印与爬虫陷阱
开发时盯着屏幕看图表动效很炫，但打印 PDF 或被搜索引擎抓取时，<canvas></canvas> 是纯位图，没有文本、没有结构、没有数值——所有信息全丢。
立即学习“前端免费学习笔记（深入）”；
- 必须保留原始
<table>，即使视觉上隐藏（用 <code>position: absolute; left: -9999px 而非 display: none 或 visibility: hidden）
-
<figure></figure> 里不能只有 <canvas></canvas>；若用 SVG 图表，确保 <text></text> 元素含真实数值（而非靠 JS 注入），且 role="img" + aria-label 仅作兜底，不替代结构
- SEO 友好写法：
<figure><figcaption>2024年Q1销售额：华东¥248万，华南¥192万</figcaption><table aria-hidden="true">…</table>
<div id="chart-container"></div></figure>——数值出现在 <figcaption></figcaption> 里，机器可直接提取
- 最常漏的是
<caption></caption> 缺失或位置错（比如写在 <thead> 后面），会导致整张表在打印预览里标题消失、爬虫无法索引图表主题
</thead>
把 ECharts 或 Chart.js 的 canvas 或 div#chart 直接丢进一个空 <div>，屏幕阅读器会把它当“装饰性空白区域”跳过——哪怕你加了 <code>aria-label，也补不回缺失的语义骨架。图表不是孤立图像，它背后是结构化数据（比如“华东Q1销售额：¥248万”），而 HTML 语义标签才是把「数据→结构→可访问呈现」串起来的唯一链路。
-
<figure></figure>是图表的语义外衣：它声明“这是一个独立的、可被引用的内容单元”，浏览器和读屏软件据此识别其边界与用途 -
<figcaption></figcaption>不是可选说明，而是必须存在的语义锚点：它告诉辅助技术“这张图在表达什么”，且必须紧贴<figure></figure>内部，不能靠 CSS 隐藏或用title属性模拟 - 如果图表数据来自表格（比如用
table原始数据驱动柱状图），<figure></figure>应包裹整个可视化区块，但原始<table> 仍需保留在 DOM 中（可设 <code>aria-hidden="true"），确保爬虫和打印能拿到真实数据源如何让图表和底层表格真正语义联动
常见错误是画完图表就删掉原始
<table>，或者把 <code><table> 放在别处当成“数据源注释”。正确做法是让两者共存，并通过属性建立机器可读的关联。 <ul><li>原始 <code><table> 必须完整存在，含 <code><caption></caption>、<thead>、<code><tbody> 和正确的 <code>scope属性（如<th scope="col">） <li>在 <code><figure></figure>上添加aria-labelledby，指向<table> 的 <code><caption></caption>ID，例如：<figure aria-labelledby="sales-caption"></figure>+<caption id="sales-caption">2024年各区域Q1销售额</caption> - 避免用
aria-describedby指向表格 ID——它只作补充说明，无法替代标题级语义绑定 - 若图表支持交互式高亮（如鼠标悬停显示某行数据），对应
<td> 应同步设置 <code>tabindex="0"和aria-current="true"，否则键盘用户无法感知当前焦点数据响应式图表页中
和 怎么分界 很多人把整页图表塞进一个
<section></section>，结果文档大纲崩坏：屏幕阅读器听到“区域一”“区域二”却找不到上级标题，或者多个<section></section>共用同一个<h2></h2>，导致层级错乱。-
<main></main>只能有一个，且必须包裹页面核心内容——对图表页来说，就是那个最关键的主视图（如“全国实时疫情分布热力图”），而不是侧边筛选栏或顶部导航 - 每个独立图表区块（如“确诊趋势折线图”“疫苗接种率地图”）应各自用
<section></section>包裹，并配唯一<h3></h3>（不能是<h2></h2>，除非它是页面一级主题） - 检查方法：打开 Chrome DevTools → 「Accessibility」面板 → 看「Landmarks & Headings」是否形成清晰树状，
<main></main>下直接跟几个<section></section>，每个<section></section>下有且仅有一个<h3></h3> - 动态加载新图表时，不要只替换
<figure></figure>内容，要连同<section></section>和其<h3></h3>一起插入，否则大纲会断层
容易被忽略的打印与爬虫陷阱
开发时盯着屏幕看图表动效很炫，但打印 PDF 或被搜索引擎抓取时，
<canvas></canvas>是纯位图，没有文本、没有结构、没有数值——所有信息全丢。立即学习“前端免费学习笔记（深入）”；
- 必须保留原始
<table>，即使视觉上隐藏（用 <code>position: absolute; left: -9999px而非display: none或visibility: hidden） -
<figure></figure>里不能只有<canvas></canvas>；若用 SVG 图表，确保<text></text>元素含真实数值（而非靠 JS 注入），且role="img"+aria-label仅作兜底，不替代结构 - SEO 友好写法：
<figure><figcaption>2024年Q1销售额：华东¥248万，华南¥192万</figcaption><table aria-hidden="true">…</table> <div id="chart-container"></div></figure>——数值出现在<figcaption></figcaption>里，机器可直接提取 - 最常漏的是
<caption></caption>缺失或位置错（比如写在<thead> 后面），会导致整张表在打印预览里标题消失、爬虫无法索引图表主题 </thead>
-
