聊聊语音 CSS

像许多大城市一样，波士顿也有地铁系统。通勤者习惯于听到定期的公共广播通知。

乘客会简单地忽略一些公告，例如一遍又一遍重复的预先录制的车站停靠名称。或者来自当地政客和名人的公益广告——同样，有点重复，第一次之后就不值得关注了。最重要的是服务警报，它们通常会提供乘客需要采取行动的直接和即时信息。

非正式的优先级

一位普通乘客的耳朵会训练自己被动地聆听重要的公告，同时在手机上玩耍或在辛苦工作了一天后放空自己。这不是一个完美的系统——偶尔我会发现自己被困在一列被改为快速列车的火车上。

但我们不应该删除低优先级的公告。目前尚不清楚哪种信息对谁重要：游客、新居民或来访的朋友和家人，仅举几例。

一个小小的思想实验：这种优先级可以通过声音设计变得更加正式吗？这个想法是始终如一地使用不同的声音，或在某些公告之前添加特定的音调。我注意到火车操作员出现了一种模仿这种行为的现象：有时他们会在公告之前使用一段短暂的无线电静态来引起乘客的注意。

机会

我一直想知道这种思维方式是否可以扩展到为每个人打造更好的网络体验。毕竟，声音正在网络上复兴：Web 音频 API 拥有强大的支持，并且大多数主要操作系统现在都附带内置的叙述工具。Siri 等数字助理几乎无处不在，播客和有声读物已成为人们媒体饮食的正常部分。

在 CSS 的——咳咳——错综复杂的文档中，是对两种媒体类型的引用，它们说到了这个问题：aural 和 speech。核心思想非常简单：面向音频的 CSS 告诉数字化语音如何读取内容，就像常规 CSS 告诉浏览器如何视觉显示内容一样。在这两者中，aural 已被弃用。speech 媒体类型检测也很棘手，因为屏幕阅读器可能无法将其存在告知浏览器。

作为 aural 媒体类型的演变版本，CSS 3 语音模块 看起来最有希望。与 display: none; 一样，它是 对屏幕阅读器行为产生影响的 CSS 的一小部分。它使用传统的 CSS 属性/值配对以及现有的声明来创建具有 与视觉盒模型一致性 的音频体验。

code {
  background-color: #292a2b;
  color: #e6e6e6;
  font-family: monospace;
  speak: literal-punctuation; /* Reads all punctuation out loud in iOS VoiceOver */
}

仅仅因为你可以，并不意味着你应该

在他的 2003 年出版的《构建可访问的网站》一书中，作者/记者/无障碍研究员 Joe Clark 概述了一些充分的理由，说明永远不要更改语音音频的生成方式。值得注意的是

支持

许多浏览器不遵循这项技术，因此编写代码将是浪费精力。简单直接。

熟练程度

克拉克认为，开发人员不应该干预语音内容的读取方式，因为他们缺乏“制作计算机语音、将其放置在三维空间中以及为特殊组件指定背景音乐和音调”的训练。

对于某些人来说可能是这样，但我们的行业是由博学者组成的。我认识很多工程师，他们白天开发企业级技术架构，晚上创作音乐。还有一个事实是，我们已经做到了这一点。

他想要表达的观点——打造一个包罗万象的音频体验是一项不可能完成的任务——是正确的。但情况已经发生了变化。不再需要从头开始创建整个音频世界。大多数操作系统现在都提供数字化语音，而且廉价/免费的素材声音和声音编辑资源的数量几乎多到令人难以置信。

适当性

对于屏幕阅读器用户而言，阅读器的语音是他们与网络交互的界面。因此，用户可能会对他们屏幕阅读器的语音非常热情。鉴于此，克拉克认为不应更改屏幕阅读器如何读出不在其词典中的内容。

屏幕阅读器在处理数字界面方面具有经过深思熟虑的默认设置，并且可能处理许多开发人员甚至不会想到的内容类型。例如，某些屏幕阅读器使用专门的声音提示来表示行为。NVDA 使用一系列音调来传达活动进度条

更改屏幕阅读器行为实际上会改变用户的预期体验。突然的、未经宣布的更改可能会令人极度困惑，并可能引起恐惧、愤怒和困惑。

一个很好的类比是，如果开发人员要根据每个网站更改鼠标滚动和点击的方式。这种不可预测性并非只是惹恼某人，而是无意中使内容更难理解或将默认操作更改为不熟悉的内容。

我的声音不是你的声音

屏幕阅读器的语音通常与操作系统中设置的区域和语言首选项相关联。

例如，iOS 不仅包含英语设置，还包含包括英国、爱尔兰、新加坡、新西兰和其他五个地区的变体。选择英国英语的用户，除其他事项外，会发现他们的“反转颜色”功能被重命名为“反转颜色”。

但是，用户的语言首选项设置可能不是他们的母语、他们原籍国的语言或他们当前居住的国家的语言。我最喜欢的例子是我的美国朋友，他将 iPhone 上的语音设置为英国英语，以便让 Siri 听起来更像一个管家。

英国英语也是一个很好的提醒，表明区域差异是一个需要考虑的方面，各位。

另一个需要考虑的是生物和环境性听力损失。它可以表现出各种严重程度，因此 voice-balance 属性 可能具有将语音“移出”某人可听范围的潜力。

此外，语音朗读内容的速度对于某些人来说可能太快，而对于其他人来说可能太慢。经验丰富的屏幕阅读器操作员可能会加快语音速度，就像某些用户快速滚动页面以找到他们需要的信息一样。屏幕阅读器新手或阅读不熟悉主题的用户可能希望语音速度放慢，以免不知所措。

然而

克拉克承认他的一些反对意见只存在于学术领域。他以一个精通技术的盲人用户为例，该用户利用 CSS 互操作性的强大功能使他的阅读体验变得愉悦。

根据我（勉强算过关的）研究技能，在本书出版后的十四年中，很少有人研究过询问屏幕阅读器用户对这类技术的偏好。同样重要的是要记住屏幕阅读器用户不一定是盲人，也不一定是不懂技术的文盲。

这里的想法是将 CSS 音频操作视为用户可以全局或按站点选择加入的功能。可以考虑像Greasemonkey/Tampermonkey这样的网页扩展，或者当网站请求发送通知的权限时。它可以像用户已经习惯使用的各种偏好切换一样简单。

这方面已经有先例了。无障碍工程师Léonie Watson指出，另一款流行的屏幕阅读器——JAWS—“内置了一个声音方案，可以为网页的不同部分启用不同的声音。这表明屏幕阅读器用户可能对增强音频体验有一些兴趣。”

选择加入还假设了一些功能，例如白名单，以防止对 CSS 操作的语音的潜在滥用。例如，用户可以只允许某些具有 CSS 操作内容的网站被读取，或者阻止那些使用不那么谨慎的做法来吸引注意力的不良广告网络。

观点：我有一些

在某些情况下，屏幕阅读器无法知道内容的上下文，但可以接受人工提供的关于如何正确解析内容的建议。例如，James Craig 在 2011 年 WWDC 视频中概述了如何使用speak-as 值使街道名称和代码读起来更准确（从 15:36 处开始，需要 Safari 观看）。

在编程中，每个符号都很重要。能够自信地陈述代码中事物之间的关系是编程的基础方面。thisOne != thisOtherOne 被读作“this one 等于 this other one”，而本意是“this one *不*等于 this other one”的情况是一个特别令人关注的问题。

想到的，其他一些需要这种音频操作的情况包括

• 确保名字发音正确。
• 在开发人员无法编辑 HTML 的情况下静音图标的发音（尤其是使用 Web 字体制作的图标）。
• 使用声音效果提示交互组件，而屏幕阅读器本身没有内置行为。
• 创建一个云同步服务，存储用户个人语音偏好和发音替换的集合。
• 能够设置一个伴随声音来阅读专业内容，例如转录的访谈或代码示例。
• 表达情感。在我们获得类似于EmotionML的支持之前，这可能是近似作者情感意图的一种好方法（不，表情符号不算）。
• 增添趣味。如果用户无法查看网站的美术指导，他们的体验就依赖于作者或声音编辑的技巧——在互联网上，这有时会让人感觉不尽如人意。

现状

CSS 语音模块文档上次修改于 2012 年 3 月。iOS 上的 VoiceOver使用以下 speak-as 值为 speak 属性实现支持，如无障碍顾问Paul J. Adam在此演示中所示。

• normal
• digits
• literal-punctuation
• spell-out

显然，iOS 的辅助功能“朗读所选内容”和“朗读屏幕”目前不遵循这些属性。

尽管 CSS 3 语音模块需要批准（因此仍在发生变化），但 VoiceOver 的支持表明已经建立了一个事实上的标准。iOS 的普及——数百万台设备，其中 76% 运行最新版本的 iOS——使得实施值得考虑。对于那些能够从这些声明提供的清晰度中受益的人来说，它可能会产生巨大的影响。

兼收并蓄，明确表达

发挥 CSS 的优势，对网站内容进行少量、精确的调整，以增强整体用户体验，而无论设备或使用环境如何。从语义标记和渐进增强思维开始。不要为了虚荣而覆盖现有的音频提示。使用 iOS 支持的 speak-as 值，在 VoiceOver 的默认值需要经过深思熟虑的建议时提供清晰度。

编写小型实用程序类并将它们应用于围绕有问题的 内容包装的语义中立的 span 标签将是一个不错的方法。这是一个 VoiceOver 朗读此 CodePen的录音，以进行演示。

注意进行广泛的测试，以确保这些调整不会损害其他屏幕阅读软件。如果你还没有使用屏幕阅读器进行测试，现在正是开始的好时机！

不幸的是，目前 CSS 语音的支持有限。但了解它能做什么和不能做什么，以及它可以在哪些情况下使用，对于开发人员来说仍然至关重要。对 CSS 的深思熟虑和周到的应用是为所有用户创建健壮界面的关键部分，无论他们的能力或环境如何。