選擇替代文字

螢幕閱讀器為視障使用者和搜尋引擎使用 Alt-text。因此，為影象編寫好的替代文字非常重要。

即使用 alt 屬性替換影象，文字也應該看起來正確。例如：

<!-- Incorrect -->
<img src="anonymous.png" alt="Anonymous user avatar"/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit icon"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete icon"/></a>

沒有影象，這看起來像：

匿名使用者頭像匿名使用者寫道：

Lorem ipsum dolor sed。

編輯圖示 / 刪除圖示

要糾正這個：

• 刪除頭像的替代文字。此影象為有視力的使用者新增資訊（一個易於識別的圖示，表明使用者是匿名的），但此資訊已在文字中提供。 1
• 從圖示的 alt-text 中刪除圖示。知道這將是一個圖示，如果它在那裡無助於傳達其實際目的。

<!-- Correct -->
<img src="anonymous.png" alt=""/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete"/></a>

一位匿名使用者寫道：

Lorem ipsum dolor sed。

編輯 / 刪除

腳註

1 包含空的 alt 屬性和完全排除它之間存在語義差異。空的 alt 屬性表示影象不是內容的關鍵部分（在這種情況下也是如此 - 它只是一個不需要理解其餘部分的附加影象），因此可以從渲染中省略。但是，缺少 alt 屬性表示影象是內容的關鍵部分，並且根本沒有可用於呈現的文字等效項。