無障礙 圖片的描述性文字
為什麼
在上一個頁面，您瞭解到 有意義的圖片需要描述性文字。在本頁，您將學習 *如何* 編寫。圖片的替代文字是為那些因某種原因無法檢視圖片的使用者準備的。原因可能是連線速度慢、圖片檔案出錯，或者使用者使用了螢幕閱讀器。
什麼
alt 屬性的值應該描述圖片，甚至更好的是圖片的*意圖*。
如何操作
您將學習如何為非互動式圖片、獨立圖示和徽標新增描述性文字。
非互動式圖片
想象一下，您正在*透過電話與朋友解釋一個網頁*，您會如何描述一張圖片？這是編寫描述性圖片文字的好方法。
編輯圖片
在這張 Medium 文章的截圖中，有一張 Google 聯合創始人謝爾蓋·布林的圖片，他正從直升機上跳下。這張圖片的描述性文字可以這樣寫：
"謝爾蓋·布林從直升機上跳傘"
產品圖片
第一張產品圖片顯示的是一袋咖啡。放大後，圖片中有許多有趣的細節，例如品牌名稱、重量和背面的可持續性徽章。
這張圖片的適當替代文字應該是：
"Dr. Nam 整豆咖啡。中度烘焙。500 克。UTZ 認證"
第二張產品圖片顯示的是一件夾克。嘗試做一個簡短的描述，如下所示：
"Kicker Sports 男士夾克。全拉鍊。灰色袖子。正面有黑白圖案。側面有兩個帶紐扣的口袋。"
背景影像
背景圖片通常沒有意義。它們可以用來營造氛圍。有時它們比單純的氛圍更能傳達資訊。讓我們嘗試為圖片想要傳達的內容新增一個文字替代。
Caledon Build 的這個例子有一張房子的背景圖片。不是普通的房子，而是這家公司建造的一棟現代化的房子。文字*“Building the next level”*並沒有告訴使用者他們具體建造哪種房子。這張圖片的描述應該像這樣：
私人住宅，現代建築，線條筆直。極簡主義，帶有一個大車庫
獨立圖示
描述圖示的功能，而不是它的外觀。
Medium 的文章在主標題下方有四個獨立圖示。與其描述圖示的外觀，例如“Twitter logo”，我們應該寫圖示*的作用*：
- "在 Twitter 上分享"
- "在 LinkedIn 上分享"
- "在 Facebook 上分享"
- "在 Medium 上收藏"
徽章
前面的例子中有一個顯示小星星的圖示。該圖示不可互動，它不做任何事情。它*有意義*。它代表付費會員才能閱讀的合作故事。像“黑色星星”這樣的文字描述是沒有意義的。相反，請寫出其含義：
"合作故事"
咖啡產品有兩個徽章。對於這些，我們必須新增文字說明它們代表什麼。第一個有文字*“1 YR”*。在這種情況下，這意味著供應商已經成為付費供應商會員一年了。第二個徽章是兩個黃色方塊的插圖。這個圖示代表金牌供應商，他們擁有高階會員資格。這些徽章應該有如下的替代文字：
"付費供應商一年"
"金牌供應商"
徽標
描述徽標的*意圖*。
在這張 Medium 文章的截圖中，我們有兩個徽標。首先是 Medium 的主徽標。其次是此頻道的徽標，Business Insider。僅僅新增“Medium”和“Business Insider”作為描述性文字是不夠的。使用者可能不知道該徽標是連結到 Business Insider 的網站，還是連結到 Business Insider 在 Medium 上的頻道。在這種情況下，是後者，我們可以這樣寫描述：
- "Medium 主頁"
- "Business Insider 在 Medium 上"
