figure 必须嵌套 figcaption 才算语义完整，figcaption 必须是 figure 的直接子元素且推荐置于末尾，版权信息须置于 figcaption 内（可含链接），不可用 aria-label 覆盖或移出 figcaption。
figure 里必须嵌套 figcaption 才算语义完整
单独用 <figure> 包裹图片或图表，但不加 <figcaption>，对屏幕阅读器和搜索引擎来说等于没标注——它只被识别为普通容器，版权信息不会被关联到图表内容上。
正确做法是把版权文字放在 <figcaption> 内部，且该标签必须是 <figure> 的**直接子元素**（可以是第一个或最后一个，但不能隔层）：
<figure> <img src="chart.png" alt="2024年用户增长趋势"> <figcaption>© 2024 数据研究院｜图表仅限内部参考</figcaption> </figure>
-
<figcaption>必须紧贴在<figure>内部，不能套在<div>或其他标签里 - 如果图表需要标题+版权双信息，建议把标题放前面、版权放后面，用中文顿号或竖线分隔，例如：
<figcaption>图1：月活用户变化｜© 2024 XYZ Corp</figcaption> - 避免把版权写在
<img>的title或alt属性里——这些不是语义化标注位置，也无法被辅助技术稳定读取
figcaption 的位置影响 CSS 布局和可访问性顺序
浏览器默认把 <figcaption> 渲染在 <figure> 的顶部或底部（取决于是否为第一个/最后一个子元素），但这个顺序会直接影响屏幕阅读器的朗读流。如果版权信息出现在图表上方，用户还没看到图就听到“© 2024”，体验割裂。
推荐始终将 <figcaption> 放在 <figure> 的末尾，确保先读图再读说明：
立即学习“前端免费学习笔记（深入）”；
<figure> <svg viewBox="0 0 400 200">...</svg> <figcaption>数据来源：公开财报｜制图：张三</figcaption> </figure>
- CSS 中用
figure figcaption { caption-side: bottom; }可显式锁定位置，避免某些 UA 样式干扰 - 不要用
flex或grid把<figcaption>“视觉上”挪到上面却保持 DOM 在下面——可访问性仍按 DOM 顺序读取 - 若需多行版权（如含许可证链接），可在
<figcaption>内用<span>或<small>微调样式，但别换标签
带链接的版权信息要保留在 figcaption 内部
很多人想把 © 后的公司名做成超链接，结果把 <a> 直接塞进 <figure>，脱离 <figcaption>——这样链接就和图表失去语义绑定，也不被归为图注的一部分。
正确方式是把链接保留在 <figcaption> 之内：
<figure> <img src="map.jpg" alt="华东地区门店分布"> <figcaption>© <a href="https://example.com" rel="author">Example Inc.</a>｜CC BY-NC 4.0</figcaption> </figure>
-
rel="author"明确声明版权归属主体，有助于 SEO 和结构化数据识别 - 避免在
<figcaption>外另加<p>或<div>包裹版权链接——那会破坏<figure>的语义封闭性 - 如果链接目标是外部站点，记得加
target="_blank"和rel="noopener"，但不要因此把链接移出<figcaption>
figcaption 不支持 aria-label，别试图“覆盖”它
有人发现屏幕阅读器读 <figcaption> 时语气生硬，就想用 aria-label 覆盖，比如给 <figure> 加 aria-label="图表：用户留存率｜版权：ABC公司"——这反而会让辅助技术忽略真实的 <figcaption>，造成信息丢失。
-
<figcaption>本身就是 WAI-ARIA 推荐的原生标注方式，无需、也不该用 ARIA 覆盖 - 若需补充说明（如“本图表未包含2023年Q4数据”），应追加在
<figcaption>内部，而不是靠 ARIA 注入 - 真正要干预朗读行为时，优先用
aria-describedby指向页面内另一段<div>，但前提是那段文字也属于该图表的上下文说明
版权标注这件事，核心就一条：figcaption 是唯一合法入口，所有文字、链接、标点都得老老实实待在里面。DOM 结构松动一丁点，语义就断了。
