解决可访问性问题

ahad1020

大多数人想到在线无障碍时，首先想到的都是网站。那么电子邮件呢？它也是一种在线交流方式，使用的技术与网络基本相同，然而，电子邮件的无障碍性却常常被忽视，尽管它与网络同等重要。通过进行一些细微的调整并牢记一些基本原则，您可以确保所有受众都能像接收和欣赏您的网络内容一样接收和欣赏您的电子邮件内容。

这是一个大话题，所以请放松点。准备好了吗？

什么是可访问性？
在本文中，无障碍是指“设计产品、服务或环境，以方便残障人士使用”。其目的是确保残障人士能够通过直接和间接的方式获取某些内容；间接方式是指通过辅助技术，例如屏幕阅读器。

为什么它很重要？
确保所有受众都能收到您的信息，这应该是电子邮件营销活动的核心目标，对吧？您花费大量时间和预算来完善信息，确保图片完美无缺，并将邮件列表精准定位到合适的目标群体等等。然而，如果您忽视了可访问性问题，那么所有这些努力很可能都会在部分受众群体中白费。

以下数字可以说明这一点的重要性：

据世界卫生组织统计，全球至少有22亿人患有某种形式的视力障碍，其中约2.17亿人患有中度至重度视力障碍。
如果您还考虑色盲（您应该考虑），美国电话号码库 您会发现全球每 12 名男性中就有 1 名患有红绿色盲，每 200 名女性中就有 1 名患有红绿色盲；每 10,000 人中大约有 1 人患有蓝绿色盲。
视觉障碍并非唯一会影响无障碍体验的因素，认知障碍也应纳入考量。例如，据估计，5-10% 的人口患有阅读障碍，这也会影响您与受众有效沟通的能力。

如果您在电子邮件通信中不考虑可访问性，那么相当多的人可能会被排除在外。

除了为用户做正确的事情之外，其他重要的考虑因素更具法律性质。不遵守无障碍法律可能会导致政府采取行动或法律问题，而这些后果都是任何人都不希望看到的。

综上所述，让您的内容无障碍访问不仅惠及残障人士，也惠及所有人。当您的内容无障碍访问时，您也使其更加易用。那么，您该如何做到这一点呢？

一些值得遵循的最佳实践
可访问性的最佳实践有多种形式；今天，我们将考虑样式和可访问性以及对底层 HTML 代码的优化。

无障碍设计
颜色和对比度的运用

通常，设计师会严重依赖颜色和对比度来传达某种信息。虽然这可能对某些受众很有效，但对于色盲或其他视力障碍的人来说可能效果不佳。Web 内容可访问性指南 (WCAG) 标准要求标准大小文本的对比度至少为 4.5:1，大于 23px 的文本或大于 18px 的粗体文本的对比度为 3:1。具体来说，黑色背景上的黑色文本的对比度为 1:1，而白色背景上的黑色文本的对比度则为 21:1。一个好的经验法则是确保关键内容只出现在一种与背景形成强烈对比的颜色中；用户仍然能够收到信息。

您可以使用各种在线 WCAG 对比度检查网站来检查对比度（我在本文末尾列出了一个）。一些测试服务，例如 Litmus 或 Email on Acid，也提供色盲检查，以帮助您选择电子邮件中易于理解的颜色。

那么黑暗模式怎么样？

暗黑模式和无障碍功能并不总是能完美兼容；您需要在多个客户端上测试您的电子邮件，以确定它是否会从颜色对比度的角度影响无障碍功能。同样，测试服务可以提供帮助。

注意字体
字体和字体大小很重要

字体的选​​择很重要。选择一种间距合适、视觉上不密集、易于阅读的字体；越简单越好。不要太过复杂。

就尺寸而言，在台式机或笔记本电脑屏幕上，标准文本的最小建议尺寸为 14px。然而，在移动设备上，建议最小尺寸为 16px。如果您使用的字体字重较轻，则可能需要考虑更大的字体大小；这时，用户测试就派上用场了。利用 CSS 媒体查询来区分台式机和小型设备之间的样式。

间距也很重要

同样，为了提高易读性，也需要适当的行距。建议通常指出，行高应至少比字体大小大 4px，但您可以尝试不同的设置，看看哪种设置最适合您的布局。别忘了在移动设备上增加行高；您可以使用 em 而不是像素，让电子邮件客户端自动计算，同样，使用媒体查询。

不要把其他元素挤在一起。确保在文本块和其他元素周围留出空白，以便用户轻松区分文本块和元素之间的内容。

布局简单更好
无论用户使用什么设备，您的内容都应以合乎逻辑且易于理解的顺序显示。请务必记住，屏幕阅读器会从左到右、从上到下阅读内容；因此，从可访问性的角度来看，单列布局非常有效。它们也非常适合响应式设计，因为您无需担心内容可能会发生移动或堆叠，导致顺序混乱。如果您必须使用多列或堆叠布局，请务必进行测试，以确保您的信息不会因顺序混乱而显得混乱。

不要忘记纯文本版本
如果您的 ESP 或 MAP 支持纯文本版本，请务必添加纯文本版本的电子邮件；许多使用屏幕阅读器的用户更喜欢纯文本版本，因为它可以去除所有繁琐的文字，否则用户就不得不坐下来仔细阅读。有时，自动生成的纯文本电子邮件会包含来自其他元素的虚假文本，因此请务必仔细检查，确保它们生成正确，并传达了您想要的信息。

编写可访问的内容
确保内容清晰易读是一回事，但确保内容易于理解也同样重要。以下是一些常见的最佳实践，它们不仅适用于一般的电子邮件用例，也同样适用于无障碍访问。

主题行极其重要
请记住，用户阅读电子邮件的第一印象是主题行。因此，简洁、描述性强且意义明确至关重要，尤其是在用户使用屏幕阅读器之类的工具时。当然，除了无障碍功能之外，优质的主题行也大有裨益，因为优质的主题行往往能够提升用户的参与度。

让你的内容可读
用户打开电子邮件后，必须能够理解其中的内容。确保内容易于理解是无障碍设计的另一个要素。避免使用大量的技术术语和缩写，除非您确定受众能够轻松理解。Litmus 的这篇文章深入探讨了“像人一样撰写电子邮件文案”的含义。

不要使用全图片的电子邮件
如果用户的图片被屏蔽，或者正在使用屏幕阅读器，那么如果您的电子邮件完全基于图片，他们将看不到其中的任何内容（除了我们稍后会讨论的替代文本）。这也是我们不建议在电子邮件中使用图片作为号召性用语的原因之一，但从可访问性的角度来看，这也会不利于信息的传达。千万不要这样做。

请勿使用闪光灯
由于部分用户可能对闪光灯或内容敏感，请避免使用 GIF 动图或可能引发癫痫的内容链接。你永远不知道会发生什么意外后果，所以最好确保安全。

使链接的文本有意义
添加链接文本时，务必告知用户他们正在点击或轻触的内容。“点击此处”显然不够。

获得正确的代码
现在我们已经讨论了样式和内容考虑，让我们深入探讨一下细节，从编码的角度讨论可访问性。

那是什么语言？
记得在电子邮件的 HTML 中设置语言属性。这会告诉屏幕阅读器如何发音内容，如果您的用户使用的是网页版邮件，他们的浏览器可能还会提供翻译功能。

你的表需要一个角色
由于基本的电子邮件结构仍然依赖于 90 年代后期风格的 HTML 表格（感谢 Outlook），屏幕阅读器可能难以区分用于布局的表格和用于数据的表格。为了避免这种混淆，请务必在表格元素中添加 role=”presentation” 属性；这会告诉屏幕阅读器该表格纯粹用于布局目的，可以忽略。您还可以添加 aria-hidden=”true” 属性；有关 ARIA 的更多信息，请参阅 W3C 的指南。