Web開發(fā)人員和內(nèi)容編輯人員經(jīng)常會忘記或忽略了img標(biāo)簽的alt屬性，這是一個可以提升網(wǎng)站可訪問性和SEO性能的重要部分，這個屬性通常用來描述圖片：

???\u0026lt;img src=\u0026quot;/cute/sloth/image.jpg\u0026quot; alt=\u0026quot;A brown baby sloth staring straight into the camera with a tongue sticking out.\u0026quot; \u0026gt;

如果你經(jīng)常在網(wǎng)絡(luò)上發(fā)布內(nèi)容，你就應(yīng)該知道，為圖片提供描述性文本是一件很枯燥的事情。當(dāng)然，如果只有幾張圖片倒沒什么問題，但如果我們說的是數(shù)百或數(shù)千張圖片呢？你該怎么辦？

讓我們來看看使用谷歌、IBM和微軟等公司提供的計算機(jī)視覺和圖像識別服務(wù)自動為圖片生成描述性文本的一些可能性。

alt屬性的文本有什么用？

alt屬性是一小段HTML代碼，用于描述頁面上顯示的圖片，但在Web開發(fā)和編輯內(nèi)容時經(jīng)常被忽略。它是如此的不起眼，以至于它似乎對普通用戶沒有任何影響，但它確實(shí)具有非常重要的用途：

• 屏幕閱讀器的Web可訪問性：假設(shè)我們有一個包含大量圖片的頁面，但沒有一張圖片包含了alt屬性文本。使用屏幕閱讀器進(jìn)行沖浪的用戶只能聽到“image”這個詞，這對他們來說這不是很有用。他們只知道這是一張圖片，除此之外沒有其他任何信息。如果有了alt屬性文本，屏幕閱讀器就可以幫助視障人士“看到”圖片里有什么，以便更好地理解頁面的內(nèi)容。有人說一張圖片勝過千言萬語，但如果沒有alt屬性文本，這些用戶就錯失了這些千言萬語。

• 如果無法加載圖片，就顯示文本：Web似乎是絕對可靠的，就像紐約一樣，從來不需要睡覺，但錯誤的連接確實(shí)是存在的，如果發(fā)生這種情況，圖片往往無法被正確加載，并且出現(xiàn)“損壞”。alt文本是一種安全措施，它會顯示在頁面上出現(xiàn)“損壞”圖像的位置，為用戶提供后備內(nèi)容。

• SEO性能：圖片的alt文本也有助于提升SEO性能。雖然它并不能讓網(wǎng)頁的搜索排名更靠前，但它也是提升SEO性能的一個考慮因素。

在了解了這些重要性之后，希望你能夠在開發(fā)和內(nèi)容編輯期間加入正確的alt文本。但是，試圖為大量積壓的圖像進(jìn)行詳細(xì)描述可能是一項艱巨的任務(wù)，特別是如果你的時間很緊迫或者奔忙于多個項目之間。

如果有一種方法可以在上傳圖片時應(yīng)用alt文本該有多好！如果有辦法檢查頁面是否缺少alt屬性，并自動填充它們，那該有多好！

解決方案來了！

計算機(jī)視覺（或圖像識別）實(shí)際上已經(jīng)出現(xiàn)了相當(dāng)長一段時間。谷歌、IBM和微軟等公司都提供了自己的公開API，開發(fā)人員可以利用這些功能來識別圖像以及圖像中的內(nèi)容。

有些開發(fā)人員已經(jīng)在使用這些服務(wù)，并創(chuàng)建了自己的插件來生成alt文本。以Sarah Drasner的生成器為例，它演示了如何使用Azure的計算機(jī)視覺API為上傳的圖片或URL鏈接的圖片創(chuàng)建alt文本。

Jacob Peattie開發(fā)了一個自動alt文本插件，這也是一個使用了Azure計算機(jī)視覺API的WordPress插件。它基本上是工作流的一個補(bǔ)充，允許用戶上傳圖片并自動生成alt文本。

人工智能的介入

我曾經(jīng)嘗試過一些人工智能服務(wù)，我敢說，Azure計算機(jī)視覺生成的結(jié)果是最好的。谷歌和IBM提供的服務(wù)肯定也有他們的專長，它們?nèi)匀豢梢宰R別出圖像并得到正確的結(jié)果，但微軟的服務(wù)非常好，非常準(zhǔn)確，以至于我認(rèn)為沒有必要再去考慮其他選項。

創(chuàng)建圖像識別插件非常簡單。首先，訪問微軟Azure Computer Vision。你需要登錄或創(chuàng)建帳戶，這樣才能獲取插件所需的API密鑰。

進(jìn)入儀表盤后，搜索并選擇“Computer Vision”，然后填寫必要的信息。

等待平臺啟動一個計算機(jī)視覺實(shí)例，在實(shí)例啟動后就可以使用API密鑰。

現(xiàn)在開始進(jìn)入有趣的部分！出于演示的目的，我將使用普通的JavaScript代碼。對于其他語言，你可以查看文檔。

你可以直接復(fù)制和粘貼下面的代碼，只需要替換占位符就可以了。

var request = new XMLHttpRequest();request.open('POST', 'https://[LOCATION]/vision/v1.0/describe?maxCandidates=1\u0026amp;language=en', true);request.setRequestHeader('Content-Type', 'application/json');request.setRequestHeader('Ocp-Apim-Subscription-Key', '[SUBSCRIPTION_KEY]');request.send(JSON.stringify({ \u0026quot;url\u0026quot;: \u0026quot;[IMAGE_URL]\u0026quot; }));request.onload = function () {? ? var resp = request.responseText;? ? if (request.status \u0026gt;= 200 \u0026amp;\u0026amp; request.status \u0026lt; 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服務(wù)的一些關(guān)鍵術(shù)語。

位置：這是在獲取訂閱密鑰之前選擇的服務(wù)的訂閱位置。如果由于某種原因忘記了位置，可以轉(zhuǎn)到“Overview”頁面，并在“Endpoint”下找到它。

訂閱密鑰：這是為插件解鎖服務(wù)的密鑰，可以在“Keys”頁面中獲得。其中有兩個，但使用哪一個并不重要。

圖片URL：這是需要獲取alt文本的圖片的路徑。請注意，發(fā)送給API的圖片必須滿足特定的要求：

• 文件類型必須是JPEG、PNG、GIF、BMP；

• 文件大小必須小于4MB；

• 尺寸應(yīng)該大于50×50像素。

易如反掌

感謝這些大公司為開發(fā)人員開放他們的服務(wù)和API，現(xiàn)在任何人都可以相對輕松地使用計算機(jī)視覺。作為一個簡單的演示，我將下面的圖片上傳給Azure Computer Vision API。

這個服務(wù)返回以下這些詳細(xì)信息：

{? ? \u0026quot;description\u0026quot;: {? ? ? ? \u0026quot;tags\u0026quot;: [? ? ? ? ? ? \u0026quot;person\u0026quot;,? ? ? ? ? ? \u0026quot;holding\u0026quot;,? ? ? ? ? ? \u0026quot;cellphone\u0026quot;,? ? ? ? ? ? \u0026quot;phone\u0026quot;,? ? ? ? ? ? \u0026quot;hand\u0026quot;,? ? ? ? ? ? \u0026quot;screen\u0026quot;,? ? ? ? ? ? \u0026quot;looking\u0026quot;,? ? ? ? ? ? \u0026quot;camera\u0026quot;,? ? ? ? ? ? \u0026quot;small\u0026quot;,? ? ? ? ? ? \u0026quot;held\u0026quot;,? ? ? ? ? ? \u0026quot;someone\u0026quot;,? ? ? ? ? ? \u0026quot;man\u0026quot;,? ? ? ? ? ? \u0026quot;using\u0026quot;,? ? ? ? ? ? \u0026quot;orange\u0026quot;,? ? ? ? ? ? \u0026quot;display\u0026quot;,? ? ? ? ? ? \u0026quot;blue\u0026quot;? ? ? ? ],? ? ? ? \u0026quot;captions\u0026quot;: [? ? ? ? ? ? {? ? ? ? ? ? ? ? \u0026quot;text\u0026quot;: \u0026quot;a hand holding a cellphone\u0026quot;,? ? ? ? ? ? ? ? \u0026quot;confidence\u0026quot;: 0.9583763512737793? ? ? ? ? ? }? ? ? ? ]? ? },? ? \u0026quot;requestId\u0026quot;: \u0026quot;31084ce4-94fe-4776-bb31-448d9b83c730\u0026quot;,? ? \u0026quot;metadata\u0026quot;: {? ? ? ? \u0026quot;width\u0026quot;: 920,? ? ? ? \u0026quot;height\u0026quot;: 613,? ? ? ? \u0026quot;format\u0026quot;: \u0026quot;Jpeg\u0026quot;? ? }}

你可以從中選擇可能用于圖片的alt文本。如何構(gòu)建這個功能取決于你：

• 你可以創(chuàng)建一個CMS插件，并將其添加到內(nèi)容工作流中，當(dāng)上載圖片并將其保存到CMS中時，會生成圖像的alt文本。

• 你可以開發(fā)一個JavaScript插件，如果加載的圖片缺少alt文，可以即時添加alt文本。

• 你可以創(chuàng)建一個瀏覽器擴(kuò)展程序，當(dāng)它發(fā)現(xiàn)網(wǎng)頁中的圖片缺少alt文本時，會自動為它們添加alt文本。

• 你可以編寫代碼來搜索現(xiàn)有數(shù)據(jù)庫或內(nèi)容存儲庫，找出缺失的alt文本，并更新它們，或創(chuàng)建拉取請求做出相應(yīng)的更改。

請注意，這些服務(wù)并非100％準(zhǔn)確。它們有時候會返回低置信度和與主題完全不一致的描述。但是，這些平臺也在不斷學(xué)習(xí)和改進(jìn)。畢竟，羅馬不是一天建成的。

英文原文：https://css-tricks.com/using-artificial-intelligence-to-generate-alt-text-on-images/

更多內(nèi)容，請關(guān)注前端之巔。

會議推薦

2019年6月，GMTC全球大前端技術(shù)大會2019即將到來。小程序、Flutter、移動AI、工程化、性能優(yōu)化…大前端的下一站在哪里？點(diǎn)擊下圖了解更多詳情。

總結(jié)

以上是生活随笔為你收集整理的如何自动搞定全站图片的alt属性？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。