CSS 语音模块：speak 与 voice-volume 的历史探究
各位来宾，大家好。今天我们来探讨一个略显古老，但对理解 CSS 发展脉络具有重要意义的模块：CSS 语音模块。虽然这个模块中的 speak 和 voice-volume 属性已经被废弃，但了解它们曾经的功能和局限性，能帮助我们更深刻地理解 CSS 的演进，以及 Web 可访问性的重要性。
语音模块的诞生背景与目标
在 Web 发展的早期，人们就开始关注如何让网站内容更容易被残疾人士访问。特别是对于视力障碍者，屏幕阅读器是他们获取信息的重要工具。CSS 语音模块应运而生，其目标是提供一种标准化的方式，让开发者能够控制屏幕阅读器如何朗读网页内容。
最初的设想是，通过 CSS，我们可以控制：
- 朗读哪些内容：决定哪些元素应该被屏幕阅读器朗读，哪些应该被忽略。
- 朗读的方式：控制朗读的语速、音量、音高等。
- 朗读的风格：定义朗读的音调变化、停顿等，以更自然地表达内容。
这听起来很美好，但实际应用中遇到了诸多挑战，最终导致了该模块的废弃。
speak 属性：控制朗读行为
speak 属性是语音模块的核心，它用于指定元素是否应该被屏幕阅读器朗读。它有以下几个可能的值：
| 值 | 描述 |
|---|---|
normal |
使用浏览器默认的朗读行为。大多数情况下，这意味着元素会被朗读。 |
none |
阻止元素及其子元素被朗读。适用于纯装饰性元素或屏幕阅读器不应该朗读的内容。 |
spell-out |
逐个字母朗读元素的内容。适用于缩写或需要强调拼写的词语。 |
示例：
<!DOCTYPE html>
<html>
<head>
<title>speak 示例</title>
<style>
.ignore {
speak: none;
}
.acronym {
speak: spell-out;
}
</style>
</head>
<body>
<p>这是一个普通的段落。</p>
<p class="ignore">这段文字将被屏幕阅读器忽略。</p>
<p>这是一个缩写：<span class="acronym">CSS</span>。</p>
</body>
</html>在这个例子中，.ignore 类的元素不会被屏幕阅读器朗读，而 .acronym 类的元素的内容会被逐个字母朗读出来。
voice-volume 属性：控制朗读音量
voice-volume 属性用于控制朗读的音量。它允许开发者调整特定元素的朗读音量，以突出显示或弱化某些内容。
voice-volume 属性可以接受以下值：
| 值 | 描述 |
|---|---|
silent |
静音。元素不会被朗读。等同于 speak: none; |
x-soft |
非常轻柔的音量。 |
soft |
轻柔的音量。 |
normal |
正常的音量。这是默认值。 |
loud |
响亮的音量。 |
x-loud |
非常响亮的音量。 |
<percentage> |
使用百分比来表示音量，范围从 0% (静音) 到 100% (最大音量)。 |
<number> |
使用数字来表示音量，范围从 0 (静音) 到 1 (最大音量)。某些浏览器支持这种方式。 |
示例：
<!DOCTYPE html>
<html>
<head>
<title>voice-volume 示例</title>
<style>
.important {
voice-volume: x-loud;
}
.footnote {
voice-volume: soft;
}
</style>
</head>
<body>
<p>这是一个普通的段落。</p>
<p class="important">这段文字非常重要，需要用更大的音量朗读。</p>
<p class="footnote">这是一个脚注，应该用更轻柔的音量朗读。</p>
</body>
</html>在这个例子中，.important 类的元素会被用非常响亮的音量朗读，而 .footnote 类的元素会被用轻柔的音量朗读。
其他相关属性（简述）
除了 speak 和 voice-volume，语音模块还包含其他一些属性，用于更精细地控制朗读风格：
voice-rate：控制朗读的语速（字/分钟）。voice-pitch：控制朗读的音高。voice-family：指定朗读的声音类型（例如，男性、女性、儿童）。voice-stress：控制朗读的音调变化，用于强调某些词语。pause-before和pause-after：在元素前后添加停顿。
由于这些属性的应用范围更窄，且支持度更低，我们这里不做详细展开。
语音模块被废弃的原因
尽管 CSS 语音模块的设计初衷是好的，但它最终被废弃，主要原因如下：
- 浏览器支持不一致：不同浏览器对语音模块的实现差异很大，导致开发者很难编写出在所有浏览器上都能正常工作的代码。
- 屏幕阅读器自身的能力：现代屏幕阅读器已经具备了强大的朗读控制能力，开发者通常更倾向于使用屏幕阅读器提供的配置选项，而不是依赖 CSS。
- 缺乏实际应用场景：除了极少数特殊情况，开发者很少需要通过 CSS 来控制朗读行为。
- 维护成本高昂：为了保持与屏幕阅读器的兼容性，需要不断更新和维护语音模块，这增加了浏览器的开发成本。
因此，W3C 最终决定废弃 CSS 语音模块，并将重点放在其他更有效的 Web 可访问性技术上，例如 ARIA（Accessible Rich Internet Applications）。
ARIA：更强大的 Web 可访问性解决方案
ARIA 是一套用于增强 Web 内容可访问性的标准。它通过添加额外的 HTML 属性（aria-* 属性），向屏幕阅读器和其他辅助技术提供有关页面结构的语义信息。
与 CSS 语音模块相比，ARIA 具有以下优势：
- 更强大的语义表达能力：ARIA 可以描述复杂的 UI 组件和交互行为，而 CSS 语音模块只能控制简单的朗读行为。
- 更好的浏览器支持：ARIA 得到了主流浏览器的广泛支持。
- 更灵活的配置选项：ARIA 允许开发者根据具体需求定制可访问性体验。
示例：
<button aria-label="关闭对话框">X</button>在这个例子中，aria-label 属性告诉屏幕阅读器，这个按钮的作用是“关闭对话框”。
替代方案与最佳实践
虽然 CSS 语音模块已经被废弃，但我们仍然需要关注 Web 可访问性。以下是一些替代方案和最佳实践：
- 使用语义化的 HTML：使用正确的 HTML 元素（例如，
<header>,<nav>,<article>,<footer>）来描述页面结构，这有助于屏幕阅读器理解内容。 - 提供替代文本：为所有图像添加
alt属性，描述图像的内容。 - 使用 ARIA 属性：根据需要添加 ARIA 属性，增强 Web 内容的可访问性。
- 进行可访问性测试：使用屏幕阅读器和其他辅助技术测试你的网站，确保它对所有人都是可访问的。
- 学习 WCAG 标准：Web Content Accessibility Guidelines (WCAG) 是一套国际公认的 Web 可访问性标准，学习 WCAG 可以帮助你构建更易于访问的网站。
代码演示：使用 aria-label 改进可访问性
下面是一个简单的例子，演示如何使用 aria-label 属性改进 Web 内容的可访问性。
<!DOCTYPE html>
<html>
<head>
<title>ARIA 示例</title>
</head>
<body>
<a href="/home">
<img src="home-icon.png" alt="首页图标" aria-label="返回首页">
</a>
<button onclick="openDialog()" aria-label="打开设置对话框">
<img src="settings-icon.png" alt="设置图标">
</button>
<script>
function openDialog() {
// 打开对话框的逻辑
alert("打开设置对话框");
}
</script>
</body>
</html>在这个例子中：
- 链接中的图像使用
alt属性提供了图像的描述，并使用aria-label属性提供了更清晰的链接目标描述（“返回首页”）。 - 按钮使用
aria-label属性，为屏幕阅读器提供了按钮功能的描述（“打开设置对话框”）。即使图像无法加载或用户看不到图像，屏幕阅读器也能正确地描述按钮的功能。
语音模块的遗产：对可访问性思考的深化
虽然 CSS 语音模块已经成为历史，但它提醒我们，Web 可访问性是一个不断发展的领域。开发者需要持续学习新的技术和标准，才能构建更易于访问的网站。 即使这个模块最终没有成功，它在历史上也推动了对 Web 可访问性的关注，为 ARIA 等更先进技术的出现奠定了基础。它的教训在于，Web 可访问性需要全方位的解决方案，而不仅仅是依赖于 CSS 的简单控制。
更多IT精英技术系列讲座，到智猿学院