產品設計師講解：如何寫出簡潔易懂的 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 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
最近閱讀了一本書《做自己的生命設計師：史丹佛最夯的生涯規畫課，用「設計思考」重擬問題，打造全新生命藍圖》其中有提到在千篇一律的生活裡抑或是繁忙的照顧工作中，還是可以找到一些喘息空間「好時光日誌」，主要就在於我們有沒有注意到！
編輯圖示就像金塊，他們幫助讀者在走馬看花瀏覽資訊時，決定是否要認真讀下去，還是一覽而過。這些圖示畫起來很有趣，因為通常有很多不同的方式去描繪一個主題或文章，像是一個遊戲。你也必須考慮到你所溝通的廣大觀眾。每一位看這張圖像的人都必須對它有相同的理解，否則這張圖就失敗了。
【介面設計師與視覺設計師應該如何分工協作?】
你知道介面設計師與視覺設計師，在共同負責一個專案的時候，都是如何協作的嗎?
即使同樣都是為產品外觀所把關的設計師，但所負責的部分卻是大不相同喔!🧐
想知道介面設計與視覺設計互相合作的眉眉角角?趕快點進文章來看看吧！
許多人想要開始經營自己的斜槓事業，雖然腦中大致有個初步的方向，或是大約了解自己的興趣和方向，但仍不確定如何開始設計自己的個人品牌商業模式。
而有了商業模式的設計之後，在撰寫部落格文章也將各有系統和方向，也更容易駕馭相對應的行動呼籲喔！
這篇文章你可以學習到如何設計你的個人品牌商業模式-->
我在新創軟體公司擔任設計快四年，一直有個問題困擾我，就是在產品開發和設計時的溝通過程，每次結束都希望自己能有更好的方式來讓整個溝通流程順利，不僅可以達到溝通目的，還能節省時間成本。
本次是以《別做天兵設計》書籍中的方法來練習，主要會follow書中工具用自己的理解來推測Nike+ Run Club需求分析，由於經驗尚淺且是領域菜鳥，有任何不足或不正確之處，請用力鞭打指教。
互動設計師在拿到需求檔案後，透過思考、設計方法等，把需求轉化為設計方案，再細化成標準的設計原型。
最近新番有興趣的都追完最新進度，處於一種片荒狀態的筆者，想說來補個番。這沒補還好，一補就不得──（以下省略5千字）
從這部系列作的前幾集就可以看出來，作者非常會說故事。我特別喜歡作者處理兩難的時候，所提供的第三種解答。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
最近閱讀了一本書《做自己的生命設計師：史丹佛最夯的生涯規畫課，用「設計思考」重擬問題，打造全新生命藍圖》其中有提到在千篇一律的生活裡抑或是繁忙的照顧工作中，還是可以找到一些喘息空間「好時光日誌」，主要就在於我們有沒有注意到！
編輯圖示就像金塊，他們幫助讀者在走馬看花瀏覽資訊時，決定是否要認真讀下去，還是一覽而過。這些圖示畫起來很有趣，因為通常有很多不同的方式去描繪一個主題或文章，像是一個遊戲。你也必須考慮到你所溝通的廣大觀眾。每一位看這張圖像的人都必須對它有相同的理解，否則這張圖就失敗了。
【介面設計師與視覺設計師應該如何分工協作?】
你知道介面設計師與視覺設計師，在共同負責一個專案的時候，都是如何協作的嗎?
即使同樣都是為產品外觀所把關的設計師，但所負責的部分卻是大不相同喔!🧐
想知道介面設計與視覺設計互相合作的眉眉角角?趕快點進文章來看看吧！
許多人想要開始經營自己的斜槓事業，雖然腦中大致有個初步的方向，或是大約了解自己的興趣和方向，但仍不確定如何開始設計自己的個人品牌商業模式。
而有了商業模式的設計之後，在撰寫部落格文章也將各有系統和方向，也更容易駕馭相對應的行動呼籲喔！
這篇文章你可以學習到如何設計你的個人品牌商業模式-->
我在新創軟體公司擔任設計快四年，一直有個問題困擾我，就是在產品開發和設計時的溝通過程，每次結束都希望自己能有更好的方式來讓整個溝通流程順利，不僅可以達到溝通目的，還能節省時間成本。
本次是以《別做天兵設計》書籍中的方法來練習，主要會follow書中工具用自己的理解來推測Nike+ Run Club需求分析，由於經驗尚淺且是領域菜鳥，有任何不足或不正確之處，請用力鞭打指教。
互動設計師在拿到需求檔案後，透過思考、設計方法等，把需求轉化為設計方案，再細化成標準的設計原型。
最近新番有興趣的都追完最新進度，處於一種片荒狀態的筆者，想說來補個番。這沒補還好，一補就不得──（以下省略5千字）
從這部系列作的前幾集就可以看出來，作者非常會說故事。我特別喜歡作者處理兩難的時候，所提供的第三種解答。