Markdown图片的替代文本、标题和图注有什么区别：导出前按阅读用途核对

开始前先确认

最实用的判断是：看不到图片时需要知道什么，就考虑替代文本；所有读者都应看到的说明，写进正文或图注；不要把关键信息只放在 title 里。

同一张图的三种文字，各负责什么

以下是假设性示例，文件名和内容只用于说明语法：

![交接流程：收集材料、核对附件、确认接收](handover.png "交接流程示意")

图1：交接前由提交方核对附件，接收方完成最后确认。

CommonMark 图片语法在输出 HTML 时，通常将图片描述用于 alt 属性，并把可选标题单独输出为 title 属性。它们是两个不同字段，不能因为都叫“说明”就互相替代。CommonMark 图片规则给出了对应关系。

这里的独立段落能够承载可见说明，但它仍是普通段落，不自动获得专用图注结构。先把读者必须知道的信息写清楚，再决定是否需要更复杂的排版。

替代文本先看图片用途，再看画面

同一幅图放在不同上下文，可能需要不同的替代文本。W3C 的 替代文本决策树按图片用途和已有文字判断处理方式：承载信息的图片需要相应文字替代，纯装饰图片可以使用空替代文本，链接或按钮图片应说明其功能。

以下三个场景都属于假设，写作时要用实际图片和页面内容替换判断依据。

场景一：流程信息图。 假设图中只有“收集材料→核对附件→确认接收”三个节点，替代文本就可以写明这个顺序。若图中还包含多个分支和例外条件，建议在附近正文完整列出流程，再用简短替代文本指出图片主题及详细说明位置。不要为缩短 alt 而让关键条件只留在图里。

场景二：段落间的装饰波纹。 假设波纹仅用于视觉分隔，不表示状态，也不传达正文以外的信息，可写：

![](wave-divider.png)

使用空内容之前，先问一句：去掉图片后，读者会不会失去某条信息或操作入口？如果会，就需要重新判断用途。不要把所有封面、图标或小图片一律归为装饰。

场景三：图片本身就是链接。 假设一张文件图标用于打开操作手册，替代文本可以描述目的：

[![打开操作手册](manual-icon.png)](manual.html)

“打开操作手册”比“蓝色文件图标”更能说明这个入口的用途。若同一链接里已经有充分的可见文字，还应结合整体内容判断是否重复；不能脱离页面布局机械套用一句话。

要图下始终有说明，就写可见图注

给图片加了 title 后仍看不到图下注释，不必反复修改引号。先把必须展示的说明放进图片后的独立段落，再在目标阅读环境检查。title 的呈现方式不应成为读者获取关键信息的前提。

如果目标系统支持原始 HTML，也可以考虑用 figure 和 figcaption 表达图片与图注的关系；使用之前先按 Markdown 原始 HTML 过滤排查确认相关结构能否保留。未确认支持时，不要只在源码里加入标签就认为成品已经具备对应效果。

还有一种容易混淆的情况：图片没有加载，只显示文字。这时应先按 HTML 图片路径检查核对资源位置，再检查替代文本质量。写好了说明，不能证明图片文件可以被读取。

用这张表检查交付文件

建议先保留原文件，选一张信息图、一张装饰图和一个图片链接做小样本，再批量修改。需要交付 HTML 或 PDF 时，结合 Markdown 导出检查流程检查实际文件。

HTML 中存在 alt 不等于其他格式已经完整保留图片语义；仅凭画面正常，也不能判断辅助阅读是否符合预期。先确定交付格式和阅读用途，再核对对应成品，避免只改了源文件中的一行文字就结束检查。