電子郵件營銷的可訪問性：7 個使代碼更易於訪問的簡單技巧

已發表: 2019-04-16

可訪問性正迅速成為電子郵件營銷的支柱，就像它在用戶體驗和設計中一樣。越來越多的品牌正在確保每個訂閱者都能享受他們的電子郵件活動，無論他們是否有身體、視覺或認知障礙，或者即使他們由於公司環境而根本無法查看電子郵件中的圖像。

作為電子郵件營銷人員，我們都努力向訂閱者的收件箱發送優質電子郵件。我們運行垃圾郵件測試和電子郵件測試，以確保我們的設計在所有設備和電子郵件客戶端上完美呈現。但有時，我們忘記為我們的圖像設置 ALT 標籤，使用難以閱讀的顏色組合，或者未能針對屏幕閱讀器優化我們的電子郵件——這會疏遠我們的一些訂閱者。

如果您剛剛開始讓您的電子郵件代碼更易於訪問，那麼事情可能會讓人不知所措。但是，您可以輕鬆實施一些簡單的技巧，並對電子郵件的可訪問性產生重大影響。

以下是如何逐節檢查您的電子郵件是否可供所有訂閱者訪問。

您的電子郵件可以訪問嗎？

Litmus Checklist 中的可訪問性檢查使您可以根據關鍵的可訪問性最佳實踐輕鬆測試您的電子郵件，確定需要改進的領域，並使您的電子郵件更易於所有訂閱者訪問。

了解更多 →

您的無障礙檢查表

1. 在 <HTML> 中添加語言代碼

並非所有訂閱者都會在他們的筆記本電腦或手機上閱讀您的電子郵件——有些訂閱者會使用屏幕閱讀器來訪問您的電子郵件。由於您的電子郵件內容將被大聲朗讀，因此它應該使用正確的語言，這樣發音才會正確——您不希望用法語寫的電子郵件用美式英語發音，對嗎？

為防止這種情況發生，您必須讓屏幕閱讀器知道您的電子郵件是用什麼語言編寫的。如果您的電子郵件中沒有指定語言代碼，屏幕閱讀器將無法正確發音副本——並且您的雄辯電子郵件可能會出現聽起來完全錯誤。

這就是為什麼檢查您的 <HTML> 是否有語言代碼很關鍵的原因——這是一個簡單的代碼片段，用於指定您的電子郵件語言。如果不是已經在你的代碼中，添加LANG =“XX”-replace XX與您的電子郵件相應的語言代碼。可以在此處找到所有可能的語言代碼和地區的列表（允許您解釋不同的口音，例如英式英語和美式英語之間的區別）。

有幾種特殊情況需要考慮：

如果您在 <HTML> 標籤中使用任何 XML，您還需要添加xml:lang="xx" 。
如果您在電子郵件代碼中包含 Outlook 120dpi 修復程序，則需要此解決方案來指定語言。這是我們的代碼在此修復程序中的外觀：
```
 <html xmlns_v="urn:schemas-microsoft-com:vml" xmlns_o="urn:schemas-microsoft-com:office:office" lang="en" xml_lang="en">
```

專業提示：如果您在 ESP 中設置了本地化，則可以動態填充語言代碼。

2. 始終為您的圖像添加 ALT 標籤

請務必記住，您的電子郵件中的圖像可能並不總是對您的訂閱者可見。可能他們的圖像已關閉，或者連接不良，或者他們正在使用屏幕閱讀器——如果您在圖像中包含大量重要信息，那麼該消息將丟失。這就是 ALT 文本的用武之地。您可以設置對訂閱者可見（或由他們的屏幕閱讀器朗讀）的文本，以便他們仍能獲得與可以看到您的圖像的人相同的消息。

無論您的電子郵件代碼中有 <IMG> 標籤的何處，請務必設置 ALT 標籤。如果您已經填充了 ALT 標籤，請仔細檢查以確保文本與圖像上的文本匹配。如果您有空的 ALT 標籤，請確保圖像上沒有任何需要填充以供屏幕閱讀器查看的文本。如果有你的圖像沒有ALT標記和圖像本身，或對之意必要沒有內容沒有文本電子郵件，一定要添加一個空的ALT標籤：ALT =“”。 如果您不包含此內容，屏幕閱讀器將讀出圖像的 URL — 並且沒有人希望向他們讀出長 URL！

為電子郵件中的圖像設置了所有 ALT 標籤（無論是否為空）後，將字體樣式添加到 <IMG> 標籤中，用於帶樣式的 ALT 文本。這種樣式使您可以對 ALT 文本產生興趣，並可以更改字體、顏色、大小、樣式和粗細的外觀。

3. 在所有 <TABLE> 元素上包含 role="presentation" 屬性

大多數電子郵件營銷人員依靠表格來構建他們的電子郵件佈局，但這可能會導致屏幕閱讀器出現嚴重問題。如果屏幕閱讀器在您的電子郵件代碼中識別出一個表格，它會大聲朗讀為一個表格。它可能會從字面上告訴您有多少行和列，告訴您每一列的位置和內容，使您無法理解您的信息。

這就是告訴屏幕閱讀器您僅將表格用於佈局目的的關鍵所在。您可以通過在電子郵件中的每個表格中添加role="presentation"來實現。 這個角色告訴屏幕閱讀器從表格中刪除任何語義——所以不是讀出行號和列號，而是專注於內容。

讓我們看看我們自己的一封電子郵件中這個非常簡單的電子郵件標題：

在針對可訪問性進行優化之前，我們的代碼如下所示：

 <table width="100%" cellpadding="0" cellspacing="0" border="0"><tr> <td align="center" bgcolor="#2f343c" valign="top"> <table class="w100p" width="600" cellpadding="0" cellspacing="0" border="0"><tr> <td class="w100p" width="600" align="center"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td>&nbsp; </td></tr></table> <a href="https://litmus.com?utm_campaign=soeanalytics2019rt&utm_source=email&utm_medium=marketing&utm_content=%%dynamic_content_1456%%"> <img src="https://pages.litmus.com/l/31032/2016-08-16/954sb7/31032/95886/litmus_logo_white.png" width="134" height="50" /> </a> <table cellpadding="0" cellspacing="0" border="0"> <tr><td>&nbsp; </td></tr></table> </td></tr></table> </td></tr></table>

您是否注意到它缺少 ALT 屬性並且表格未設置為role=”presentation” ？

這些小的疏忽對可訪問性有很大的影響。以下是屏幕閱讀器解釋上述代碼的方式：

屏幕閱讀器：不可訪問的電子郵件標題

這是通過將ALT=””屬性和role=”presentation” 添加到<TABLE>標籤來重構的相同代碼，以便屏幕閱讀器友好：

 <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr> <td align="center" bgcolor="#2f343c" valign="top"> <table role="presentation" class="w100p" width="600" cellpadding="0" cellspacing="0" border="0"><tr> <td class="w100p" width="600" align="center"> <table role="presentation" cellpadding="0" cellspacing="0" border="0"> <tr><td>&nbsp; </td></tr></table> <a href="https://litmus.com?utm_campaign=soeanalytics2019rt&utm_source=email&utm_medium=marketing&utm_content=%%dynamic_content_1456%%"> <img src="https://pages.litmus.com/l/31032/2016-08-16/954sb7/31032/95886/litmus_logo_white.png" width="134" height="50" alt="Litmus" /> </a> <table role="presentation" cellpadding="0" cellspacing="0" border="0"> <tr><td>&nbsp; </td></tr></table> </td></tr></table> </td></tr></table>

屏幕閱讀器：可訪問的電子郵件標題

正如你所聽到的，有很大的不同！

4. 使用語義元素來構建您的內容

語義元素可以輕鬆突出顯示內容層次結構，向訂閱者（和屏幕閱讀器）顯示什麼是標題以及什麼是段落副本。包含語義元素使使用屏幕閱讀器的訂閱者可以選擇更輕鬆地“掃描”電子郵件。

在仔細檢查您的副本時，確保任何值得標題的副本都包含在<H>標籤中： <H1> 、 <H2> 、 <H3>等。同樣，確保任何正文副本都包含在<P>標記中。在瀏覽您的電子郵件時，屏幕閱讀器將重點放在特定的標題上，設置這些<H>和<P>標籤將使您的電子郵件更易於瀏覽。

5. 如果可能的話，左對齊你的副本

當涉及到您的正文時，居中對齊可能很誘人。然而，當談到可訪問性時，這是一個很大的錯誤！

當您將文本居中時，每一行的起始邊緣都會發生變化，這迫使您的訂閱者更加努力地找到每一行的開頭——這對有閱讀障礙和其他閱讀障礙的人來說是一個挑戰。如果您有任何超過兩行的副本，請左對齊該副本。這對於移動設備尤其重要，因為窄寬度通常會產生比您意識到的更多的文本行。您可能需要在移動設備上以響應方式左對齊您的文本。

6. 檢查你的副本的對比度

檢查文本顏色與電子郵件背景顏色的對比度。您的訂閱者可能有顏色缺陷，如果您的顏色不能為他們提供足夠的對比度，他們可能無法閱讀您的電子郵件。有兩種方法可以檢查對比度：

如果您可以託管 HTML 並生成要使用的 URL，這是我最喜歡的檢查顏色的方法： http : //www.checkmycolours.com/
如果您需要手動輸入顏色代碼，請查看https://contrast-ratio.com/

7. 為 CTA、鏈接和圖像添加懸停效果

在 Litmus，我們在 CTA、鏈接和圖像上使用懸停效果來指示可點擊性。懸停效果是一種簡單的交互元素，可以使您的電子郵件更具吸引力並改善訂閱者的體驗。儘管只有 AOL、Apple Mail、Gmail 和 Yahoo! 支持懸停效果。郵件，它們是一種流行的效果，值得在您的電子郵件代碼中實現。您可以淡化圖像、更改 CTA 按鈕的顏色、添加彈出選項卡等。
懸停效果有助於使您的電子郵件更易於訪問，例如在此示例中，按鈕在懸停時更改其顏色。

在 Litmus Builder 中查看完整電子郵件 →

想要更多電子郵件提示？

電子郵件無障礙終極指南

本指南包含編寫、設計和編碼電子郵件所需的見解和分步建議，任何人都可以使用，無論他們的能力如何。

下載電子書 →

當您註冊 Litmus News 時，將最好的電子郵件營銷和設計技巧、統計數據和資源直接發送到您的收件箱，並保持在電子郵件創新的最前沿。

隨時了解 →