speak-as

speak-as 描述符指定使用给定 @counter-style 构造的计数器符号如何在语音形式中表示。例如，作者可以指定计数器符号以其数值形式发音，或者仅用音频提示表示。

语法

css
/* Keyword values */
speak-as: auto;
speak-as: bullets;
speak-as: numbers;
speak-as: words;
speak-as: spell-out;

/* @counter-style name value */
speak-as: <counter-style-name>;

值

auto

如果 speak-as 的值为 auto，则 speak-as 的有效值将根据 system 描述符的值确定。

  • 如果 system 的值为 alphabetic，则 speak-as 的有效值将为 spell-out。
  • 如果 system 为 cyclic，则 speak-as 的有效值将为 bullets。
  • 如果 system 为 extends，则 speak-as 的值将与在扩展样式上指定 speak-as: auto 相同。
  • 在所有其他情况下，指定 auto 与指定 speak-as: numbers 的效果相同。
bullets

将读出 用户代理 为表示无序列表项定义的短语或音频提示。

numbers

计数器的数值将以文档语言读出。

words

用户代理将像往常一样生成计数器值，并将其以文档语言中的单词读出。

spell-out

用户代理将像往常一样生成计数器表示，并逐个字母读出。如果用户代理不知道如何读出特定的计数器符号，用户代理可能会像 speak-as 的值为 numbers 一样读出它。

<counter-style-name>

另一个计数器样式的名称，指定为 <custom-ident>。如果包含，则计数器将以该计数器样式中指定的格式读出，类似于指定 fallback 描述符。如果指定的样式不存在，则 speak-as 默认为 auto。

无障碍访问

辅助技术对 speak-as 属性的支持非常有限。不要依赖它来传达理解页面目的的关键信息。

让我们谈谈语音 CSS | CSS Tricks (2017)

正式定义

相关 @规则@counter-style
初始值auto
计算值如指定

正式语法

speak-as = 
  auto                  |
  bullets               |
  numbers               |
  words                 |
  spell-out             |
  <counter-style-name>

示例

设置计数器的语音形式

在本例中，计数器系统使用无法理解的符号作为视觉标记是固定的。但是，speak-as 描述符用于在辅助功能树中将列表项标记设置为数字。在支持的情况下，屏幕阅读器将朗读数字而不是视觉标记。

要体验 speak-as 描述符的结果，请使用辅助技术（如 VoiceOver 或其他屏幕阅读器）或查看浏览器开发者工具中的辅助功能面板（如果浏览器支持 speak-as）。

HTML

html
<ul class="list">
  <li>I had one apple</li>
  <li>I ate two bananas</li>
  <li>I devoured three oranges</li>
  <li>I am not hungry for dinner</li>
  <li>But I'll have five scopps of ice cream for desert</li>
</ul>

CSS

css
@counter-style speak-as-example {
  system: fixed;
  symbols:     ;
  suffix: " ";
  speak-as: numbers;
}

.list {
  list-style: speak-as-example;
}

结果

规范

规范
CSS 计数器样式级别 3
# counter-style-speak-as

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅