必须在图片具“可抽离性”时用<figure>+<figcaption>：删图后正文逻辑完整，图与说明可独立编号引用；alt需描述视觉细节，figcaption须自包含、不依赖位置，且二者共存不重复。
图片不是“塞进去就行”的装饰元素，语义化用法直接决定它能否被读屏器识别、被搜索引擎索引、被打印或导出时正确保留上下文。错用 <figure> 或漏掉 alt，等于主动放弃可访问性与内容结构。
什么时候必须用 <figure> + <figcaption>
只在图片满足「可抽离性」时才用：删掉它，正文主干逻辑依然完整；挪到附录、侧栏或 PDF 打印页，<figcaption> 仍能独立说明这张图。
- ✅ 正确场景：
<figure>包裹一张微服务调用链路 SVG 图，<figcaption>写“图2.1：gRPC 调用时序”——图和说明可单独编号、引用、归档 - ✅ 正确场景：AI 报错截图 +
<figcaption>标注“图5：fetch() 返回 401 响应体结构” - ❌ 错误场景：段落中写“点击按钮后弹出确认框（如图）”，配一张局部 UI 截图——图是句子的一部分，删掉就语义断裂
- ❌ 错误场景：banner 图、logo、代码旁小图标——它们是装饰或交互组件，不是可编号图元
<img> 的 alt 和 <figcaption> 必须共存且分工明确
alt 是给无法加载图片时的兜底描述，也是屏幕阅读器第一读取内容；<figcaption> 是图元的标题/编号/用途说明，二者不能互换、不能省略、不能重复。
- ❌ 错误：
<img src="admin.png" alt="后台管理界面"><figcaption>图1：后台管理界面布局</figcaption>——alt太笼统，没讲清界面具体内容 - ✅ 正确：
<img src="admin.png" alt="左侧导航栏含‘用户管理’‘角色配置’等菜单项，主区域显示带搜索框的用户列表表格"><figcaption>图1：权限管理模块界面布局</figcaption>——alt描述视觉细节，<figcaption>点明模块归属与作用 - ⚠️ 特别注意：
alt=""表示图片纯装饰，此时绝不可加<figcaption>，否则语义矛盾
<figcaption> 必须是 <figure> 的直接子元素
DOM 顺序决定读屏器播报流。嵌套在 <div> 里、或写在 <img> 中间，都会导致语义断裂，辅助技术可能完全跳过说明文字。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误：
<figure><img><div><figcaption>…</figcaption></div></figure>——<figcaption>不是直接子元素 - ❌ 错误：
<figure><figcaption>…</figcaption><img><p>其他内容</p></figure>——<figcaption>应紧邻图元，且仅一个 - ✅ 正确：
<figure><img><figcaption>图3：用户登录流程时序图</figcaption></figure>——顺序正确、层级扁平、无包裹
最容易被忽略的是 <figcaption> 里的上下文依赖词。“上图”“左侧示意图”这类表述，在 CSS 把图挪到侧边栏或生成 PDF 附录时会彻底失效。标题必须自包含，不靠位置、不靠前后文。
