全球超过 10 亿人患有某种形式的残疾。当您的邮件不具备无障碍性时，您就排除了很大一部分受众，并且可能违反了法律要求。本指南涵盖了创建适合所有人的邮件所需了解的一切。
为什么邮件无障碍性很重要
理解包容性邮件设计的重要性。
数据统计
残疾统计数据：
- 全球有 13 亿人患有严重残疾
- 2.85 亿人视力受损
- 4.66 亿人有听力损失
- 全球 15% 的人口患有某种残疾
邮件使用情况： 残疾人士像其他人一样使用邮件。当邮件不具备无障碍性时，他们无法与您的内容互动。
法律要求
主要法规：
美国残疾人法案 (ADA)： 要求企业提供无障碍沟通。
第 508 条： 联邦机构必须使电子内容具有无障碍性。
欧洲无障碍法： 欧盟对无障碍数字内容的要求。
AODA（加拿大）： 安大略省对组织的无障碍要求。
不合规风险：
- 法律诉讼和起诉
- 罚款和处罚
- 声誉损害
- 客户流失
商业案例
超越合规：
- 接触更多客户
- 改善整体用户体验
- 提高所有人的参与度
- 积极的品牌认知
- SEO 优势（某些技术重叠）
无障碍性惠及所有用户： 许多无障碍性改进帮助每个人：
- 清晰的文本有利于所有读者
- 良好的对比度有助于在强光下阅读
- 逻辑结构提高可扫描性
了解残疾与邮件
不同残疾如何影响邮件消费。
视觉障碍
类型：
- 失明（完全或部分）
- 低视力
- 色盲
- 与年龄相关的视力变化
他们如何阅读邮件：
- 屏幕阅读器（JAWS、NVDA、VoiceOver）
- 屏幕放大器
- 高对比度模式
- 盲文显示器
挑战：
- 没有描述的图像
- 色彩对比度差
- 小文本
- 复杂的布局
- 非结构化内容
运动障碍
类型：
- 手部活动受限
- 震颤
- 瘫痪
- 重复性劳损
他们如何互动：
- 键盘导航
- 开关设备
- 语音控制
- 眼动追踪
挑战：
- 小的点击目标
- 时间敏感的操作
- 复杂的交互
- 依赖悬停的元素
认知障碍
类型：
- 阅读障碍
- 注意力缺陷多动障碍 (ADHD)
- 自闭症谱系
- 记忆障碍
- 学习障碍
挑战：
- 复杂的语言
- 密集的内容
- 分散注意力的元素
- 不清晰的结构
- 不一致的设计
听觉障碍
对邮件的影响较小： 邮件主要是视觉的，因此听觉障碍的直接影响较小。然而：
- 视频内容需要字幕
- 音频内容需要文字记录
- 依赖音频提示的视觉替代方案
屏幕阅读器基础
了解屏幕阅读器如何处理邮件。
屏幕阅读器如何工作
处理过程：
- 屏幕阅读器访问邮件内容
- 按顺序读取 HTML 元素
- 宣布元素类型（标题、链接、图像等）
- 用户使用键盘命令导航
- 内容被大声朗读或发送到盲文显示器
流行的屏幕阅读器：
- JAWS（Windows）
- NVDA（Windows，免费）
- VoiceOver（Mac、iOS）
- TalkBack（Android）
- Narrator（Windows）
屏幕阅读器宣布什么
针对不同元素：
标题： "二级标题：欢迎订阅我们的新闻简报"
图像： "图像：[替代文本内容]" 或如果没有替代文本则为 "图像"
链接： "链接：立即购买"
按钮： "按钮：订阅"
表格： "3 列 5 行的表格"
导航模式
用户如何导航：
- 按标题跳过
- 在链接之间跳转
- 在表格中移动
- 按地标导航
为什么这很重要： 您的邮件结构决定了用户导航的容易程度。
无障碍性的语义 HTML
构建无障碍邮件结构。
正确的标题层次结构
逻辑使用标题：
<h1>主邮件标题</h1>
<h2>第一部分</h2>
<h3>小节</h3>
<h2>第二部分</h2>
<h3>小节</h3>
不要跳过级别：
- ❌ 错误：h1 → h3 → h2
- ✅ 正确：h1 → h2 → h3
为什么重要： 屏幕阅读器用户通过标题导航。逻辑层次结构帮助他们理解内容结构。
语义元素
使用适当的标签：
<p>用于段落<ul>和<ol>用于列表<table>用于数据表<strong>用于重要文本<em>用于强调
避免：
- 使用
<br>来创建间距（使用 CSS） - 用空段落创建空间
- 用表格进行布局（如果可能）
语言属性
声明语言：
<html lang="zh-Hans">
为什么重要： 屏幕阅读器使用语言属性正确发音文本。
对于多语言内容：
<p lang="en">Hello, how are you?</p>
图像无障碍性
使视觉内容具有无障碍性。
替代文本要点
什么是替代文本： 描述图像的替代文本，供看不到图像的人使用。
<img src="product.jpg" alt="带金色扣的红色皮革手袋，售价 199 美元">
替代文本最佳实践：
描述性强： 描述图像显示的内容以及为什么重要。
- ❌ 不好："图像" 或 "照片"
- ❌ 不好："img_12345.jpg"
- ✅ 好："客户 Sarah 微笑着在手机上使用我们的应用"
简洁： 尽可能保持在 125 个字符以内。
包含重要信息： 如果图像包含文本，在替代文本中包含该文本。
- 图像显示 "50% OFF" → 替代文本应包含 "五折促销"
上下文很重要： 描述图像在该特定上下文中的目的。
装饰性图像
何时使用空替代文本： 对于纯装饰性图像，不添加任何信息：
<img src="decorative-line.png" alt="">
装饰性图像示例：
- 分隔线
- 背景图案
- 纯美学图形
- 文本旁边的图标（文本已经解释了它们）
不要使用：
<img src="decorative.png" alt="装饰图像">
这会使屏幕阅读器宣布 "装饰图像"，这是无用的。
复杂图像
对于信息图表和图表： 在附近提供完整的文本替代方案。
<img src="sales-chart.png" alt="销售图表显示增长。完整数据在下表中。"> <!-- 包含实际数字的数据表 --> <table> <tr><th>月份</th><th>销售额</th></tr> <tr><td>一月</td><td>$50,000</td></tr> ... </table>
图像中的文本
避免文本在图像中：
- 屏幕阅读器无法读取图像中的文本
- 用户无法调整文本大小
- 不适应用户偏好
当不可避免时： 在替代属性中包含所有文本。
<img src="sale-banner.jpg" alt="夏季促销：所有商品 4 折。使用代码 SUMMER40。截止 7 月 31 日。">
色彩和对比度
确保视觉无障碍性。
色彩对比度要求
WCAG 标准：
普通文本（18px 以下或 14px 粗体）：
- AA：最低 4.5:1 对比度
- AAA：7:1 对比度（增强）
大文本（18px+ 或 14px+ 粗体）：
- AA：最低 3:1 对比度
- AAA：4.5:1 对比度
非文本元素（按钮、表单字段）：
- 最低 3:1 对比度
检查对比度
免费工具：
- WebAIM 对比度检查器
- 色彩对比度分析器
- Stark（Figma 插件）
- 内置浏览器开发工具
测试过程：
- 识别文本色彩和背景色彩
- 在检查器中输入十六进制值
- 验证是否符合 AA 标准最低要求
- 如果需要，调整色彩
常见对比度失败
有问题的组合：
- 白色上的浅灰色
- 白色上的黄色
- 白色上的浅蓝色
- 红色上的橙色
- 红色上的绿色
更好的替代方案：
- 白色 (#FFF) 上的深灰色 (#333) = 12.63:1 ✅
- 白色上的深蓝色 (#0000AA) = 9.98:1 ✅
- 深蓝色 (#003366) 上的白色 = 8.6:1 ✅
不要仅依赖色彩
问题： 色盲用户无法区分某些色彩。
示例：
- 红色/绿色表示错误/成功
- 色彩编码的类别
- 仅有色彩图例的图表
解决方案： 使用色彩加上另一个指标：
- 图标
- 文本标签
- 图案
- 形状
示例：
<!-- 不好 --> <span style="color: red;">错误</span> <!-- 好 --> <span style="color: red;">❌ 错误：请输入有效的邮箱地址</span>
链接无障碍性
使链接对每个人都可用。
描述性链接文本
不要使用：
- "点击这里"
- "阅读更多"
- "了解更多"
- "这里"
为什么这是一个问题： 屏幕阅读器用户经常通过链接导航。脱离上下文的 "点击这里" 毫无意义。
改用： 描述性文本，解释链接的去向。
<!-- 不好 --> <a href="/sale">点击这里</a> 查看我们的夏季促销。 <!-- 好 --> <a href="/sale">查看我们的夏季促销</a> <!-- 也好 --> 查看我们的<a href="/sale">夏季促销，所有商品 4 折</a>。
链接样式
使链接可识别：
- 下划线（最可靠）
- 色彩变化（具有足够对比度）
- 下划线和色彩都有（最好）
不要仅依赖色彩： 色盲用户可能不会注意到仅有色彩的链接。
链接大小和间距
触摸目标大小：
- 推荐最小 44x44 像素
- 链接之间有足够的间距
- 防止意外点击
示例：
<a href="/option1" style="display: inline-block; padding: 10px;">选项 1</a> <a href="/option2" style="display: inline-block; padding: 10px;">选项 2</a>
在新窗口中打开的链接
指示外部链接： 让用户知道链接何时打开新窗口或选项卡。
<a href="https://external.com" target="_blank"> 外部网站（在新窗口中打开） </a>
或使用视觉指示器：
<a href="https://external.com" target="_blank"> 外部网站 ↗ </a>
表格无障碍性
使数据表具有无障碍性。
何时使用表格
使用表格用于：
- 实际数据（类似电子表格的内容）
- 比较信息
- 时间表和日历
不要使用表格用于：
- 布局/定位（如果可以避免）
- 创建列（使用 CSS）
- 间距内容
无障碍表格结构
必需元素：
<table role="presentation"> <!-- 用于布局表格 -->
<!-- 用于数据表格 -->
<table>
<caption>产品比较</caption>
<thead>
<tr>
<th scope="col">功能</th>
<th scope="col">基础版</th>
<th scope="col">专业版</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">存储空间</th>
<td>10GB</td>
<td>100GB</td>
</tr>
</tbody>
</table>
表格标题
使用 <th> 元素： 用 <th> 标记标题单元格，而不是样式化的 <td>。
使用 scope 属性：
scope="col"用于列标题scope="row"用于行标题
复杂表格： 对于具有多个标题级别的复杂表格，使用 id 和 headers 属性。
表格标题
提供上下文：
<table> <caption>2024 年第三季度按地区划分的销售额</caption> ... </table>
标题帮助用户在深入研究数据之前理解表格的目的。
邮件客户端注意事项
跨不同邮件客户端的无障碍性。
邮件客户端限制
常见问题：
- 样式被删除或修改
- CSS 支持有限
- 不同的渲染引擎
- ARIA 支持不一致
跨客户端测试
优先客户端：
- Apple Mail（最佳无障碍性）
- Outlook（可变）
- Gmail（删除大量 CSS）
- Yahoo（有限）
测试工具：
- Litmus
- Email on Acid
- 带有屏幕阅读器的真实设备
深色模式无障碍性
深色模式挑战：
- 色彩反转
- 对比度变化
- 图像背景
解决方案：
- 在深色模式下测试
- 使用透明图像背景
- 确保对比度双向工作
- 尽可能提供深色模式特定样式
内容无障碍性
编写无障碍邮件内容。
简单语言
清晰写作：
- 使用简单的词汇
- 短句
- 主动语态
- 避免行话
可读性目标： 目标是 8 年级阅读水平或以下。
示例：
之前："利用我们的综合解决方案优化您的工作流程" 之后："使用我们的工具加快工作速度"
结构和格式
使用清晰的结构：
- 用于章节的标题
- 列表的项目符号
- 短段落
- 空白
视觉层次结构：
- 最重要的信息优先
- 清晰的视觉区分
- 一致的格式
阅读顺序
确保逻辑顺序： 代码中的阅读顺序应与视觉顺序匹配。
测试： 禁用 CSS 并查看内容是否仍然有意义。
避免大段文字
分解内容：
- 每段最多 3-4 句话
- 每隔几段使用小标题
- 包括视觉中断
按钮和 CTA 无障碍性
创建无障碍行动号召。
按钮与链接
使用按钮用于： 操作（提交、添加到购物车、注册）
使用链接用于： 导航（转到页面、阅读更多）
无障碍按钮设计
按钮要求：
- 描述操作的清晰文本
- 足够的大小（最小 44x44px）
- 高对比度
- 明显的可点击外观
按钮文本：
<!-- 不好 --> <a href="/buy">提交</a> <!-- 好 --> <a href="/buy">立即购买 - $49</a>
多个按钮
区分操作： 当存在多个按钮时，使每个按钮都独特且清晰。
<a href="/plan-basic">选择基础计划</a> <a href="/plan-pro">选择专业计划</a> <!-- 不是 --> <a href="/plan-basic">选择</a> <a href="/plan-pro">选择</a>
邮件中的表单
无障碍表单元素（在支持的情况下）。
表单无障碍性基础
注意：真正的表单在邮件中支持有限。大多数 "表单" 链接到网页。
如果使用表单：
标签：
<label for="email">邮箱地址</label> <input type="email" id="email" name="email">
必填字段：
<label for="email">邮箱地址（必填）</label> <input type="email" id="email" required aria-required="true">
错误消息
无障碍错误处理：
- 清晰的错误消息
- 与表单字段关联
- 不仅仅是色彩指示
<label for="email">邮箱地址</label> <input type="email" id="email" aria-describedby="email-error"> <span id="email-error" style="color: red;"> ❌ 请输入有效的邮箱地址 </span>
无障碍性测试
验证您的邮件是否具有无障碍性。
自动化测试
工具：
- WAVE 浏览器扩展
- axe 无障碍性检查器
- Lighthouse（Chrome DevTools）
- 具有无障碍性功能的邮件测试平台
自动化测试捕获的内容：
- 缺少替代文本
- 色彩对比度问题
- 缺少标签
- 标题层次结构问题
- 语言属性
局限性： 自动化测试捕获约 30% 的问题。手动测试至关重要。
手动测试
键盘测试：
- 仅使用 Tab 键导航邮件
- 您能到达所有交互元素吗？
- 焦点可见吗？
- 顺序合乎逻辑吗？
屏幕阅读器测试：
- 使用屏幕阅读器收听邮件
- 有意义吗？
- 图像是否正确描述？
- 结构清晰吗？
视觉测试：
- 放大到 200%——内容仍然可用吗？
- 删除图像——邮件仍然有效吗？
- 在灰度中检查——可以理解吗？
测试清单
每次发送之前：
- [ ] 所有图像都有替代文本
- [ ] 色彩对比度符合标准
- [ ] 标题结构正确
- [ ] 链接具有描述性
- [ ] 内容组织清晰
- [ ] 使用屏幕阅读器测试
- [ ] 测试键盘导航
无障碍性清单
结构
- [ ] 正确的标题层次结构（h1、h2、h3）
- [ ] 逻辑阅读顺序
- [ ] 语言属性已设置
- [ ] 使用语义 HTML
图像
- [ ] 所有有意义的图像的替代文本
- [ ] 装饰性图像的空替代文本
- [ ] 图像中的文本具有替代等效项
- [ ] 复杂图像有详细描述
色彩和对比度
- [ ] 文本符合 4.5:1 对比度
- [ ] 链接可区分
- [ ] 色彩不是唯一指标
- [ ] 在深色模式下工作
链接和按钮
- [ ] 描述性链接文本
- [ ] 足够的触摸目标（44px）
- [ ] 清晰的视觉区分
- [ ] 外部链接已指示
内容
- [ ] 使用简单语言
- [ ] 短段落
- [ ] 清晰的结构
- [ ] 重要信息优先
表格
- [ ] 标题单元格用
<th>标记 - [ ] 使用 scope 属性
- [ ] 提供标题
- [ ] 首选简单结构
常见无障碍性错误
错误 1：缺少替代文本
问题：图像没有替代文本。 修复：为所有有意义的图像添加描述性替代文本。
错误 2："点击这里" 链接
问题：非描述性链接文本。 修复：使用解释目的地的描述性文本。
错误 3：低对比度
问题：文本难以阅读。 修复：确保最低 4.5:1 对比度。
错误 4：仅色彩含义
问题：仅使用色彩传达信息。 修复：添加文本、图标或图案作为辅助指标。
错误 5：文本图像
问题：重要文本在图像中。 修复：使用真实文本；在不可避免时在替代文本中包含图像文本。
错误 6：跳过标题级别
问题：h1 跳到 h3。 修复：使用逻辑标题层次结构。
错误 7：复杂表格
问题：嵌套或合并的单元格使表格难以导航。 修复：简化表格结构；使用简单的行和列。
数据质量和无障碍性
列表健康与无障碍体验之间的联系。
为什么重要
有效邮件实现：
- 一致的体验交付
- 准确的参与度跟踪
- 适当的无障碍性测试反馈
无效地址意味着：
- 浪费无障碍性努力
- 扭曲的参与度指标
- 无法衡量无障碍邮件是否表现更好
所有有效订阅者的无障碍性
当您验证列表时，您可以确保您的无障碍性改进惠及从中受益的真实人士。
结论
邮件无障碍性不是可选的——它对于接触您的全部受众和遵守法律要求至关重要。更重要的是，无障碍邮件为每个人提供更好的体验。
关键无障碍性原则：
- 使用语义结构：正确的标题、列表和元素
- 描述图像：所有非装饰性图像的有意义的替代文本
- 确保对比度：文本最低 4.5:1
- 编写描述性链接：不要使用 "点击这里"
- 使用辅助技术测试：屏幕阅读器揭示您看不到的问题
无障碍邮件只有在到达有效收件箱时才重要。无效的邮件送达意味着您的无障碍性努力永远无法到达需要它们的人。
准备好确保您的无障碍邮件到达有效订阅者了吗？从邮件验证开始验证您的列表并最大化您的包容性邮件设计的影响。