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

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

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

正文開始~

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

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

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

有時(shí)候，簡(jiǎn)單就是殺手

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

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

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

這個(gè)例子怎么樣？

答案是絕對(duì)不行。

我過去只是描述我看到的

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

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

這讓我很好奇，所以我開始進(jìn)行研究：

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

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

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

首先，澄清一下：

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

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

裝飾性圖片(DECORATIVE IMAGES)

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

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

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

信息圖像(INFORMATIVE IMAGES)

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

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

活動(dòng)圖片(ACTIVE IMAGES)

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

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

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

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

2. 上下文很重要

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

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

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

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

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

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

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

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

我喜歡下面這個(gè)的簡(jiǎn)單性：

4. 將alt text文本編寫為簡(jiǎn)單的句子

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

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

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

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

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

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

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

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

這是因?yàn)槠聊婚喿x器最終會(huì)重復(fù)相同的單詞。想象一下這種情況發(fā)生在兩個(gè)、三個(gè)甚至五個(gè)圖像上，你很快就能看到殘障人士的體驗(yàn)如何下降。

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

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

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

對(duì)于一些人來說，可能會(huì)覺得你在為你的用戶和讀者中的一小部分額外花費(fèi)時(shí)間和金錢。因此，你可能會(huì)有忽略 alt 文本的沖動(dòng)。

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

目標(biāo)希望他們?cè)缧┲溃驗(yàn)檫@給他們?cè)斐闪?00萬美元的損失。當(dāng) Netflix 沒有從目標(biāo)身上吸取教訓(xùn)時(shí)，他們因法律費(fèi)用和賠償而損失了755,000美元。這樣的例子還有很多。

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

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

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

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

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

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

體驗(yàn)地址：https://chat.waixingyun.cn