谷歌解釋了標誌和按鈕的替代文本

在 Google Search Off the Record 播客中，Google 的 Lizzi Sassman 和 John Mueller 討論了處理徽標和基於圖像的按鈕的替代文本的最佳方法。

有向徽標和按鈕添加 alt 屬性的最佳實踐。

這些規則起初看起來有點複雜，但實際上很容易理解。

獲得正確的 alt 屬性對用戶有好處，從長遠來看，這對收益很有好處。

向功能圖像添加替代文本

Lizzi Sassman 通過引用功能性圖像開始討論，這些圖像在網頁上具有功能性目的。

她詢問替代文本是否應該描述按鈕的作用或在按鈕是圖標的情況下按鈕上的圖像是什麼。

最後，她問是否有 SEO 目的將替代文本添加到按鈕等功能圖像中。

“莉齊·薩斯曼：
…我們在視覺資產上花費的關注程度，我們也應該在描述該資產的詞語中投入同樣的精力。 我認為這很棒。

另一類圖像就像功能性的東西，有時可能是一個按鈕。

就像它是一個圖形，也可以作為某種東西。

那麼替代文字是否應該告訴我即將發生的事情？

如果你點擊這個，那麼它會帶你到這裡嗎？

它可以像某物的圖像，然後也可以用作按鈕。

你是否描述了這個功能，或者就像它一樣，我不知道......就像一個箭頭圖片？

而且，這對SEO有影響嗎？

約翰·穆勒：
是的。 我認為…

莉齊·薩斯曼：
它可能像一個標誌。

約翰·穆勒：
對於可訪問性，這可能是有道理的，只是圍繞它做一些事情。

但對於 SEO，人們不會搜索結帳按鈕或類似的東西。”

按鈕上的替代文字是為了可訪問性而不是 SEO

John Mueller 明確表示，將 alt 文本添加到按鈕沒有 SEO 目的。

但他也觀察到，這些圖像的替代文本主要是出於可訪問性的原因。

莉齊繼續討論：

“莉齊·薩斯曼：
......但也許他們會為了標誌，或者類似標誌的東西。 當您單擊它時，它會將您帶到主頁或其他地方。

但它也是，“哦，這是一個標誌。”

所以你說，“這是谷歌搜索中心的標誌。”

約翰·穆勒：
當然。

莉齊·薩斯曼：
或者像描述性文字一樣。

它是徽標中的 Googlebot，但了解圖像最重要的是它是徽標嗎？

或者標誌是什麼樣子的？

我想從這個角度來看，人們可能正在尋找徽標。

約翰·穆勒：
是的。

莉齊·薩斯曼：

比如 X 公司的標誌是什麼？

約翰·穆勒：
是的。 我的意思是它可以追溯到我們試圖避免的那種策略。

你想被發現是為了什麼？

莉齊·薩斯曼：
是的，但這是最重要的問題，我想，因為那樣它就會引導……

我可以被所有這些兔子洞沖昏頭腦，所以它有點，我不知道，優先考慮我們應該考慮的事情，因為你不一定需要為這些事情寫所有的事情，我猜。”

在徽標和按鈕上正確使用替代文本

在徽標等圖像上使用替代文本的正確方法實際上取決於圖像是鏈接還是不是鏈接。

如果徽標圖像用作返回主頁的鏈接，那麼使用該圖像所具有的功能標記該圖像是正確的，這樣使用屏幕閱讀器的站點訪問者就不會認為該徽標是指向主頁的鏈接。

官方 HTML 標準制定機構萬維網聯盟 (W3C) 發布了有關如何處理徽標的說明。

標誌主頁鏈接

用作主頁鏈接的徽標應包含替代文本，告訴屏幕閱讀器用戶該徽標是主頁鏈接。

W3C 使用此代碼示例：

 <a href="https://www.w3.org/">
<img src="w3c.png" alt="W3C 主頁">
</a>

上面的代碼是一個可能會在頁面頂部遇到的徽標，它也用作返回主頁的鏈接。

W3C 提供的示例替代文本只是簡單地說“W3C 主頁”，但如果您願意，它可以更具描述性。

標誌和文字主頁鏈接

還有其他類型的徽標鏈接，其中有一個圖像徽標和旁邊或下方的文本，並且圖像和文本都在相同的鏈接代碼中編碼。

換句話說，沒有兩個鏈接，例如一個用於徽標的鏈接和一個用於文本的鏈接，它只是一個用於徽標和文本的鏈接。

在這種情況下，由於文本描述了鏈接的功能，因此重複徽標鏈接的功能將是重複的。

因此，對於這種情況，最佳做法是使用空替代文本。

這是 W3C 提供的示例：

 <a href="https://www.w3.org/">
<img src="w3c.png" alt=""> W3C 主頁
</a>

請注意如何為圖像編碼 alt 屬性：

 img src="w3c.png" alt=""

替代文本的空引號稱為空替代屬性（或空替代文本）。 屏幕閱讀器會簡單地跳過它。

空替代文本好的原因是因為有描述鏈接功能的文本：

W3C 主頁

圖標鏈接的替代文本

有時鏈接是圖標的形式，沒有文字來解釋它的作用，例如信封形式的圖標（代表電子郵件或消息）或打印機（表示鏈接激活打印機）。

對於這種情況，描述圖像是什麼（如信封或打印機）是一種不好的做法。

最佳做法是描述圖像的作用（發送電子郵件或打印網頁）。

W3C 使用帶有以下代碼和替代文本的打印機圖標示例：

 <a href="javascript:print()">
<img src="print.png" alt="打印此頁">
</a>

如您所見，打印機形狀的圖標具有“打印此頁”字樣作為替代文本。 它告訴圖標的作用。 這很有幫助。

按鈕的替代文本

與圖標示例類似，按鈕圖像的替代文本應描述圖像的作用。

W3C 使用帶有放大鏡作為提交按鈕的搜索框的示例。

不好的方法是使用替代文本來描述圖像是放大鏡。

最佳做法是使用替代文本來描述圖像的作用。

這是 W3C 作為示例顯示的示例代碼：

 <input type="image" src="searchbutton.png" alt="搜索">

如您所見，搜索按鈕的替代文本是單詞“搜索”，它描述了按鈕的功能。

按鈕和徽標的替代文本

Lizzi 和 John 沒有詳細說明如何處理徽標和按鈕的不同場景。

然而，約翰確實指出按鈕和徽標的替代文本沒有 SEO 價值，它是為了可訪問性。

最佳做法是適當地為使用屏幕閱讀器訪問網頁的用戶提供功能性網頁。

如前所述，使用屏幕閱讀器的人可以是您的企業或網站的客戶或擁護者。

因此，使用可訪問性最佳實踐對底線有好處。

引文

在 W3C 了解有關按鈕和徽標的可訪問性的更多信息

功能圖像

合併同一資源的相鄰圖像和文本鏈接

在用作提交按鈕的圖像上使用 alt 屬性

在 15:57 分鐘處收聽 Search Off the Record 播客：

Shutterstock/Evgeny Atamanenko 的特色圖片