figcaption必须是figure的第一个或最后一个直接子元素，否则语义断裂；它与img共同构成独立内容单元，仅适用于可抽离引用的图表、代码截图等，且alt与figcaption分工明确、不可互替。
figcaption 必须是 figure 的第一个或最后一个直接子元素
浏览器和读屏器靠 DOM 位置判断图文归属，不是靠视觉顺序。中间插一个 <div>、<code><p></p> 或按钮，语义就断了——figcaption 就会被跳过，搜索引擎也收不到关联信号。
常见错误写法：<figure><img><div class="wrap"><figcaption>...</figcaption></div></figure>（figcaption 不是直接子元素）
正确写法只有两种：
<figure><figcaption>图2:API 响应结构示例</figcaption><img src="api.png" alt="JSON 格式响应体截图"></figure><figure><img src="api.png" alt="JSON 格式响应体截图"><figcaption>图2:API 响应结构示例</figcaption></figure>
CSS 用 flex-direction: column-reverse 或 order 调换显示顺序没关系，只要 DOM 里 figcaption 是首或尾直接子节点，语义就成立。
figure 不是“给图片加标题”的快捷写法，而是独立内容单元的语义容器
乱用 figure 会让屏幕阅读器重复播报、SEO 混淆主次。它只适用于能被抽离、单独引用的内容：比如图表、代码截图、历史照片、UI 对比图。
这些图删掉后，正文逻辑依然完整；它的说明文字（figcaption）是它自身的一部分，不是可有可无的装饰。
以下场景不该用 figure：
- 随文小图（如“咖啡冲泡步骤示意图”）→ 直接用
<img alt="手冲壶正在注水，水流呈细柱状"> - 轮播图里的单张图、产品页主图、“点击查看大图”文字、用户头像旁昵称
- 三张手机截图塞进同一个
figure再配一个figcaption（figure不支持多图共用标题）
alt 和 figcaption 分工不同，不能互相替代或照抄
alt 描述图像“是什么”，面向无图环境与读屏器；figcaption 解释“为什么放这里”，面向文档上下文、编号、数据来源或结论。
错例：<img alt="后台管理界面"><figcaption>图1:后台管理界面布局</figcaption> —— alt 没讲清内容，figcaption 又没提供额外信息，等于放弃一半语义价值。
对的做法：
-
alt写细节：alt="左侧导航栏含‘用户管理’‘角色配置’等菜单项，主区域显示表格与搜索框" -
figcaption聚焦编号/角色：<figcaption>图1:后台管理界面布局</figcaption> - 纯装饰图必须写
alt=""，且此时不该加figcaption（否则语义矛盾）
figcaption 里别写“上图”“左侧示意图”这类依赖位置的描述
CSS 可能把图挪到侧栏、附录甚至打印版末尾，而读屏器按 DOM 顺序播报。如果 figcaption 说“上图”，但实际图在下方或另一页，就会造成理解断裂。
必须自包含、脱离上下文也成立。例如：
- ❌ 错误：
<figcaption>上图展示了登录流程</figcaption> - ✅ 正确：
<figcaption>图2:用户登录流程（含验证码校验与跳转逻辑）</figcaption>
真正容易被忽略的是：figcaption 的语义有效性完全取决于它是否作为 figure 的直接子节点存在——哪怕样式再漂亮，DOM 结构错了，所有无障碍和 SEO 价值就归零。
