figcaption仅用于具备「可抽离性」的独立语义单元，如图表、代码块等；必须作为figure首个或最后一个直接子元素，与img并列；alt描述图像“是什么”，figcaption说明“为什么放这里”，二者分工明确、不可互换或省略。
直接说结论：figcaption 不是用来“给图片加注解”的通用工具，它只在图（或代码、引文等）本身具备「可抽离性」时才该用——比如能单独拎出来放进附录、侧栏、打印页而不影响正文逻辑的内容。乱用反而会让读屏器跳过说明、搜索引擎无法关联图文。
什么时候必须用 figure + figcaption
只有同时满足以下两个条件，才该用这对标签：
- 这张图/代码块/图表是独立存在的语义单元，移出正文不影响主文连贯性（例如：论文中的“图3.2 系统架构图”、API文档里的
{ "status": "ok" }响应示例） -
figcaption写的是它自身的上下文信息，比如编号、用途、数据来源，而不是“上图所示”“左侧截图”这类依赖位置的描述 - 纯装饰图、轮播图单帧、头像、banner、文章内解释某句话的配图——统统不该用
figure，直接用img alt="…"更准确
figcaption 必须是 figure 的第一个或最后一个子元素
DOM 顺序决定读屏器播报逻辑，不是 CSS 视觉位置。常见错误包括：
- 把
figcaption套在div或p里再塞进figure—— 辅助技术识别不了这是图的说明 -
figure > img > figcaption——figcaption不是img的子元素，而是必须和img并列、且是figure的直接子级 - 一个
figure里出现两个figcaption—— 第二个会被浏览器忽略或导致解析异常 - 用
flex-direction: column-reverse或order强行视觉翻转顺序 —— DOM 没变，但语义流和视觉不一致，读屏器会先读错内容
alt 和 figcaption 各管各的事，不能省、不能互换
两者分工明确，缺一不可：
-
img的alt属性描述图像“是什么”，供无图场景、SEO、屏幕阅读器快速理解，建议 ≤125 字符，例如：alt="折线图：用户登录量在1月到3月呈上升趋势" -
figcaption解释“为什么放在这里”，补充编号、背景、触发条件、数据来源等，例如：<figcaption>图2：Q1用户活跃度变化趋势（数据来源：内部埋点）</figcaption> -
alt=""表示该图纯装饰 —— 此时就不该用figure，因为语义冲突 - 如果图是代码截图，
alt写“Python 异常堆栈截图”，figcaption标明 Python 版本和复现路径
最容易被忽略的一点：figcaption 的 DOM 位置决定了读屏器是否能把它和图正确绑定。哪怕你用 CSS 把它压到顶部显示，只要它在 DOM 中是 figure 的第一个子元素，读屏器就会先读说明、再读图——这个先后关系比视觉对齐重要得多。
