產品設計師講解：如何寫出簡潔易懂的 alt 圖片替代文字（有實例）
2021/07/01閱讀時間約 5 分鐘
大家好！我是在東京打工的山姆！最近東京進入了梅雨季，室內濕氣超級重的，不過在家上班的好處就是不用出門通勤淋雨🌧️可以用一個超然的心情看著外面的烏雲（然後想著什麼時候能曬衣服）
今天的主題延續上一篇關於無障礙網站的主題，想要跟大家聊聊關於alt圖片替代文字應該寫些什麼比較好呢？
看完本篇文章你將會收穫：
・什麼是 alt 圖片替代文字
・什麼場合會需要用到alt圖片替代文字？
・alt替代文字的失敗案例
・應該怎麼去寫alt 圖片替代文字？
・實例講解，手把手教你
什麼是 alt 圖片替代文字
alt 圖片替代文字（以下簡稱alt文字），字面上的意思就是代替圖片出現的文章。
例如我現在想要在medium上面寫一篇關於如何做麵包的文章，其中可能會出現很多關於步驟的詳細說明圖，如下：
掰惹位，這個照片我也加上了alt文字唷！你知道怎麼看嗎？🥴
掰惹位，這個照片我也加上了alt文字唷！你知道怎麼看嗎？🥴
什麼場合會需要用到alt圖片替代文字？
SEO強化
因為網路爬蟲不認識圖像，只認識文字，如果能夠好好加入alt文字的話，其實也是給自己的文章增加了許多關鍵字，使用者在搜索的時候也有可能更容易搜索到你的內容喔！
便於使用語音輔助功能（如Voiceover的讀者）閱覽
這一點非常關鍵！大家有想過視覺障礙者在看自己的內容時，是怎麼「閱覽」自己的圖片的嗎？能夠使用alt文字編輯自己的文章的話，實際上能夠讓使用語音輔助功能的使用者更理解自己的內容！
圖片跑不出來的時候可以讓使用者了解圖片內容
大家應該也有跟我一樣有在某些地下室或是電車站想要瀏覽一些重要資訊的時候偏偏loading小圈圈一直轉的著急時刻吧！（就會把手機舉到頭頂上試圖收到更多電波之類的）一般來說文字緩衝的會比圖片或是影音檔快，這種時候如果圖片終究緩衝不出來的話，有圖片替代文字至少能讓使用者知道這個位置的圖片想要表示什麼，進而不一定需要緩衝出全部圖檔。
alt替代文字的失敗案例
在說明如何正確地寫出好懂的alt文字之前，先來看看常見的失敗案例吧笑
・「圖片」:謝囉但是我知道是圖片啦😅
・「一張圖表」：怎樣的圖表？這張圖表說明了什麼？
・「螢幕截圖」：什麼螢幕截圖？這張截圖想要表達什麼？
・「nadya-spetnitskaya-tOYiQxF9-Ys-unsplash.jpg」：告訴我檔名我也不知道你想說什麼⋯⋯
・「揉麵 麵包 手 人」：雖然是有說到SEO，但是真的照關鍵字的邏輯寫的話，語音輔助功能的使用這就完全聽不懂了⋯⋯
應該怎麼去寫alt 圖片替代文字？
大原則：想像當要講電話的時候，你會怎麼表達這張圖片呢？
在這個大原則下，可能會有幾的不同的展開方式：
👉本身有寫著文字的圖片：可以把圖片中有文字的部分直接寫成alt文字
【💡ALT文字提案】
7/1開啟零碳新生活。這是歐萊德的永續全綠生活方案，那你的呢？精選單品任二入結帳優惠368元起/組。今日結帳享九折。
👉想要傳達氛圍，感情的氣氛型圖片：把圖片想要傳達的重點與情緒整理成文字
要加alt文字常常會出現的困擾可能就是那種，其實也沒有特別意思但是就是好看（？）所以放進去的圖片吧！
人物專訪啦，或是僅僅只是作為輔助說明的配圖（如：我想要做一篇關於WFH心得的文章而隨便找來的圖片等），這些可以視圖片的重要程度來描寫圖片想要傳達的情緒與重點。
【💡ALT文字提案】
・照片：UX設計師與使用者。
・照片：正在進行使用者測試的UX設計師跟使用者。
・照片：正在微笑進行使用者測試的UX設計師跟使用者。
【💡ALT文字提案】
・照片：在家上班中的設計師。
・照片：在家上班中的設計師。躺在沙發上使用ipad進行繪圖。
・照片：在家上班中的設計師。躺在沙發上使用ipad進行繪圖，旁邊伴隨著愛貓。
👉螢幕截圖：把截圖想要表達的用文字說明清楚
有時候為了輔助說明文章，我們會放入螢幕截圖。此時我們應該試著試著想像在不使用圖片的情況下如何說明這張圖片想要表達的內容。如果沒有辦法完整表達的話，可以說明這張圖的主要用途。
舉例來說，我想要用下面這張圖來說明Facebook的翻譯功能：
【💡ALT文字提案】
・螢幕截圖：Facebook的貼文翻譯功能。當出現非母語的貼文的時候，就會自動轉換成自己的母語，並且在貼文下方顯示「查看原文」和「為此翻譯評分」的按鈕。
👉複雜的圖表，圖片：把圖表想要表達的用文字說明清楚
可能這種圖表系的圖片最讓人感到頭痛吧！（畢竟做圖表就是讓人可以把用文字難以表達的東西表達出來嘛）雖然下面是用馬斯洛的需求金字塔舉例，不過有許多圖片跟圖表遠比這個複雜許多，如果覺得沒辦法完整說明，就可以簡要表達主旨。
【💡ALT文字提案】
・圖表：馬斯洛的需求層次。從下而上分為六個層次：生理的需要、安全的需要、愛與歸屬的需要、受尊重的需要、自我成就的需要、超越個人或靈性的需要。
👉本身在圖片下方具有圖片說明：沒有完整說明的部分可以補充，沒有的話簡潔說明即可
在做這篇文章的時候我發現有許多網站其實已經具有圖片說明了👏
【💡ALT文字提案】
照片：公共休息空間的桌椅
以上就是關於alt文字如何編輯的一些小小例子啦！當然根據產業或者領域，我們在生活中遇到的例子也會比這個複雜許多，如果大家有比較想知道怎麼編輯的alt文字的圖片，歡迎在下面回覆我，讓我們一起包容性設計的brain strorming吧！🙌
留言0
查看全部