用figure和figcaption实现无障碍图文排版，须满足三点：内容可独立抽离、figcaption为首个子元素、alt与figcaption分工明确；仅独立图表适用figure，轮播图等非独立图应直接用img+alt。
要用好 figure 和 figcaption 实现真正无障碍的图文排版，关键不是“加个标题”，而是让图像和说明在语义、结构、读屏逻辑上严丝合缝。核心就三点：内容必须独立可抽离、figcaption 必须是第一个子元素、alt 与 figcaption 各司其职。
先判断：这张图配不配用 figure
不是所有图都该进 figure。只有满足以下任一条件才适用：
- 这张图（或代码块、图表、引用）被删掉后，正文主干逻辑依然完整
- 它能单独放在附录、侧栏或参考文献里，且仍被准确识别和引用（比如“见图2.1”）
- 它承载明确上下文信息，如“图3：2024年用户留存率对比”“清单1：JWT认证响应结构”
轮播图、头像、banner、装饰图标、仅辅助某句话理解的示意图——这些都不属于独立单元，直接用 img + alt 即可，硬套 figure 反而干扰读屏器。
figcaption 必须放最前面，别靠 CSS 倒序
HTML 结构顺序决定读屏器播报顺序。屏幕阅读器会先读 figcaption，再读图片内容。用户带着标题上下文去理解图像，才不会困惑“这张图到底在讲什么”。
- ✅ 正确写法：
图1：后台权限管理流程图 - ❌ 错误做法：把 figcaption 放后面，再用
flex-direction: column-reverse拉回顶部——视觉对了，语义断了 - ⚠️ 注意：浏览器默认常把 figcaption 渲染在底部，但这只是样式表现；DOM 顺序才是无障碍依据
alt 和 figcaption 分工要清晰
两者不是重复项，而是互补角色：
-
alt 回答“图里有什么”：描述图像本身内容，供无图环境或视障用户感知视觉信息。例如：
alt="折线图：横轴为月份，纵轴为活跃用户数，Q1至Q3呈上升趋势，Q4小幅回落" -
figcaption 回答“这张图为什么在这”：说明其文档角色、结论或来源。例如：
图4：2024年用户增长拐点出现在7月，与暑期营销活动启动时间吻合
避免 figcaption 写“如图所示”“上图”“截图”这类空洞词；也别让 alt 描述主观结论（如“效果很好”），那该由 figcaption 来表达。
基础样式与响应式建议
figure 默认有上下 margin，这是为“独立单元”预留的语义呼吸空间，不建议直接设 margin: 0。调整布局优先用现代 CSS：
- 上图下文（默认流）：无需额外样式，figcaption 在首，自然符合阅读流
- 左图右文：给 figure 设
display: flex; align-items: flex-start;，控制 img 宽度和文字区域最小宽度 - 小屏适配：用
@media (max-width: 768px)切回 column 布局，避免文字被压缩 - 多图并列？每个图一个 figure，共用标题请外包
或，别让一个 figcaption 覆盖多个 figure
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
