電子郵件可訪問性指南：標準和最佳實踐

環顧四周，聽聽發生了什麼。 在全彩模式下，您是否清楚地看到了一切？ 你能很好地聽到噪音和聲音嗎？ 恭喜你，你肯定是個幸運的人。 而且，你實際上是一個非常快樂的人。 你有視覺和聽覺！

您可能認為這些能力很常見，並且默認授予每個人？ 如果我告訴您，您的聯繫人列表中 4.5% 的收件人患有色盲，因此他們很難閱讀或理解您的電子郵件內容怎麼辦？

儘管色盲並不是唯一普遍存在的疾病。 一個赤裸裸的事實：全世界有 2.85 億人患有嚴重的視力障礙，即使戴隱形眼鏡或眼鏡也有問題。

地球上 5% 的人口有聽力障礙。 換句話說，超過3.6億。

這是需要考慮的事情。 我們不能忽視所有這些人。 我們必須盡最大努力對他們友好，讓他們的生活更美好。 這就是可訪問性的全部內容。

現在，給自己泡杯茶或咖啡，讓我們深入了解細節。

電子郵件可訪問性代表什麼？

有些人患有嚴重的視力障礙，甚至完全失明。 他們正在使用屏幕閱讀軟件來為收件箱電子郵件發聲——VoiceOver、Microsoft Narrator 和其他類似工具。 因此，我們的職責是調整我們的內容以適應這些助手。

談到色盲，從紅盲（當人們無法區分某些顏色）到單色盲——沒有任何工具可以幫助患有這些疾病的人。 所以我們必須自己優化電子郵件圖像。

其他人則患有聽力障礙、閱讀障礙等。因此，每種疾病都有一套可訪問性規則。 因此，我們得出了標題中一個問題的答案。

簡而言之，這意味著堅持使具有各種特殊要求的人都能閱讀電子郵件的標準。 幸運的是，現代 HTML 電子郵件模板構建器和其他營銷軟件為我們提供了先進的工具，可以很容易地實現這些標準，並且無需特殊技能。

我將在下面分享這些標準，以及一些有助於創建可訪問電子郵件的做法。

無障礙標準

所以，親愛的朋友們，是時候一一探索我們需要遵循的這些建議集了，以便發送“通用”電子郵件，這些電子郵件對於所有類型的視覺、聽覺和感知故障的收件人來說都很容易閱讀。

1.色盲

有一個色盲類型列表。 他們來了：

Protanopia意味著對紅色的感知已失效。 患有紅盲症的讀者，也就是紅盲人，往往會將黑色與所有的紅色相混淆。 他們也無法區分深棕色和深綠色，並且看不出藍色和紅色的中間音調之間沒有區別。 看看這封來自 Uber 的電子郵件：

這就是患有紅盲症的接受者的看法：

Deuteranopia是對綠色的減少感知。 這些人還傾向於混淆中間紅色/綠色調音、亮綠色/黃色和淺藍色/淡紫色。 再次查看同一封電子郵件：左側為原始郵件，右側為 deuteranopia 版本。

Tritanopia意味著對藍色及其陰影視而不見。 這就是為什麼患有這種損傷的人通常會混淆淺藍色/灰色和深紫色/黑色。 相同的電子郵件示例，但您可以在右側看到對它的三觀：

單色適用於完全色盲。 這些人可以看到僅以黑色、白色和不同深淺的灰色繪製的現實。 沒有其他顏色。 想像一下一台非常古老的電視機屏幕上的世界。 這就是單色的樣子。 說真的，它讓我起雞皮疙瘩。

我們應該做什麼？

• 選擇電子郵件副本的字體大小不小於 14 像素。 但是，我推薦 16px 為收件人提供易於訪問的電子郵件設計；
• 避免基於色盲客戶可能無法區分的顏色的對比解決方案。 例如，不要在紅色或淡紫色背景上用綠色或藍色文字書寫副本。 看看下面的消息。 這對於具有完全色彩感知的人來說是可以的……但在紅盲或單色視覺的情況下是否也一樣好？ 我不這麼認為……

（原始信息）

（這就是患有紅盲症的客戶會看到的方式）

（單色人看到這條消息的方式）

他們應該如何了解他們最喜歡的球隊是贏了還是輸了？

• 忘記在紅色圖片上添加綠色按鈕的想法，反之亦然。 上面提到的所有“有風險”的顏色組合也是如此。 這個想法真的很糟糕——有顏色感知障礙的人可能根本不會注意到按鈕；
• 始終在括號中指定產品的顏色——例如，客戶可能無法區分紅色，但他們知道紅色襯衫或連衣裙與他們的形象完美匹配；
• 將電子郵件中的鏈接加粗。

是的，鏈接文本的常規藍色是不夠的。 不僅僅是因為色盲收件人。 當陽光無情地照在智能手機屏幕上時，您是否曾經在街上閱讀電子郵件？ 然後你就明白我的意思了——根本就很難區分顏色。 所以讓鏈接加粗，不要在它們下劃線。 為什麼？ 因為下劃線可能會分散閱讀障礙者的注意力。 稍後我們將詳細討論閱讀障礙。

在這封電子郵件中，菜單項也是粗體的。 這個簡單的想法優化了客戶在時事通訊中的導航——他們可以輕鬆找到所需的公寓類別。

請注意帶有箭頭的“查看詳細信息”鏈接。 它說您可以通過單擊它來查看更多詳細信息；

如果您在廣告系列中添加交互元素或運行測試，請選擇綠色/深紅色/淺藍色以突出顯示正確答案。 紅色/黑色/灰色分別代表錯誤。 請務必使用文本複制是/否答案。

檢查電子郵件是否符合患有色盲症的人的要求非常重要。 為了您的方便，我想將此表添加到我們的帖子中。 保存它以查找匹配的顏色並避免混淆：

還有一個免費的色盲模擬器工具，可以以色盲接收者對它們的感知方式顯示您的照片。

正如我們所看到的，顏色測試並不太複雜——只是不要忽視它。 關心所有訂閱者。 做個好人。

2. 失明和嚴重視力障礙

下一章專門討論盲人和弱視者的無障礙標準。 這些規則也都是關於視覺障礙的，但這裡的原則和解決方案是完全不同的。 在這種情況下，沒有配色方案或對比組合可能會有所幫助。 可訪問性科學的這一方面基於使用屏幕閱讀軟件。

因此，我們的任務是將我們的電子郵件調整為這些工具。 換句話說，我們必須使這些工具的電子郵件清晰易讀。

這裡應該特別注意什麼？

電子郵件主題

通常，屏幕閱讀器會從其主題開始閱讀電子郵件。

因此，普遍接受的規則簡單而有效：使您的主題行簡短且具有描述性。 一個好的主題應該解釋信息的核心本質。

語言設定

在電子郵件副本中配置語言設置非常重要。 這項任務需要一些努力並使用電子郵件副本，但這是值得的。 問題是，如果您忽略這些設置，屏幕閱讀器發出的電子郵件文本可能聽起來很可怕。 有點像指環王中獸人的對話

為避免這種情況，請在電子郵件代碼中指定相應的語言（如果可用）。

邏輯順序

屏幕閱讀器對如何發出電子郵件有嚴格的規定。 他們從左到右讀取容器和塊，然後繼續下一行。

要提供可訪問性，請在 HTML 代碼中指定標頭標記，例如<h1> 、 <h2> 、 <p>等。 這些標籤將增加常規文本的優先級，因此這些元素首先發聲。

此外，指定標籤時字體大小無關緊要。 在上面的例子中，標題 2 的字體大小是 24px，而正常的複製字體更大——27px。 但屏幕閱讀器將首先發出標題 2。

替代文字

今天，人工智能技術正在穩步發展。 但屏幕閱讀器工具仍然不夠智能，無法“查看”電子郵件中的圖片並進行描述。 也許在不久的將來……至於現在，這些實用程序只能讀取我們添加到圖像的替代文本，也就是替代文本。

如何將替代文本調整為可訪問性標準？ 您猜對了，這很明顯：使文本簡潔、描述性和信息豐富。 一個有用的提示：避免在本文中使用“圖像”一詞。 圖像標籤已經指定了它，所以聽到重複的“圖像圖像......”會有點奇怪

鏈接、CTA 項目、社交圖標

鏈接應盡可能簡潔和信息豐富。 向他們添加明文並記住屏幕閱讀器會將文本轉換為語音！ 讓收件人知道您為他們提供了什麼以及他們將通過點擊去哪裡。

看看這些鏈接：

第一個鏈接……呃……說真的，我不敢想像它聽起來會多麼令人毛骨悚然。 而第二個明確指定了網站、發布日期和帖子標題。

CTA 按鈕和社交媒體圖標也是如此。 事實上，這些項目也是超鏈接，只是包裹在美觀的視覺形狀中。 每個熟練的電子郵件營銷人員都會密切關注它們，致力於設計和效果，選擇完美的色彩解決方案來產生點擊......

但是，當談到屏幕閱讀器和盲人的可訪問性時，這裡唯一重要的是文本。 讓它足夠吸引人來完成它的使命——強迫訂閱者點擊按鈕。

這是我們在電子郵件中看到 CTA 按鈕的方式：

但是屏幕閱讀工具並沒有對我們所有的設計師技巧和奇妙的懸停效果感到滿意。 該軟件所看到的只是純文本。 沒有其他的。 因此，請確保您的文本可以獨立運行。

關於社交媒體圖標，一些“收聽”收件箱電子郵件的訂閱者可能不理解我們應用於這些圖標的縮寫。 因此，為這些項目編寫描述性替代文本。

這都是關於失明的。 還有一個更重要的注意事項：屏幕閱讀器如今不僅被患有嚴重視覺障礙的人廣泛使用。 數以百萬計的收件人在忙碌時、在街上、在車裡等時正在收聽他們的收件箱電子郵件。因此，可訪問性的這一方面比人們想像的更為重要。

3. 閱讀障礙

儘管智商水平正常，但患有閱讀障礙的人往往會混淆文本中的字母順序。

以下是閱讀障礙接收者基於發布的帖子的可訪問性實踐 這 英國閱讀障礙協會。

• 避免在鏈接下劃線。 正如我上面已經提到的，讓你的鏈接加粗而不是下劃線；
• 不要在一行的末尾開始一個新的句子。 新句子應分別換行；
• 如果您需要突出顯示/強調某個想法，請不要使用 CAPS LOCK — 改用更大的字體；
• 忘記中心對齊——只在屏幕左側；
• 白色背景可能會分散閱讀障礙者的注意力，奶油色更柔和，不會造成困難；
• 以句點 (.) 結束所有句子，當電子郵件副本中有項目符號時，您還應該使用分號。

4. 耳聾和部分聽力

對於有聽力障礙的人，只有一個標準。 您電子郵件中嵌入的所有視頻都應配備字幕或文字說明。

只是不要依賴 Youtube 和其他視頻主機提供的自動字幕。 他們經常，嗯嗯……說得客氣一點，遠非理想。 而且在某些場合甚至處於精神分裂症的邊緣。

電子郵件可訪問性重要提示

我將結束我們今天對最佳可訪問性實踐的審查。 正如我們所見，電子郵件營銷人員工作的這一方面非常重要。 因此，在單擊“發送”按鈕之前，切勿跳過可訪問性測試！ 使用上述色盲模擬器檢查您的活動，將測試電子郵件發送到所有可用設備，並使用不同的屏幕閱讀器收聽它們。

現在讓我們簡要回顧一下這篇文章的要點。 如何提供可訪問性？

• 選擇不同的顏色來創建對比方案，以防止混淆；
• 寫清楚和描述性的主題行；
• 永遠不要忘記替代文字，將其添加到所有圖像中；
• 如果GIF動畫有教育作用，請為讀者提供詳細說明；
• 不要在一封電子郵件中使用不同的語言，因為屏幕閱讀器一次只能使用一種語言；
• 檢查鏈接的意義；
• 左對齊文本；
• 用真愛創建您的時事通訊和触發電子郵件。 關心您的所有訂閱者。

我真誠地祝愿你一切順利。 把關懷和善意傳遍四方！