當你寫圖片的 alt 時，你是否犯了這五個錯誤？

前端小智發表於2023-05-01
微信搜尋 【大遷世界】, 我會第一時間和你分享前端行業趨勢，學習途徑等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

主要討論了編寫替代文字（alt text）時的五個常見錯誤。替代文字用於為視覺受限的使用者提供影像的文字描述。以下是五個需要避免的錯誤：

  1. 冗長的描述：描述應該簡潔明瞭，避免使用過長的句子。一般情況下，125個字元就足夠了。
  2. 忽略功能性圖片：如果圖片具有功能性，如按鈕或連結，描述應明確圖片的功能，而非僅描述圖片外觀。
  3. 描述圖片中的文字：如果圖片中包含文字，替代文字應包含這些文字內容，以便視覺受限的使用者能夠獲取相關資訊。
  4. 以圖片開頭：避免在描述中使用"image of" ，"picture of" 或 "graphic of"等詞語，因為螢幕閱讀器會自動通知使用者有圖片。
    5.完全忽略替代文字：為每張圖片提供替代文字至關重要，哪怕描述很簡單。這有助於提高網站的可訪問性。

總之，為了使網站更具可訪問性，我們應該避免上述五個錯誤，為視覺受限的使用者提供更好的線上體驗。正確使用替代文字有助於改善網站的無障礙效能，讓更多人能夠順利地訪問和使用網站內容。

正文開始~

但是大多數人不知道如何編寫良好的替代文字、我也是其中之一。

我在高中建網站時第一次瞭解到替代文字。但是我的正式課程是在我參加Udacity數字營銷奈米學位課程時開始的，這也是我第一次接觸營銷。

在這個模組中，我學習瞭如何構建易於導航的網站結構、標題標籤、麵包屑和元描述——所有好的東西。我們還學習瞭如何編寫替代文字及其重要性。

有時候，簡單就是殺手

當你詢問他們時，大多數專家的建議也歸結為：描述你所看到的。雖然這是有效的建議，看起來很簡單，但實際上並非如此。

以Udacity的例子為例：這是適當的替代文字嗎？

image.png

如果你閉上眼睛，有人向你朗讀“吃蘋果心臟病”這句話，這是否有助於你理解影像中的內容？

這個例子怎麼樣？

image.png

答案是絕對不行。

我過去只是描述我看到的

兩週前，我看到了湯米·沃克(Tommy Walker)，一位前Shopify高階內容營銷師和編輯，對一篇文章的alt文字使用進行了批評。

image.png

請注意，alt文字沒有傳達稽核結果。具有諷刺意味的是，這篇文章在為可訪問性辯護。但它使觀點更清晰。第一次，我意識到我一直以來都在錯誤地編寫alt文字。

這讓我很好奇，所以我開始進行研究：

  • 我閱讀了許多UX和SEO部落格
  • 我與那些領域的從業者交談過，而且我與一些低視力社群的成員聊天了

這是我學到的並且現在應用於我寫的文章的內容：

1. 一些圖片應該使用空的alt屬性

首先，澄清一下：

  1. alt 屬性是HTML語法
  2. alt文字是指在alt屬性引號中包含的描述
  3. 所有影像都需要一個 alt 屬性，但並非所有影像都需要alt文字。這是兩個不同的事情，所以不要混淆它們。

image.png

那麼，如何知道影像是否需要一個空的 alt 屬性？裝飾性/資訊性/活動性方法。

image.png

裝飾性圖片(DECORATIVE IMAGES)

裝飾性圖片的唯一價值在於美學。如果 alt 被移除，網頁仍然能夠完美地表達意思。

一些例子是沒有文字的網站橫幅和其他設計元素。對於這種型別的影像，我們應該省略描述，但始終包括一個空的 alt 屬性。

<!-- Sample decorative image -->
<img
  alt=""
  src="decorative-banner.png" />

資訊影像(INFORMATIVE IMAGES)

資訊影像為文章中呈現的資訊增加了額外的背景。一些例子包括圖表、圖示、投票結果和產品截圖。在描述它們時要注意。隨著閱讀的進行，我們將學會如何描述它們。

<!-- Sample informative image -->
<img
  alt="A small, black, compact digital camera."
  src="product-photo.png" />

活動圖片(ACTIVE IMAGES)

活動圖片用於執行諸如註冊、下載、收聽、上傳等操作。

它們主要是連結和按鈕。在為這些型別的影像編寫 alt 時，避免使用“Click here”等術語。

相反，使用類似“註冊 Twitter 帳戶”、“轉到帳戶頁面”、“上傳身份證”等描述。

<!-- Sample active image -->
<img
  alt="Upload resume."
  src="upload-prompt.png" />

2. 上下文很重要

alt文字應簡潔準確地描述影像的內容。如果你有一個總體觀點要表達，請讓周圍的文字內容來傳達它。

image.png

例如，這張圖片可以用於：

  • 幫助識別商家名錄
  • 一篇關於不道德的二手車交易公司的揭露報導
  • 一份商業房地產清單，或稱為商業房地產上市
  • 承諾商業復興的政治競選活動

由讀者決定對某事的感受，而替代文字有助於為他們提供完整的故事背景。

這不僅對無障礙性有用，而且在像 SEO 這樣的競爭激烈的領域中也很有用，你將與 HubSpot、Databox、The New York Times 和 Zapier 等巨頭競爭。

3. 螢幕閱讀器和搜尋引擎已經知道這是一張圖片

不需要新增 "image of" ，"picture of" 或 "graphic of" 的字樣。這隻會導致重複，對聽眾來說可能很煩人，特別是如果文章包含大量影像。

相反，使用額外的字元更好地傳達資訊。

image.png

我喜歡下面這個的簡單性：

image.png

4. 將alt text文字編寫為簡單的句子

搜尋引擎最佳化師中的一種黑暗做法是將目標關鍵詞塞入影像的alt文字中。這是一種可怕的使用者體驗。

谷歌的約翰·穆勒（John Muller）多次表示， alt 屬性不會影響普通的谷歌搜尋。

此外，如果你認為需要在alt屬性中填充關鍵字，那麼您就開始走上了錯誤的道路，Google也會像對待Overstock、BMW甚至Google日本一樣對待您。

螢幕閱讀器（如JAWS和NVDA）會朗讀alt文字，就像我們朗讀句子一樣。因此，你應該將你的描述格式化為帶有適當標點和拼寫的常規句子。

沒有一個固定的公式來規定替代文字應該有多長。你應該簡明扼要地準確描述影像中存在的所有重要和相關細節。

在需要描述研究報告中的複雜圖表或圖形等情況下，考慮遵循 W3C 處理複雜影像的教程。請注意， longdesc 方法不再有效（請參考連結的註釋部分）。

5. 不要在alt文字中重複標題

將字幕逐字複製到替代文字中是電子商務中的一種流行做法，因為營銷人員認為這樣可以提高搜尋引擎排名，但實際上這會導致糟糕的使用者體驗。

這是因為螢幕閱讀器最終會重複相同的單詞。想象一下這種情況發生在兩個、三個甚至五個影像上，你很快就能看到殘障人士的體驗如何下降。

字幕和 alt 文字有不同的用途。字幕通常用於新增詳細資訊，例如照片來源和版權資訊。alt 文字應該描述影像在文章上下文中的含義。

你可以省略標題，但不能省略 alt 屬性。

編寫alt文字可能會讓人感到不知所措或無所作為

對於一些人來說，可能會覺得你在為你的使用者和讀者中的一小部分額外花費時間和金錢。因此，你可能會有忽略 alt 文字的衝動。

暫且不論排斥和歧視，忽略alt文字不是你想在公司網站上冒的風險，因為這是災難的配方。

目標希望他們早些知道，因為這給他們造成了600萬美元的損失。當 Netflix 沒有從目標身上吸取教訓時，他們因法律費用和賠償而損失了755,000美元。這樣的例子還有很多。

更重要的是，越來越多的有視力的人使用文字轉語音軟體，以便他們可以同時處理多個任務或者休息一下，不用整天盯著LED螢幕。如果你的內容無法訪問，將會導致糟糕的使用者體驗。

這也是一個被列入網際網路名人堂的機會

在一些網站上，三分之一的流量來自於Google圖片搜尋。正確設定alt文字是Hubspot將額外的160,000個流量會話帶到他們的部落格的方法。

image.png

雖然讓你的網站變得無障礙可能需要學習很多內容，但我的建議是不要讓自己感到不知所措。相反，逐步進行，並瞭解 alt 文字的基本目的，包括：

  1. 使螢幕閱讀器更容易準確地向依賴它們的人描述影像
  2. 如果影像無法載入，則顯示代替影像
  3. 幫助搜尋引擎理解您網站上的圖形

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章