產品設計師講解：如何寫出簡潔易懂的 alt 圖片替代文字（有實例）
閱讀時間約 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吧！🙌
25會員
18內容數
分享一些在日本做UX或是產品設計的事。在科技公司的雜草堆角落做田野調查。現學現賣專家。
關注人的心理健康，認知心理學。希望能夠用設計的力量讓世界更好。
使用者設計/無障礙設計/包容性設計/Mental wellbeing/Vulnerability
留言0
查看全部
你可能也想看
Google News 追蹤
你想寫文案? 分享自己的產品卻不知道怎麼寫??有好的產品卻賣不出去?而要撰寫一篇能夠轉換率突破100%的廣告文案，似乎是一個夢想，但這並不是遙不可及的。只要掌握了正確的技巧和方法，你也可以輕鬆地創作出讓人難以抗拒的文案。
如果把一篇文章比喻為豆腐，先學習好如何做豆腐，再來切塊（換段）、切絲（換行）。許多網路發表的人常常用切塊或切絲，把自己的文章拆開，這並不妨礙讀者吸收，反而因為適合閱讀而更好消化，如果豆腐沒有做好，那無論是切塊、切絲，讀起來就是有點不對勁。
你熱愛探索美食，想將各式甜點化為文字？
但只要寫到甜點，便找不到詞彙，腦袋一片空白？
明明小說裡的甜點看來那麼美味，怎麼換到自己筆下就這麼乏善可陳？
或是——
你想參加方格子甜點徵文，卻又不知如何下筆嗎？
那麼這篇文章一定能幫上你的忙！
其實，昨天原本想的是用回以前的部落格來寫點什麼，
但因為某人的推薦，就到這裡試了一下。
照某人的說法是，這裡寫作可以賺錢(？)
啊~正確的說法應該是，這是一個可以讓創作變成麵包的地方。
可是我沒有要寫什麼來賺錢的想法呀！？
所以本來興趣缺缺，
不過因為某人的一句「要與時俱進，學習新工具」，
好吧，為
有時候講話會口吃，考托福口說的時候曾經一個字都說不出來，現在在澳洲當雲端架構師，指導企業設計和規劃雲端解決方案。
同時經營《中途筆記》部落格與 Facebook 粉專，曾受邀至各大企業擔任教練與講師、作品刊登 10 多個媒體。
#海外職場 #跨文化溝通 #雲端運算 #閱讀筆記
這篇文章提供了三個內容創作的方向供讀者參考，包括以目前工作為發想點、對感興趣的領域進行內容創作、以及根據自身能力進行創作。提供了數個例子，幫助讀者理解如何開始內容創作。
我是否會跟創作者討論作品的內容?
創作者的內容是他獨一無二的部分，我要做的是強化這個部分，讓實體成品在視覺、觸覺、甚至嗅覺上有更加不同的感受。
寫作其實不是一件容易的事情，除了要有靈感外，長時間撰寫其實對於手部也是很大的負擔，如果你平日工作又是高強度使用鍵盤更是如此。
這邊我會分享我自己如何使用 AI 來幫助我更輕鬆跟高效的產出，除了輕鬆外，也讓效率大幅的提升。
在快速變化的數位時代，文案成為了吸引注意力的關鍵。「寫文案有什麼好處？」、「作文不好，可以寫文案嗎？」、「沒有靈感，不知道要寫什麼？」，相信許多人都對寫文案都有一樣的疑問，透過這篇文案指南，將帶大家了解文案撰寫技巧、使用ChatGPT撰寫文案，以及如何選擇和使用SEO關鍵字，進一步提升文案效果。
你想寫文案? 分享自己的產品卻不知道怎麼寫??有好的產品卻賣不出去?而要撰寫一篇能夠轉換率突破100%的廣告文案，似乎是一個夢想，但這並不是遙不可及的。只要掌握了正確的技巧和方法，你也可以輕鬆地創作出讓人難以抗拒的文案。
如果把一篇文章比喻為豆腐，先學習好如何做豆腐，再來切塊（換段）、切絲（換行）。許多網路發表的人常常用切塊或切絲，把自己的文章拆開，這並不妨礙讀者吸收，反而因為適合閱讀而更好消化，如果豆腐沒有做好，那無論是切塊、切絲，讀起來就是有點不對勁。
你熱愛探索美食，想將各式甜點化為文字？
但只要寫到甜點，便找不到詞彙，腦袋一片空白？
明明小說裡的甜點看來那麼美味，怎麼換到自己筆下就這麼乏善可陳？
或是——
你想參加方格子甜點徵文，卻又不知如何下筆嗎？
那麼這篇文章一定能幫上你的忙！
其實，昨天原本想的是用回以前的部落格來寫點什麼，
但因為某人的推薦，就到這裡試了一下。
照某人的說法是，這裡寫作可以賺錢(？)
啊~正確的說法應該是，這是一個可以讓創作變成麵包的地方。
可是我沒有要寫什麼來賺錢的想法呀！？
所以本來興趣缺缺，
不過因為某人的一句「要與時俱進，學習新工具」，
好吧，為
有時候講話會口吃，考托福口說的時候曾經一個字都說不出來，現在在澳洲當雲端架構師，指導企業設計和規劃雲端解決方案。
同時經營《中途筆記》部落格與 Facebook 粉專，曾受邀至各大企業擔任教練與講師、作品刊登 10 多個媒體。
#海外職場 #跨文化溝通 #雲端運算 #閱讀筆記
這篇文章提供了三個內容創作的方向供讀者參考，包括以目前工作為發想點、對感興趣的領域進行內容創作、以及根據自身能力進行創作。提供了數個例子，幫助讀者理解如何開始內容創作。
我是否會跟創作者討論作品的內容?
創作者的內容是他獨一無二的部分，我要做的是強化這個部分，讓實體成品在視覺、觸覺、甚至嗅覺上有更加不同的感受。
寫作其實不是一件容易的事情，除了要有靈感外，長時間撰寫其實對於手部也是很大的負擔，如果你平日工作又是高強度使用鍵盤更是如此。
這邊我會分享我自己如何使用 AI 來幫助我更輕鬆跟高效的產出，除了輕鬆外，也讓效率大幅的提升。
在快速變化的數位時代，文案成為了吸引注意力的關鍵。「寫文案有什麼好處？」、「作文不好，可以寫文案嗎？」、「沒有靈感，不知道要寫什麼？」，相信許多人都對寫文案都有一樣的疑問，透過這篇文案指南，將帶大家了解文案撰寫技巧、使用ChatGPT撰寫文案，以及如何選擇和使用SEO關鍵字，進一步提升文案效果。