设计可访问的内容 accessible-content
欧洲无障碍法是一项指令，旨在通过消除因成员国之间国家规则不同而造成的障碍，增强无障碍产品和服务的内部市场。
这项法规规定，所有数字通信，包括电子邮件、新闻稿、PDF和可下载内容，都应可供访问。 因此，在为收件人创建内容时，需要遵循特定准则，例如使用无障碍字体和可读格式，以及为图像提供替换文本。
Marketo Engage Email Designer根据Web内容无障碍准则(WCAG) 2.1，级别AA，允许您轻松遵守此指令。 下面列出了使用Marketo Engage设计无障碍内容的最佳实践。
确保文本可读性 text-readability
利用 Styles 组件的 Text 选项卡确保文本可读，例如使用适当的颜色对比度和简单字体。
对于字体和文本，请确保遵循以下准则：
字体选择
- 使用Arial、Verdana、Tahoma、Helvetica或Open Sans等无衬线字体。
- 避免在正文内容中使用衬线、草稿或装饰性字体。
- 为了一致性和回退，请粘贴到有限的字体集（例如：
font-family: Arial, Helvetica, sans-serif;）。
字体大小
- 确保正文的最小字体大小为16px。
- 为标题使用正确的层次结构。
颜色对比度
- 保持文本与背景之间的对比度至少为4.5:1。
- 对于大文本(≥24px或粗体18px)，请确保对比度至少为3:1。
- 避免在白色背景上使用浅灰色或淡色文本。
- 不要仅仅依靠颜色来传达含义。 使用下划线、图标等
文本辅助功能
- 避免在图像中使用文本。
- 请勿在正文中使用所有大写字母。
- 确保文本可以缩放到200%而不破坏布局。
确保可视辅助功能 visual-accessibility
- 避免使用仅用于颜色指示器的重要信息。
- 为清楚起见，请使用文本标签或图标。
- 针对移动和响应式布局优化您的设计，确保按钮较大且间距适当。
- 定期跨设备和屏幕大小测试以保持可访问性。
在Marketo Engage中，可以使用Email Designer Styles 窗格中的样式参数和属性进一步细化内容中不同元素的大小和间距。
例如，您可以更新背景或更改边距、填充和对齐来提高可视辅助功能。
Marketo Engage Email Designer允许您预览和优化不同设备和屏幕大小的设计。 您随时可以 Switch to live view 检查您的内容在各种设备大小上的呈现方式。
对图像使用替换文本 alt-text
使用 Image 组件为图像提供替换文本。
- 简洁而符合情境地描述图像的用途。
- 避免使用“图像……”等多余短语，并使用空替换文本作为装饰性图像。
- 对于具有意义的图标，提供有意义的标签；对于复杂的图像，使用简短的替换文本以及在其他位置使用更长的描述。
使用可读格式 readable-format
使用电子邮件Designer的相关结构和内容组件以及 Styles 窗格中的选项，以清晰、逻辑和简洁的方式整理您的内容，让所有人都可以访问。
- 使用结构化、语义化的HTML，并带有适当的标题、段落、列表和表。
- 确保内容遵循从左至右、从上至下的逻辑流程。
- 使用简洁明了的语言。
- 为PDF和信息图形提供替代格式。
- 允许调整文本大小和重排，并确保在所有格式下均可使用足够的颜色对比度读取排版规则。
确保内容可读性 readability
要读取，您的内容必须清晰、结构合理，并且可供所有人使用，包括患有视觉、认知或阅读障碍的人以及使用辅助技术的人。 创建无障碍内容时要考虑的一些要点包括：
- 将句子保留在20字或更少的范围内。
- 编辑您的文案以简明扼要。
- 使用主动语态使句子结构更简单。
- 避免使用某些人可能不熟悉的俚语、行话或地区性用语。
为了评估您的电子邮件可读性，您可以使用常用的Flesch Reading Ease测试，该测试可在Microsoft Word中找到，并以0至100的级数计算内容的阅读方便程度。
测试您的内容 test
要验证内容的辅助功能，您可以使用Marketo Engage提供的测试功能。 它们并非专门用于检查您的内容是否完全可访问，但它们可以提供第一级别的验证。
-
使用测试配置文件预览内容。
-
使用电子邮件渲染选项，该选项可利用Litmus在主要电子邮件客户端(Apple Mail、Gmail、Outlook)间模拟您的设计，并查看文本、颜色和图像是否可以访问您的内容。
-
在将内容发送到实际受众之前，请发送校样以测试内容的渲染。
如果内容可可靠访问，要以更一致的方式签入，请访问特定的外部工具，例如：
-
WebAim对比度检查器和WAVE Web辅助功能评估工具用于评估对比度和符合性；
使用深色模式 dark-mode
深色模式增强了对光线敏感或视觉障碍的用户的可视性，以改善观看体验。
在深色模式下设计内容的一些最佳实践包括：
- 使用透明PNG或SVG
- 设置相应的元标记和CSS
- 提供可访问的回退样式（如果不支持深色模式）。
通过在浅色和深色模式下测试所有电子邮件内容和UI元素，确保您的电子邮件在深色模式下正确呈现。
使用特定属性进行辅助功能 attributes
语言属性 language
创建设计时，请在内容正文中包含lang（语言）和dir（文本方向）属性。 这些属性可帮助辅助技术（如屏幕阅读器）以适当的方式解释和展示您的内容。
-
lang属性指示发送给辅助技术的电子邮件的语言，确保单词的发音正确。accordion 示例 英语示例：
code language-none <body lang="en">法语示例：
code language-none <body lang="fr"> -
dir属性指定文本方向。 大多数语言，包括英语和法语，从左至右(ltr)阅读，而阿拉伯语和希伯来语等语言从右至左(rtl)阅读。accordion 示例 英语示例（从左至右）：
code language-html <body lang="en" dir="ltr">阿拉伯语示例（从右至左）：
code language-html <body lang="ar" dir="rtl">
屏幕阅读器依赖于lang属性来应用正确的发音规则，而文本方向可确保从左到右或从右到左语言的内容自然流动。 如果没有这些属性，用户可能会遇到阅读顺序混乱或发音错误的情况。 始终使用适当的lang和dir属性封装您的电子邮件正文。
<table>或<td>块），以确保每个部分均可正确读取。表格 tables
在HTML内容中，表格通常用于布局。 默认情况下，屏幕阅读器将每<table>视为数据表，声明行、列和结构。 如果表仅用于格式化，这可能会造成混淆。
将role="presentation"（或role="none"）添加到布局表，以确保辅助型技术跳过其结构并仅关注实际内容。
role="presentation"）| code language-html |
|---|
|
屏幕阅读器显示：
“你好，世界。 欢迎收看我们的新闻稿。” （未提及行、列或表）
role="presentation"）| code language-html |
|---|
|
屏幕阅读器显示：
“带2列3行的表。”
“姓名，彼得。 分数，19。”
“姓名，帕克。 得分，62分。”
role="presentation"用于布局表。 对于数据表，请保留语义<table>结构，以便屏幕阅读器可以正确声明标题和关系。链接文本 links
屏幕阅读器使用文本阅读链接。 如果链接仅标记为“单击此处”或“了解更多”，则使用辅助技术的用户将无法知道目标。 为确保辅助功能，他们需要清晰地指示目标或操作的描述性文本。
使用电子邮件Designer添加指向内容的链接并编辑标签，使其可见（可见）且具有描述性（清除用途）。 避免使用模糊的标签，如“此处”或“更多”。
| code language-none |
|---|
|
屏幕阅读器显示：
“Link， 8月发行说明。”
| code language-none |
|---|
|
屏幕阅读器显示：
“链接，单击此处。” （未提供顺序不正确的上下文）