电子邮件可访问性指南:标准和最佳实践
已发表: 2022-01-19环顾四周,听听发生了什么。 在全彩模式下,您是否清楚地看到了一切? 你能很好地听到噪音和声音吗? 恭喜你,你肯定是个幸运的人。 而且,你实际上是一个非常快乐的人。 你有视觉和听觉!
您可能认为这些能力很常见,并且默认授予每个人? 如果我告诉您,您的联系人列表中 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动画有教育作用,请为读者提供详细说明;
- 不要在一封电子邮件中使用不同的语言,因为屏幕阅读器一次只能使用一种语言;
- 检查链接的意义;
- 左对齐文本;
- 用真爱创建您的时事通讯和触发电子邮件。 关心您的所有订阅者。
我真诚地祝愿你一切顺利。 把关怀和善意传遍四方!