電子郵件替代文字和無障礙設計的終極指南

為什麼你需要在圖片上使用替代文字來提升無障礙性

在內容創作中,圖片就是一切。

這一點在電子郵件方面尤其明顯。

據估計,Google 已索引了 1,360 億張圖片

圖片可以決定一封電子郵件的成敗。它們能夠提升你的電子報品質,說服訂閱者點擊「購買」,並在文字不足以表達時講述一個故事。

但是,如果你的圖片無法正常顯示,會發生什麼事呢?

這種情況主要會在兩種場景下發生:

1. 你的訂閱者有視力障礙。

2. 你的訂閱者的電子郵件服務提供商封鎖了圖片。

如果你遇到這個問題,你的讀者就無法從你的電子郵件中獲得正確的前後文或訊息。

解決方法是什麼?

了解如何為電子郵件中的圖片撰寫替代文字對於讓你的電子郵件能夠觸及更廣大的讀者群至關重要。

無論你的訂閱者是視力障礙者,還是使用會阻擋圖片的電子郵件服務提供商,一個有效的電子郵件替代文字都能幫助你為更多讀者提供上下文(和價值)。

在這份指南中,你將學習如何精通電子郵件替代文字。你將了解最佳實踐、法規遵循、AI 整合等知識,以便在今年製作出無障礙且引人入勝的電子郵件。

重點摘要

  • 替代文字是對圖片的文字描述,對於確保電子郵件的無障礙性至關重要。

  • 為電子郵件撰寫精準簡潔的替代文字對於吸引訂閱者並提升使用者體驗至關重要。

  • 在不同的電子郵件客戶端和輔助技術中測試並優化替代文字對於確保無障礙性和合規性至關重要。

  • 了解無障礙法規、規定和準則對於避免法律問題並促進包容性至關重要。

  • AI 驅動的替代文字生成能節省時間,但可能需要人工審查和編輯以確保最佳準確度。

了解替代文字

那麼,替代文字究竟是什麼?

替代文字,也稱為「圖片替代文字」(image alt text)或「替代標籤」(alt tags),是當圖片無法在讀者螢幕上載入時,取代圖片顯示在網頁或電子郵件中的文字。圖片替代文字的目的是為視障人士描述圖片內容。

如果內容創作者加上圖片替代文字,視障者和部分或全盲的人就能閱讀網頁或電子郵件的全部內容。

視障人士可以使用螢幕閱讀軟體和人工智慧語音助理,這些工具能直接朗讀頁面內容,讓他們仍然能夠接收資訊。

這表示當他們瀏覽含有圖片的網頁或電子郵件時,不會錯過內容的上下文,而是能聽到圖片的描述,從而更全面地理解整個內容。

網站擁有者也會使用圖片替代文字來幫助網頁在搜尋引擎中獲得更好的排名。搜尋引擎會爬取網站以了解頁面上的內容。它們不僅會爬取頁面上的文字,還會爬取圖片的替代文字。

電子郵件替代文字最佳實踐

不要只是為了填寫而在替代文字標籤裡隨便寫 任何東西

你必須知道 如何 為你的圖片撰寫適當的替代文字,否則你會讓讀者感到困惑。就如俗話說的:「讓人困惑,就會失去顧客。」

在這種情況下,你會失去讀者,他們可能會有糟糕的使用體驗。更糟的是,他們可能最後會取消訂閱。

以下是在電子郵件中撰寫圖片替代文字時需要記住的幾個重要準則:

1. 精確描述圖片

電子郵件替代文字的全部目的就是要詳細描述你的圖片。

在撰寫電子郵件圖片替代文字時,要使用明確的語言,並以圖片主題和上下文來引導你的描述內容。

加入與你的電子郵件相關的內容。

如果你的圖片沒有包含可辨識的地點或人物,那麼你應該根據電子郵件的內容來添加相關背景資訊。

舉例來說,如果你的電子郵件內容是關於 如何寫出更好的電子報 ,而你有一張人在電腦上打字的庫存圖片,你可以這樣撰寫替代文字:

錯誤:「女性在電腦上打字。」

右圖:「女子正在筆電上撰寫電子報草稿。」

你有注意到我們在第二個選項中為圖片的替代文字增加了上下文嗎?儘管照片可能只是顯示一位女士假裝在一台虛擬電腦上打字,但加入與你正在撰寫的電子報相關的細節是很重要的。這樣可以使圖片描述與電子報內容相輔相成。

2. 保持替代文字簡潔(最多 125 個字元)

你的替代文字不需要寫得像一篇文章。

盡量將你的圖片替代文字控制在 125 個字元以內。

為了讓你更清楚了解,這整個「保持替代文字簡潔」的段落共有 394 個字元。建議你將其縮減至原本長度的四分之一左右,最理想的情況是只用一個句子來表達。

如果你的圖片替代文字冗長難讀,那麼你就需要把它縮短。

3. 別提到這是張圖片

你必須在替代文字中詳細描述你的圖片。要完整描繪出圖片中發生的整個場景和細節。

不過,你不需要說明這是一張圖片。

舉例來說,不要用「這是一張橘貓坐在岩石上的圖片」或「橘貓坐在岩石上的照片」來開始你的替代文字。

直接從圖片描述的中間開始就可以了。

在這種情況下,只要寫「岩石上的橘貓」就可以了。

4. 只有在網路發布時才使用關鍵字

如果你正在為網頁上使用的圖片撰寫替代文字,那麼整合關鍵字是很重要的,這可以幫助網頁在 Google 搜尋結果中獲得更好的排名。

不過,如果你是在撰寫電子郵件中圖片的替代文字,那你完全不需要擔心關鍵字的問題。

為什麼?

人們無法在 Google 上搜尋電子郵件。

不過,有一個例外:如果你打算將電子報內容發布為部落格文章,那麼你就應該考慮關鍵字。

你要如何同時將你的電子郵件發布為部落格文章?

使用 beehiiv,這個為成長而生的電子報平台。

當你用 beehiiv 發送電子報時,預設情況下,它也會以部落格文章的形式發布。beehiiv 讓你的電子郵件內容永久保存,這樣新讀者就不會錯過你過去發送的電子報。

這表示你能從每次發送中獲得最大的影響力和投資回報率(ROI)。

5. 再次確認拼字

一定要再三檢查你的拼字。

請記住,你的圖片替代文字主要是給視障訂閱者聽的。

他們會使用螢幕閱讀器,將圖片替代文字大聲讀出來。如果你的文字中有拼字錯誤,訂閱者可能會聽不懂,而且很可能會感到困惑。

這反過來會造成負面的使用者體驗。而且,如果你使用 beehiiv 將你的電子郵件發布到網路上作為部落格文章,你會讓爬取你網站的搜尋引擎機器人感到困惑。

他們無法理解你內容的關鍵字和脈絡,導致你無法在搜尋引擎中獲得高排名。

別忘了檢查你的圖片替代文字,就像檢查電子郵件中的其他文字一樣。記得一定要進行拼字檢查。

6. 避免重複

不要重複使用相同的圖片替代文字。如果你有幾張相似的圖片,試著稍微變化一下替代文字的內容。

請記住,一切都回歸到使用者體驗。試想一下,如果訂閱者反覆聽到這句話三次會是什麼感受:

「橘貓坐在岩石上。橘貓坐在岩石上。橘貓坐在岩石上。」

事情開始變得奇怪起來。

相反地,要注意每張圖片的細微差別。

"橘貓在大石頭上悄悄爬行。"

"橘色貓咪橫躺在一塊巨大的灰色岩石上。"

「一隻橘貓緊張兮兮地從一塊大石頭後方探頭偷看。」

捕捉每張圖片的個別細節,即使它們只有些微差異。這樣做可以提升使用者體驗,讓他們更輕鬆地輸入內容。

7. 不是每張圖片都需要電子郵件替代文字

請記住,你並不 總是 需要為電子郵件中的圖片加上替代文字。大多數情況下,你應該包含替代文字。但也有例外。

舉例來說,如果你有一張純粹裝飾用的圖片,你就不需要描述它。如果在電子郵件的內容中描述它並非必要,那麼就可以略過不提。

另一個不需要替代圖片文字的原因是,如果你已經在電子郵件中詳細解釋了圖片的內容。

舉例來說,如果你說:「下面這張照片是我爸爸在 1984 年戴著他最愛的棒球帽」,那你就不需要再重複說一次同樣的話。

螢幕閱讀器會透過語音為視障訂閱者朗讀你的電子郵件內容和圖片替代文字。因此,如果你在正文中已經描述了圖片,就不需要在圖片替代文字中重複描述。否則,你就會違反第六條最佳實踐原則:避免重複。

測試和優化電子郵件替代文字

為了給最廣泛的訂閱者創造最佳的使用體驗,請測試你的電子郵件替代文字。

這能幫助你了解當圖片被封鎖而只顯示替代文字時,使用者所看到的內容。

你可以使用 Email On Acid 這個工具來測試你的電子郵件替代文字。它會自動遮蔽你郵件中的所有圖片,讓你看到每張圖片的替代文字是如何呈現的。

預覽你的電子郵件替代文字可以讓你親身體驗到那些有無障礙需求或使用圖片阻擋軟體的訂閱者如何接收和體驗你的郵件。

接下來,分析有圖片替代文字和沒有任何替代文字的電子郵件的表現。

舉例來說,你可以 在 beehiiv 分析你的電子報表現 ,追蹤有多少訂閱者開啟或點擊了含有圖片替代文字的特定電子郵件,相較於沒有替代文字的電子郵件,藉此了解它如何影響讀者的互動程度。

法律和合規考量

根據 2022 年對一百萬個網站首頁的研究, 只有 77.8% 的圖片中附有替代文字

這意味著約四分之一的網站經營者沒有善用替代文字。任何視力障礙者或使用圖片阻擋技術的人都無法獲得良好的使用體驗。

但這還不是全部。

如果你沒有善用圖片替代文字,你可能正在違反法律和準則。

網頁內容無障礙指引(Web Content Accessibility Guidelines, WCAG)

舉例來說,網頁內容無障礙指引包含了一套用於製作無障礙數位內容的標準。若未能遵守這些準則,可能會面臨潛在的法律後果。

美國身心障礙者法案(Americans with Disabilities Act, ADA)

此外,美國身心障礙者法案是一項美國聯邦法律,禁止對殘障人士的歧視。如果你未能遵守 ADA 的規定,不僅可能損害你的品牌形象,還可能面臨法律訴訟。

AI 與自動化技術在替代文字生成上的應用

如果你想加快替代文字的製作速度,那麼優化這個過程的一種方法就是 善用 AI

你可以使用多種工具來運用 AI 產生替代文字,例如 AltTextaii、Ahrefs 和 Quattr。

AI 生成替代文字的好處

人工智慧能夠幫你節省時間,為你的各種圖片生成替代文字。

只要使用這些 AI 替代文字工具,你只需上傳圖片,它就會自動生成可直接使用的精確替代文字,為你節省時間。

AI 替代文字的挑戰

AI 生成的電子郵件替代文字雖然可以幫你節省時間,但也確實有其缺陷。

舉例來說,AI 替代圖片文字生成工具仍然相對新穎,這意味著它們的準確度還不是最高的。

在大多數情況下,人類仍然需要檢查 AI 生成的替代文字是否準確,這意味著目前它的省時效果還不是那麼顯著。

結語

一張圖勝過千言萬語。

但是,如果那張圖片無法顯示,對你的電子報訂閱者來說又有什麼價值呢?

電子郵件替代文字能幫助你的讀者理解圖片內容,無論是因為視力障礙或圖片阻擋技術而無法查看圖片時都能派上用場。

雖然在製作電子郵件時多了一個步驟,但加入替代文字是創造有價值且吸引人的使用者體驗的重要環節。

如果你想要確保為讀者提供最佳的使用體驗,你就必須使用正確的工具。

使用 beehiiv,你可以使用一個強大的電子報平台,它專注於為訂閱者打造最佳體驗。

你選擇的電子郵件平台可以決定你的電子郵件計畫是勉強維持還是蒸蒸日上。

如果你的目標是後者的話,那就 今天就來 beehiiv 一起茁壯成長吧