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 列表和計數器模組