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

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

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

正文開始~

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

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

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

有時候，簡單就是殺手

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

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

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

這個例子怎么樣？

答案是絕對不行。

我過去只是描述我看到的

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

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

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

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

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

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

首先，澄清一下：

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

那么，如何知道圖像是否需要一個空的 alt 屬性？裝飾性/信息性/活動性方法。

裝飾性圖片(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文本應簡潔準確地描述圖像的內容。如果你有一個總體觀點要表達，請讓周圍的文本內容來傳達它。

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

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

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

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

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

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

相反，使用額外的字符更好地傳達信息。

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

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個流量會話帶到他們的博客的方法。

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

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

最近，我們上線了一個產品AliengGpt，大家可以來體驗找Bug:

體驗地址：https://chat.waixingyun.cn