电子邮件营销的可访问性：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 时，将最好的电子邮件营销和设计技巧、统计数据和资源直接发送到您的收件箱，并保持在电子邮件创新的最前沿。

随时了解 →