作者林克寰 ． 2023 年 07 月 31 日

社群媒體圖片替代文字指南

在 Facebook, X, Instagram 這些社群媒體發文，免不了配上幾張圖片。任何圖片都應該加上替代文字，這是種讓電腦軟體讀取圖片內容「文字版本」的資訊，是確保所有身心障礙者都能同等參與社群的關鍵基礎。數位發展部的社群媒體採用這種技術，希望全民在數位世界都能平等互動。

社群媒體的圖片特性

社群媒體是一種製作網頁內容的工具，社群媒體的經營者或許為了讓操作流程更簡明，不會提供全部的網頁技術；相較於一般網頁內內容，社群媒體發文的圖片經常有這些特性：

  • 圖片無法加上超連結。
  • 圖片「關聯」文字內容的機制較受限，例如無法使用 <figure> 及 <figcaption> 加上圖說文字。
  • 無法設定成可被輔助科技忽略的狀態，因此無法隱藏純粹裝飾用的圖片，暗示所有圖片皆有某些實質意義或功能。
  • 一則發文能附加的圖片數量有限。
  • 圖片可能被平台以裁切後的樣貌呈現，或強制縮放呈現。
  • 發佈後不容易反覆編修、抽換。

PDIS 協助公務部門的社群媒體負責人，想讓公務部門對全民的社群觸及更有效、能促進平等參與，跟數位發展部的夥伴合作整理一份簡短指南，說明圖片的「替代文字」應該如何撰寫，但不涉及如何挑選或製作圖片，也不涉及社群媒體文字內容或影音內容。

指引內容

這份指南總共含有六條指引，每條指引都分成「應該做什麼」跟「應該避免做什麼」兩部分。這六條指引的內容是：

描述，不臆測

  • 忠實描述圖片的實際內容。
  • 不寫圖片未呈現的資訊。
  • 不做價值觀或感受性的判斷。

替代文字讓資訊可以透過非視覺的語言方式傳達，不該用來取代閱聽者的感受及思考能力。

同一張圖片可能對不同人引起不同理解或感受，這段心智歷程對每個人都同樣重要，沒有人應該阻止另一個人用自己的方式去理解及感受內容。

PDIS 建議把視覺性的內容元素轉換成文字語言內容，僅此為止，讓每個人都有平等的機會能夠接收內容。

簡潔、聚焦

  • 聚焦在重要的人、事、時、地、物。
  • 省略無關圖片用意的細節。
  • 避免單純重述發文的文字內容（可以先說明內容與發文相同，再重述內容）。

圖片常常用來快速傳達重要的意圖，使用構圖技巧來引導觀看者的目光，讓閱讀者從整張圖片中看到意圖焦點，再循著創作者暗示的視覺路徑，接收次要的視覺線索，忽略不重要的視覺背景。

PDIS 建議讓替代文字維持同樣效果：讓閱聽者能夠同樣有效地獲得焦點意圖，循序接收次要內容元素，忽略不重要的背景。不要用大量瑣碎文字導致閱聽者迷失在繁雜細節之中。

純文字

  • 謹慎使用井號標籤 (#tag) 及提及 (@mention) 文字。
  • 避免挪用特殊文字 (𝕗𝕒𝕟𝕔𝕪 🅵🅾🅽🆃 𝓰𝓮𝓷𝓮𝓻𝓪𝓽𝓸𝓻)。
  • 避免使用顏文字 (🙅)。

社群媒體平台會把發文中的 #tag 井號標籤跟 @mention 提及自動轉換成超連結，但是在替代文字裡不會。替代文字內容如果用上 #、@ 符號，或者特殊文字、顏文字，很容易造成困擾，因為這些內容會怎麼轉換成語音或點字輸出，充斥著不確定。閱聽者的輔助科技廠牌、版本、偏好設定，可能導致這些內容完全被忽略，或者只忽略一半，或者輸出成意料之外的結果，例如「𝕗」可能念成「問號問號」而不是「f」、「🙅」念成「不行」而不是「雙手在胸前交叉的女性上半身像」。

情境脈絡與獨特性（辨識性）

  • 如果使用多張相似圖片，各圖片的替代文字應該實現明確對應，足以讓使用者理解相似圖片的不同之處。
  • 如果從視覺上，圖片跟社群媒體發文內容之間可以「看出」某種關聯性，圖片替代文字也應該維持同樣的關聯性。
  • 避免在多張圖片使用完全相同的替代文字，或僅對相同文字附加不同流水號（合照 1、合照 2）。

PDIS 相信社群媒體上的圖片內容應該要服務發文意圖，而不是濫竽充數，這意味著每一張圖片都有某個理由，能夠解釋為什麼那張圖片出現在閱聽者面前。替代文字既然用而替代圖片的視覺呈現，也要能夠交代這個理由，否則就該考慮不要放上圖片。

同等參與

  • 圖片從視覺上帶給使用者什麼內容，就用替代文字傳達同等內容。
  • 不要擅自決定「這張圖片不重要」或「使用者不會想知道這張圖片的內容」而寫出含糊或不屬於圖片內容的替代文字。

每個人都可以有獨特的生活經驗，身心障礙的情況可能從生命中的任何時刻開始發生，影響的程度與型態也各不同。不是每個視障者都完全失去視覺，也不是每個全盲的視障者都沒有凝視世界的經驗。

想讓社群媒體分享達到最大觸及，自然不該否定任何人的經驗。PDIS 相信，用心傳達的內容，就能傳達到閱聽者的心中。

不求完美，但求進步

  • 建立回顧檢討的機制與習慣。
  • 下次寫出更好的替代文字就是進步。
  • 不需要為了替代文字而刪文重發。

任何內容創作都是主觀的決定，替代文字也是如此。我們在文字、音樂、影像、圖片、聲音的各種創作都難以完美，但是我們可以從中獲得豐富的互動經驗回饋，多認識我們的互動對象，也多認識我們自己，然後下一次就可以試著調整表現的技法與方式，這個過程也是社群的寶貴價值所在。

替代文字也是如此。

PDIS 認為不要因為擔心不夠好而駐足不前，相反地，所有的不完美都是交流互動的新契機，也是進步的基石。

實例解說

為了協助公務部門的社群媒體負責人更具體地理解這些指引，PDIS 把社群媒體可能使用的圖片分類整理，用實際的例子解釋。每個實例都包含「替代文字範例」及「解析討論」兩個部分，並且附上這個實例的線上連結，幫助指引讀者能夠返回社群媒體平台，確認圖片所在的情境脈絡。

舉例來說，在「文字畫面擷圖」這類的圖片，PDIS 以唐鳳部長這則推文提供建議：

替代文字範例

台灣就業金卡 (TGC) 網頁畫面截圖，列出就業金卡的其他資格條件：

2. Previously or currently holding a position in a digital economy-related industry or field in another country or in Taiwan with a most recent monthly salary of at least NT$160,000.

3. The person has graduated with a doctorate from one of the top 500 universities listed in the most recent QS World University Rankings, Times Higher Education World University Rankings, or U.S. News & World Report Rankings.

4. Those with expertise in the products or services required in the digital economy-related industries or fields, have obtained a doctoral degree in related fields at a domestic or foreign university, and have either received domestic or foreign awards recognized by the Ministry of Digital Affairs, or have more than four years of work experience in related fields.

網頁列出的各項資格條件，皆可展開揭露詳細的辦理方式。

解析討論

這張圖片是以「引用線上資訊」的方式，補充推文內容做出答覆。除了在替代文字裡提供詳實文字，還有幾個重點：

  • 要寫出這是 TGC 網頁的畫面截圖。
  • 要描述各項資格條件在網頁上還有更詳細的資訊。雖然圖中第 2. 項已經處於展開的狀態，且可見到應備齊文件的資訊，但這個視覺線索只是提示「有更詳細的資訊，可以到網頁上查詢」，不必在替代文字中連這些都抄寫出來。
  • 網頁畫面截圖中，可以看到有些字詞因為排版因素加上連字號分成兩行 (uni-versity)，在替代文字裡可以組合回來 (university)，以利閱讀或報讀。

目前在 PDIS 製作提供的指南中，包含下列這幾類的圖片情境：

  1. 純文字圖片
  2. 文字畫面擷圖
  3. 文字圖卡
  4. 照片（含翻拍）
  5. 資訊圖表及表格
  6. 繪圖

每一種情境類別還可能再細分出不同的編排類型，例如「照片（含翻拍）」細分成：

  1. 非正面人物情境照片
  2. 官方直播畫面
  3. 會議全貌照片集
  4. 兩人合照
  5. 多人合照
  6. 多人合照及相似照片集
  7. 翻拍電腦畫面
  8. 景物照片

藉由這樣的整理及實例討論，PDIS 希望能夠把這些指引付諸現實，做出品質更好的社群媒體內容。

輔助工具

PDIS 建議維運社群媒體內容的同仁，可以利用下列工具，確認發佈的內容是否都已加上合適的替代文字：

Social visual alt text 瀏覽器擴充套件

Alt or Not 瀏覽器擴充套件

內建報讀軟體

相關參考資訊