表情符号无障碍 - 屏幕阅读器到底会读出什么

本文大约需要 5 分钟阅读。

当你写下\u201C干得好 👏👏👏\u201D时，屏幕阅读器用户听到的是\u201C干得好 鼓掌 鼓掌 鼓掌\u201D。表情符号在视觉上很紧凑，但在语音上却很\u201C昂贵\u201D。每个表情符号都有一个会被朗读出来的名称， 实际体验可能从有帮助到干扰再到完全无法理解。本文将解释各主流屏幕阅读器如何处理表情符号、 无障碍模式的表现，以及如何撰写对\u201C用听的\u201D用户友好的内容。

屏幕阅读器如何知道该读什么

屏幕阅读器并不是从图像中识别表情符号名称的。它们使用一个名为 通用区域数据存储库 (CLDR) 的结构化数据库，由 Unicode 联盟维护。CLDR 为数十种语言中的每个表情符号提供本地化名称和关键词。

例如，表情符号 🌸 在英语中的 CLDR 名称是 "cherry blossom"，在日语中是\u201C桜\u201D，在法语中是 "fleur de cerisier"。 当屏幕阅读器遇到该码位时，会查找用户语言对应的名称并朗读出来。 这就是为什么同一个表情符号在不同语言环境下听起来完全不同 - 底层码位相同，但语音化是本地化的。

主流屏幕阅读器之间的差异

VoiceOver (macOS / iOS)

VoiceOver 使用 Apple 自己的表情符号名称数据库，与 CLDR 高度一致但有 Apple 特有的调整。 它会在表情符号名称前后加入短暂停顿，有助于将表情符号与周围文本区分开来。 详细程度可以在设置中控制，但大多数用户会保持表情符号朗读开启。

在 iOS 上，VoiceOver 会更积极地朗读每个表情符号。在 macOS 上，它在某些场景下会跳过纯装饰性的表情符号， 尤其是在浏览标题时。

TalkBack (Android)

TalkBack 使用 Google 的 CLDR 对齐名称。它与 VoiceOver 类似，会朗读每个表情符号， 但具体措辞略有不同。VoiceOver 上的 "Smiling face with heart-eyes" 在 TalkBack 上可能是 "Smiling face with heart eyes" - 含义相同，断词不同。

NVDA (Windows，免费)

NVDA 是最流行的免费 Windows 屏幕阅读器。它使用系统的 CLDR 数据库朗读表情符号， 并支持自定义详细程度。高级用户通常会配置 NVDA 跳过装饰性表情符号， 但朗读语义性表情符号（警告标志、状态指示器）。

JAWS (Windows，商业版)

JAWS 是历史悠久的商业屏幕阅读器，在企业和政府环境中很常见。 它处理表情符号的方式与 NVDA 类似，但有自己的发音数据库和更精细的标点控制。 近期版本已大幅改善了表情符号处理，但旧版安装可能仍会将不熟悉的表情符号朗读为 "unicode character" 而非有意义的名称。

对屏幕阅读器用户造成困扰的模式

表情符号重复

为了强调而重复表情符号 (🎉🎉🎉、👏👏👏、🔥🔥🔥) 是社交媒体上常见的风格选择。 对屏幕阅读器用户来说，每次重复都会被朗读出来。三个派对彩花听起来像 \u201C派对彩花 派对彩花 派对彩花\u201D - 轻则尴尬，重则打断理解。

如果你想在视觉上表达热情，一个表情符号就够了。重复不会增加任何含义， 反而会降低听觉体验。

表情符号作为列表标记

很多人用表情符号作为列表项的开头：✅ 表示已完成、❌ 表示失败、🔥 表示亮点。 视觉上没问题。但听觉上会变成\u201C对勾 第一项，叉号 第二项，火焰 第三项\u201D - 屏幕阅读器在每个项目前都会朗读标记，拖慢列表浏览速度。

对于列表，建议使用真正的 HTML 列表标记 (<ul>、<ol>)， 屏幕阅读器可以简洁地朗读为\u201C列表，3 项\u201D，并让用户通过快捷键跳转。 只在图标确实增加语义价值时才使用表情符号，而非为了装饰一致性。

表情符号密集的标题

像\u201C🎯 Q3 目标 🎯\u201D这样的标题会被读成\u201C靶心 Q3 目标 靶心\u201D。在 VoiceOver 上， 用户可能正在按标题导航（\u201C转子：标题\u201D），每个标题都变成冗长的音频片段。 标题是屏幕阅读器用户的主要导航工具 - 保持简洁可读。

由表情符号组成的个人资料和简介

装饰性表情符号简介 (✨🌸✨ 名字 ✨🌸✨) 听起来像\u201C闪光 樱花 闪光 名字 闪光 樱花 闪光\u201D。 在频繁朗读简介的平台上（Twitter 通知、个人资料预览）， 这会成为反复出现的语音干扰。视觉美感是以听觉用户的真实代价换来的。

对屏幕阅读器用户有帮助的模式

在表情符号能增加语义信息的地方使用

⚠️ 放在警告前、✅ 放在确认前、🔗 放在链接区域前 - 这些表情符号增强了理解， 因为它们朗读出的名称（\u201C警告\u201D\u201C对勾\u201D\u201C链接\u201D）与周围含义一致。 音频版本是信息性的，而非装饰性的。

将表情符号与明确的文字配对

\u201C🎉 恭喜升职\u201D对视觉用户和屏幕阅读器用户都有效，因为即使表情符号名称读起来有些奇怪， 文字本身也传达了含义。相比之下，单独的\u201C🎉\u201D需要听者将\u201C派对彩花\u201D解码为预期的情感。

在纯图标场景中使用 ARIA 标签

如果表情符号出现在没有周围文字的按钮或链接中（比如只有 ✏️ 的\u201C编辑\u201D按钮）， 请提供明确的 aria-label 描述操作：<button aria-label="编辑">✏️</button>。 这会覆盖默认的表情符号朗读，给屏幕阅读器正确的动词。

隐藏纯装饰性表情符号

纯粹为了视觉效果而存在的装饰性表情符号可以用 <span aria-hidden="true"> 包裹， 使其在屏幕阅读器输出中被跳过。请谨慎使用 - \u201C装饰性\u201D应该意味着确实没有语义内容。 如果表情符号传达了任何信息（情绪、状态、类别），就不要隐藏它。

文化和语言方面的考量

本地化质量参差不齐

CLDR 的质量因语言而异。英语名称经过精心策划，听起来自然。 一些资源较少的语言可能有机器翻译或过于简短的名称，朗读时听起来很机械。 面向多语言受众的产品可能需要在每种目标语言中与母语屏幕阅读器用户一起测试表情符号选择。

惯用含义与字面名称不同

💀 读作\u201C骷髅\u201D，但年轻用户用它表示\u201C笑死了\u201D。 屏幕阅读器用户听到\u201C骷髅\u201D时无法获得俚语语境。这不是无障碍工具能单独解决的问题 - 这是影响写作者选择的含义鸿沟。当以惯用方式使用表情符号时，辅助文字对所有人都有帮助。

独到见解 - 表情符号是你的替代文本的一部分

Web 无障碍指南强调图片的替代文本：每张有意义的图片都需要文字替代。 表情符号本质上是带有内置替代文本（CLDR 名称）的小型内联图片。 这意味着你写的每个表情符号都会贡献到页面的音频内容中，无论你是否有此意图。

思维方式的转变是将表情符号视为\u201C始终被朗读的文字\u201D并据此编辑。 大声朗读你的草稿，将每个表情符号替换为其 CLDR 名称。如果结果听起来尴尬或重复， 就修改文字 - 要么换一个更具语义性的表情符号，要么删除装饰性的。 这相当于用 VoiceOver 测试你的页面，但你不需要离开编辑器就能做到。

团队可以做什么

• 审查现有内容 - 用 VoiceOver 或 NVDA 浏览热门页面，听听表情符号的摩擦点
• 将表情符号审查添加到无障碍检查清单中，与替代文本和颜色对比度并列
• 记录团队规范 - \u201C每个标题最多一个表情符号\u201D\u201C不重复表情符号\u201D\u201C使用真正的列表标记\u201D
• 培训内容创作者了解装饰性表情符号的音频成本
• 在多个屏幕阅读器上测试 - VoiceOver、TalkBack、NVDA 各有细微差异

总结

表情符号在传达含义时是包容的，在纯粹装饰时则是干扰性的。 解决方法是编辑纪律：在值得的地方放一个表情符号，配以明确的文字， 避免在标题和重复中使用。无障碍方面的好处是实实在在的，视觉内容质量通常也会随之提升。

EmoArt 的探索页面包含适合视觉造型的组合。 当将其中任何一个应用于公开个人资料或面向多元受众的内容时，请在确定使用重度装饰模式之前先听听效果。