无障碍电子邮件终极指南

已发表: 2017-02-27

作为电子邮件营销人员，我们努力为订阅者提供完美的电子邮件体验。我们确保根据我们的分析在正确的时间发送我们的电子邮件，并通过监控我们的可送达性和运行垃圾邮件测试将它们发送到收件箱。我们将我们的内容个性化以提高相关性并改进我们的设计，以确保我们的电子邮件在无数设备和每个电子邮件客户端上都能完美呈现。

这些都是建议的步骤，可确保您的电子邮件带来转化。但是，您的电子邮件可能会被您的大部分订阅者错过——有视觉、身体或认知和神经障碍的人。

只需几个小步骤，您的所有订阅者都可以更轻松地访问您的电子邮件。在这篇文章中，我们将讨论这些步骤是什么以及它们如何使每个人都可以更好地使用电子邮件。

您的电子邮件可以访问吗？

Litmus Checklist 中的可访问性检查使您可以根据关键的可访问性最佳实践轻松测试您的电子邮件，确定需要改进的领域，并使您的电子邮件更易于所有订阅者访问。

了解更多 →

什么是可访问性？

可访问性是用户体验和设计的基石之一。对于电子邮件，这意味着确保每个人都可以接收和理解您的消息，无论他们是否使用任何残障或辅助设备。

您可以将电子邮件中的可访问性视为处理支持不佳的电子邮件客户端的扩展。包括变通方法和回退可确保每个订阅者都获得积极的体验。

作为电子邮件开发人员，我们花费数小时让电子邮件在市场份额不到 1% 的客户中看起来恰到好处，但我们中很少有人会花几分钟时间使电子邮件易于访问。
– 马克·罗宾斯，Rebelmail

电子邮件设计中的可访问性

让我们首先看看您的电子邮件可能影响可访问性的视觉方面以及可以进行改进的地方。

智能地使用颜色

色盲订阅者可能无法区分电子邮件中的某些颜色，因此请确保颜色不是传达信息的唯一方式。

颜色对比度也会给有视觉困难的订阅者带来问题。在电子邮件中的不同元素之间使用高对比度，尤其是在副本和背景颜色之间。一种方法是使用 WebAim 的颜色对比度检查器来检查电子邮件中颜色的对比度。

您的电子邮件可以访问吗？

使用 Litmus 电子邮件预览中的色盲过滤器查看您的电子邮件对于视障用户的外观。

免费试用 Litmus →

不要创建有害内容

以特定速率或模式闪烁的内容（例如动画 GIF）可能会导致某些人出现光敏性癫痫发作。避免闪烁内容或包含指向可能包含类似内容的视频的链接。

平衡文本和图像

虽然视力正常的用户可以直观地浏览或跳过不相关的内容，但盲人用户必须一次收听一封电子邮件的全部内容。定制电子邮件中的书面内容以传递主要信息。此外，请考虑您的设计与流行的屏幕阅读器（例如 JAWS 或 Window-Eyes）的兼容性如何。

提高电子邮件的可读性

使用更大的字体

台式机或笔记本电脑屏幕上小于 14 像素的任何内容都需要一些努力才能阅读。用户可以增加设备上的缩放级别以帮助他们阅读屏幕，但这会对您的电子邮件产生负面影响，电子邮件可能会出现损坏或中断。

移动设备上的文本可能会显得更小，从而迫使用户更加努力地阅读您的电子邮件。使用媒体查询在较小的设备上将最小字体大小从 14 像素增加到 16 像素，以帮助用户阅读您的电子邮件：

 @media screen and (max-width: 600px) { p.mobile {font-size: 16px;}}

给你的文案呼吸空间

对于某些人来说，可能很难阅读文本行间隔很近的段落和文本块。在文本上设置适当的行高，使所有人更容易阅读。我们建议选择比字体大小高 4 像素的行高。

 <p style=”font-size:14px; line-height:18px;>Paragraph with font-size and line-height set</p>

提示：为移动设备增加字体大小时，不要忘记也增加行高。

副本的段落也需要有呼吸的空间以提高可读性。扫描电子邮件时，应该很容易识别段落并保留您的位置。在段落上方和下方创建足够的空白。

使文本更易于阅读的另一个步骤是将其从电子邮件的边缘移开。向表格单元格或段落标记添加填充将帮助您实现这一目标。

避免在您的电子邮件中进行合理的复制

“对齐”复制意味着调整字母和单词间距，使文本与左右边距齐平。虽然在印刷品中很常见，但不一致的字间距会使合理的副本难以阅读。左对齐的文本已被证明更容易阅读。

选择正确的字体

网络字体的使用增加了可用于电子邮件的可能字体池，但在您决定使用 Lobster 作为正文字体之前，请考虑它的可访问性。为您的电子邮件选择字体时，请选择一种间距均匀且不太紧凑的字体。这不仅是可访问性的好主意，也是移动用户的好主意。

使用语义元素

包含语义元素使使用屏幕阅读器的订阅者可以选择按标题“扫描”电子邮件。您可以通过使用 <p> 和 <h> 标签来做到这一点。每个客户端都支持这些，因此这是开始使您的电子邮件更易于访问的好地方。

从历史上看，设置 <p> 和 <h> 标签的样式并不容易，这就是为什么在电子邮件中使用这些标签仍然相当罕见的原因。包裹在这些标签中的文本周围的边距很难管理，但使用这样的代码，您将能够控制该空格：

 <h1 style=”mso-line-height-rule:exactly; Margin:0; font-size:24px; line-height:28px;”>This is a title in an email</h1>

 <p style=”Margin:0; font-size:14px; line-height:18px;”>And this is the paragraph</p>

提示：使用 mso-line-height-rule:exactly; 在您的 <h> 标签中将保持您在 Microsoft Outlook 电子邮件客户端中设置的行高规则。

观看 Litmus Live 2017 中的这段视频，电子邮件开发人员 Paul Airy 解释了他为什么以及如何在电子邮件中使用语义 HTML 元素来使它们更易于访问：

推特视频 →

向 Litmus Live 的专家学习

当您加入我们参加 Litmus Live 会议时，通过现实世界的建议、最佳实践和实用要点成为更好的电子邮件营销人员。

了解更多 →

写可读副本

创建更易于访问和可读的电子邮件不仅取决于电子邮件的编码方式，还取决于副本的编写方式。使您的电子邮件副本更人性化将有助于提高其可读性，并有助于在您与订阅者之间建立一对一的沟通。

最流行的测试称为 Flesch-Kincaid 阅读轻松度测试，可在 Microsoft Word 中找到，并以 0-100 的等级计算您的内容阅读的难易程度。这意味着：

一个 11 岁的学生很容易理解 90-100 的分数
13 到 15 岁的学生很容易理解 60-70 的分数
30-50的分数会被大学生看懂
0-30的分数会被大学毕业生更好地理解

使内容更具“可读性”并不意味着您回避棘手的主题或沉重的主题。它不是简化您的写作，而是指文本的可访问性。您的最佳点在 60 到 70 之间，以吸引普通观众。当然，如果您的听众受过高等教育，那么不要害怕使用更复杂的语言。

您还可以通过直接编辑您的副本来提高可读性。

创建无障碍内容

使链接可点击/可点击

确保您的防弹按钮的大小足够大以供移动设备上的拇指和手指使用，这也将有助于您的电子邮件的可访问性。对于无法精确控制鼠标的人来说，更大的按钮将是有益的。

我喜欢大纽扣，我不能说谎。
– 贾斯汀·乔丹，石蕊

虽然 Apple 的 iPhone 人机界面指南建议按钮的最小宽度和高度为 44 像素，但该数字因移动设备供应商而异。另一种经验法则是使用 72 像素的最小宽度和高度，因为这是拇指的平均像素宽度。

禁止“单击此处”链接复制

避免使用“单击此处”作为链接的副本。屏幕阅读器用户经常浏览内容，跳过它作为扫描电子邮件的一种方式。提供您的链接上下文将帮助这些用户决定他们是否想要点击。

例如，如果您有一个指向鞋子产品列表的链接，使用“查看更多鞋子”等链接副本可以减少屏幕阅读器用户链接的歧义。减少链接的歧义对所有订阅者都是有益的，因为它不需要他们阅读链接周围的上下文——这对那些经常扫描电子邮件而没有全部了解的人来说是有益的。

这不仅是为了可访问性，消除“单击此处”链接将使您的电子邮件内容更加独立于设备。虽然“单击此处”对于使用笔记本电脑或台式机的订阅者可能有意义，但对于使用需要点击操作的移动设备或平板电脑的用户来说则不然。

正确使用 ALT 属性

自 HTML 电子邮件出现以来，ALT 属性一直是电子邮件的最佳实践，因为电子邮件客户端在默认情况下会阻止图像。附加到图像的 ALT 属性中使用的文本在图像未加载时显示。如果订阅者在其电子邮件客户端中默认关闭图像，或者如果他们使用屏幕阅读器阅读电子邮件，这将有助于订阅者“看到”电子邮件。

要正确使用 ALT 属性，必须完全理解与图像周围内容相关的图像上下文。首先，您需要确定图像是功能性的、说明性的还是装饰性的。

所有图像都需要 ALT 属性，因此对于不需要由屏幕阅读器读取或代表对订阅者至关重要的任何内容的图像，应使用空 ALT 属性。

在关闭所有图像的情况下查看您的电子邮件，以帮助您确定哪些图像需要 ALT 属性，哪些可以具有 null 属性。

要更深入地了解上下文如何通知您图像的 ALT 属性的使用，请访问 WebAim 的 ALT 属性页面。

在所有演示表上使用 role=”presentation”

在电子邮件设计中，表格用于保存内容以及构建电子邮件的设计。表格从未打算用于设计；然而，由于电子邮件客户端（如 Outlook）的限制，电子邮件设计者被迫使用 <table> 元素作为设计元素。

为了帮助屏幕阅读器理解包含内容的 <table> 元素和那些纯粹用于设计的元素之间的区别，在每个包含订阅者需要阅读的内容的表格上使用 add role=”presentation”。您只需要将其添加到每个 <table> 元素，而不是每个 <td>。这避免了强制屏幕阅读器一次一个地阅读表格的每个单元格，并帮助订阅者直接阅读重要内容。

除了 role="presentation" 之外，aria-hidden="true" 是另一个 HTML 属性，可以添加到 HTML 中用于视觉内容的元素中，并且应该对屏幕阅读器隐藏：

 <table role="presentation" aria-hidden="true" cellpadding="0" cellspacing="0" border="0"> <tr> <td></td> </tr> </table>

role="presentation" 也可用于图像。电子邮件开发人员 Remi Parmiter 在 Chrome 中发现了一些针对 VoiceOver（MacOS 屏幕阅读器应用程序）用户的异常行为。 VoiceOver 已开始读取图像的文件名，即使 ALT 属性存在但为空。建议在任何具有空 ALT 属性的图像上使用 HTML 属性 role=”presentation” 以避免读取图像的名称。