如何自動搞定全站圖片的 alt 屬性？
Web 開發人員和內容編輯人員經常會忘記或忽略了 img 標籤的 alt 屬性，這是一個可以提升網站可訪問性和 SEO 效能的重要部分，這個屬性通常用來描述圖片：
<img src="/cute/sloth/image.jpg" alt="A brown baby sloth staring straight into the camera with a tongue sticking out." >
如果你經常在網路上釋出內容，你就應該知道，為圖片提供描述性文字是一件很枯燥的事情。當然，如果只有幾張圖片倒沒什麼問題，但如果我們說的是數百或數千張圖片呢？你該怎麼辦？
讓我們來看看使用谷歌、IBM 和微軟等公司提供的計算機視覺和影象識別服務自動為圖片生成描述性文字的一些可能性。
alt 屬性的文字有什麼用？
alt 屬性是一小段 HTML 程式碼，用於描述頁面上顯示的圖片，但在 Web 開發和編輯內容時經常被忽略。它是如此的不起眼，以至於它似乎對普通使用者沒有任何影響，但它確實具有非常重要的用途：
-
螢幕閱讀器的 Web 可訪問性：假設我們有一個包含大量圖片的頁面，但沒有一張圖片包含了 alt 屬性文字。使用螢幕閱讀器進行衝浪的使用者只能聽到“image”這個詞，這對他們來說這不是很有用。他們只知道這是一張圖片，除此之外沒有其他任何資訊。如果有了 alt 屬性文字，螢幕閱讀器就可以幫助視障人士“看到”圖片裡有什麼，以便更好地理解頁面的內容。有人說一張圖片勝過千言萬語，但如果沒有 alt 屬性文字，這些使用者就錯失了這些千言萬語。
-
如果無法載入圖片，就顯示文字：Web 似乎是絕對可靠的，就像紐約一樣，從來不需要睡覺，但錯誤的連線確實是存在的，如果發生這種情況，圖片往往無法被正確載入，並且出現“損壞”。alt 文字是一種安全措施，它會顯示在頁面上出現“損壞”影象的位置，為使用者提供後備內容。
-
SEO 效能：圖片的 alt 文字也有助於提升 SEO 效能。雖然它並不能讓網頁的搜尋排名更靠前，但它也是提升 SEO 效能的一個考慮因素。
在瞭解了這些重要性之後，希望你能夠在開發和內容編輯期間加入正確的 alt 文字。但是，試圖為大量積壓的影象進行詳細描述可能是一項艱鉅的任務，特別是如果你的時間很緊迫或者奔忙於多個專案之間。
如果有一種方法可以在上傳圖片時應用 alt 文字該有多好！如果有辦法檢查頁面是否缺少 alt 屬性，並自動填充它們，那該有多好！
解決方案來了！
計算機視覺（或影象識別）實際上已經出現了相當長一段時間。谷歌、IBM 和微軟等公司都提供了自己的公開 API，開發人員可以利用這些功能來識別影象以及影象中的內容。
有些開發人員已經在使用這些服務，並建立了自己的外掛來生成 alt 文字。以 Sarah Drasner 的 生成器 為例，它演示瞭如何使用 Azure 的計算機視覺 API 為上傳的圖片或 URL 連結的圖片建立 alt 文字。
Jacob Peattie 開發了一個自動 alt 文字 外掛 ，這也是一個使用了 Azure 計算機視覺 API 的 WordPress 外掛。它基本上是工作流的一個補充，允許使用者上傳圖片並自動生成 alt 文字。
人工智慧的介入
我曾經嘗試過一些人工智慧服務，我敢說，Azure 計算機視覺生成的結果是最好的。谷歌和 IBM 提供的服務肯定也有他們的專長，它們仍然可以識別出影象並得到正確的結果，但微軟的服務非常好，非常準確，以至於我認為沒有必要再去考慮其他選項。
建立影象識別外掛非常簡單。首先，訪問微軟 Azure Computer Vision 。你需要登入或建立帳戶，這樣才能獲取外掛所需的 API 金鑰。
進入儀表盤後，搜尋並選擇“Computer Vision”，然後填寫必要的資訊。
image
等待平臺啟動一個計算機視覺例項，在例項啟動後就可以使用 API 金鑰。
現在開始進入有趣的部分！出於演示的目的，我將使用普通的 JavaScript 程式碼。對於其他語言，你可以檢視 文件 。
你可以直接複製和貼上下面的程式碼，只需要替換佔位符就可以了。
var request = new XMLHttpRequest();
request.open('POST', 'https://[LOCATION]/vision/v1.0/describe?maxCandidates=1&language=en', true);
request.setRequestHeader('Content-Type', 'application/json');
request.setRequestHeader('Ocp-Apim-Subscription-Key', '[SUBSCRIPTION_KEY]');
request.send(JSON.stringify({ "url": "[IMAGE_URL]" }));
request.onload = function () {
var resp = request.responseText;
if (request.status >= 200 && request.status < 400) {
// Success!
console.log('Success!');
} else {
// We reached our target server, but it returned an error
console.error('Error!');
}
console.log(JSON.parse(resp));
};
request.onerror = function (e) {
console.log(e);
};
好吧，讓我們來看看 AI 服務的一些關鍵術語。
位置：這是在獲取訂閱金鑰之前選擇的服務的訂閱位置。如果由於某種原因忘記了位置，可以轉到“Overview”頁面，並在“Endpoint”下找到它。
訂閱金鑰：這是為外掛解鎖服務的金鑰，可以在“Keys”頁面中獲得。其中有兩個，但使用哪一個並不重要。
圖片 URL：這是需要獲取 alt 文字的圖片的路徑。請注意，傳送給 API 的圖片必須滿足特定的要求：
-
檔案型別必須是 JPEG、PNG、GIF、BMP；
-
檔案大小必須小於 4MB；
-
尺寸應該大於 50×50 畫素。
易如反掌
感謝這些大公司為開發人員開放他們的服務和 API，現在任何人都可以相對輕鬆地使用計算機視覺。作為一個簡單的演示，我將下面的圖片上傳給 Azure Computer Vision API。
image
這個服務返回以下這些詳細資訊：
{
"description": {
"tags": [
"person",
"holding",
"cellphone",
"phone",
"hand",
"screen",
"looking",
"camera",
"small",
"held",
"someone",
"man",
"using",
"orange",
"display",
"blue"
],
"captions": [
{
"text": "a hand holding a cellphone",
"confidence": 0.9583763512737793
}
]
},
"requestId": "31084ce4-94fe-4776-bb31-448d9b83c730",
"metadata": {
"width": 920,
"height": 613,
"format": "Jpeg"
}
}
你可以從中選擇可能用於圖片的 alt 文字。如何構建這個功能取決於你：
-
你可以建立一個 CMS 外掛，並將其新增到內容工作流中，當上載圖片並將其儲存到 CMS 中時，會生成影象的 alt 文字。
-
你可以開發一個 JavaScript 外掛，如果載入的圖片缺少 alt 文，可以即時新增 alt 文字。
-
你可以建立一個瀏覽器擴充套件程式，當它發現網頁中的圖片缺少 alt 文字時，會自動為它們新增 alt 文字。
-
你可以編寫程式碼來搜尋現有資料庫或內容儲存庫，找出缺失的 alt 文字，並更新它們，或建立拉取請求做出相應的更改。
請注意，這些服務並非 100％準確。它們有時候會返回低置信度和與主題完全不一致的描述。但是，這些平臺也在不斷學習和改進。畢竟，羅馬不是一天建成的。