speak-as

语法

/* 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)

正式定义

正式语法

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

示例

设置计数器的语音形式

在此示例中，计数器系统是固定的，使用难以理解的符号作为视觉标记。但是，speak-as 描述符用于将列表项标记设置为可访问性树中的数字。如果支持，屏幕阅读器将读出数字而不是视觉标记。

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

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 scoops of ice cream for dessert</li>
</ul>

CSS

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

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

结果

规范

浏览器兼容性

另见

• 其他 @counter-style 描述符：system、symbols、additive-symbols、negative、prefix、suffix、range、pad 和 fallback
• list-style、list-style-image、list-style-position
• symbols()：用于创建匿名计数器样式的功能符号。
• CSS 计数器样式模块
• CSS 列表和计数器模块