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 不等於其他格式已經完整保留圖片語義；僅憑畫面正常，也不能判斷輔助閱讀是否符合預期。先確定交付格式和閱讀用途，再覈對對應成品，避免只改了源文件中的一行文字就結束檢查。