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

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

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

正文開始~

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

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

在這個模塊中，我學(xué)習(xí)了如何構(gòu)建易于導(dǎo)航的網(wǎng)站結(jié)構(gòu)、標(biāo)題標(biāo)簽、面包屑和元描述——所有好的東西。我們還學(xué)習(xí)了如何編寫替代文本及其重要性。

有時候，簡單就是殺手

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

以Udacity的例子為例：這是適當(dāng)?shù)奶娲谋締幔?/p>

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

這個例子怎么樣？

答案是絕對不行。

我過去只是描述我看到的

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

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

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

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

這是我學(xué)到的并且現(xiàn)在應(yīng)用于我寫的文章的內(nèi)容：

1. 一些圖片應(yīng)該使用空的alt屬性

首先，澄清一下：

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

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

裝飾性圖片(DECORATIVE IMAGES)

裝飾性圖片的唯一價值在于美學(xué)。如果 alt 被移除，網(wǎng)頁仍然能夠完美地表達意思。

一些例子是沒有文本的網(wǎng)站橫幅和其他設(shè)計元素。對于這種類型的圖像，我們應(yīng)該省略描述，但始終包括一個空的 alt 屬性。

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

信息圖像(INFORMATIVE IMAGES)

信息圖像為文章中呈現(xiàn)的信息增加了額外的背景。一些例子包括圖表、圖示、投票結(jié)果和產(chǎn)品截圖。在描述它們時要注意。隨著閱讀的進行，我們將學(xué)會如何描述它們。

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

活動圖片(ACTIVE IMAGES)

活動圖片用于執(zhí)行諸如注冊、下載、收聽、上傳等操作。

它們主要是鏈接和按鈕。在為這些類型的圖像編寫 alt 時，避免使用“Click here”等術(shù)語。

相反，使用類似“注冊 Twitter 帳戶”、“轉(zhuǎn)到帳戶頁面”、“上傳身份證”等描述。

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

2. 上下文很重要

alt文本應(yīng)簡潔準(zhǔn)確地描述圖像的內(nèi)容。如果你有一個總體觀點要表達，請讓周圍的文本內(nèi)容來傳達它。

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

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

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

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

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

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

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

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

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

搜索引擎優(yōu)化師中的一種黑暗做法是將目標(biāo)關(guān)鍵詞塞入圖像的alt文本中。這是一種可怕的用戶體驗。

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

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

屏幕閱讀器（如JAWS和NVDA）會朗讀alt文本，就像我們朗讀句子一樣。因此，你應(yīng)該將你的描述格式化為帶有適當(dāng)標(biāo)點和拼寫的常規(guī)句子。

沒有一個固定的公式來規(guī)定替代文本應(yīng)該有多長。你應(yīng)該簡明扼要地準(zhǔn)確描述圖像中存在的所有重要和相關(guān)細節(jié)。

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

5. 不要在alt文本中重復(fù)標(biāo)題

將字幕逐字復(fù)制到替代文本中是電子商務(wù)中的一種流行做法，因為營銷人員認(rèn)為這樣可以提高搜索引擎排名，但實際上這會導(dǎo)致糟糕的用戶體驗。

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

字幕和 alt 文本有不同的用途。字幕通常用于添加詳細信息，例如照片來源和版權(quán)信息。alt 文本應(yīng)該描述圖像在文章上下文中的含義。

你可以省略標(biāo)題，但不能省略 alt 屬性。

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

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

暫且不論排斥和歧視，忽略alt文本不是你想在公司網(wǎng)站上冒的風(fēng)險，因為這是災(zāi)難的配方。

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

更重要的是，越來越多的有視力的人使用文本轉(zhuǎn)語音軟件，以便他們可以同時處理多個任務(wù)或者休息一下，不用整天盯著LED屏幕。如果你的內(nèi)容無法訪問，將會導(dǎo)致糟糕的用戶體驗。

這也是一個被列入互聯(lián)網(wǎng)名人堂的機會

在一些網(wǎng)站上，三分之一的流量來自于Google圖片搜索。正確設(shè)置alt文本是Hubspot將額外的160,000個流量會話帶到他們的博客的方法。

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

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

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

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