DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 的免费积分!
CSS 中的 speak
属性用于指定浏览器是否应该朗读它所读取的内容,例如通过屏幕阅读器。
.module {
speak: never;
speak-as: spell-out;
}
speak
的值
auto
:只要元素不是display: block
且是visibility: visible
,文本就会被声音朗读。never
:文本不会被声音朗读。always
:文本将被声音朗读,无论display
值或speak
的祖先值如何。
speak-as
的值
与 speak
相关,因为它涉及文本的朗读方式。
normal
:采用浏览器的默认speak
设置。spell-out
:指示浏览器拼写属性内容,而不是说出完整单词。digits
:逐个朗读数字,例如 69 将被朗读为“六 九”。不错。literal-punctuation
:拼写出标点符号(例如分号),而不是将其视为停顿。no-punctuation
:完全跳过标点符号。
如何“样式化”语音?
speak
属性与其说是为屏幕阅读器样式化语音,不如说是调整使用屏幕阅读器时网站可访问性的体验。
我们很容易将语音样式化联想到性别、音调、口音以及我们自己在现实生活中说话的其他方式,但 speak
并非如此。 这种级别的控制正是 CSS 语音模块中正在考虑用于 voice
的内容。
更多信息
浏览器支持
截至撰写本文时,尚不支持。 似乎 Opera 曾经原生支持该属性,使用 -xv-
前缀,然后再与 Chrome 使用的 Blink 渲染引擎合并。
MDN 谈到了与计数器样式相关的 speak-as
<ul class="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
@counter-style speak-as-example {
system: fixed;
symbols: ;
suffix: " ";
speak-as: numbers;
}
.list {
list-style: speak-as-example;
}
在更新本文时,Firefox 支持该功能。