speak-as

可用性有限

此特性不是基線特性,因為它在一些最廣泛使用的瀏覽器中不起作用。

實驗性: 這是一項實驗性技術
在生產中使用此技術之前,請仔細檢查瀏覽器相容性表格

speak-as CSS 屬性用於定義 HTML 內容的朗讀方式。一個到三個列舉關鍵詞決定了元素和文字透過聽覺技術(如螢幕閱讀器和數字助手)渲染的方式。

此屬性適用於所有內容,包括偽元素,但透過定義了 speak-as 描述符的 @counter-style 構建的 ::marker 偽元素除外,後者優先於任何繼承的 speak-as 屬性值。

語法

css
/* single value syntax */
speak-as: normal;
speak-as: spell-out;
speak-as: literal-punctuation;
speak-as: digits;
speak-as: no-punctuation;

/* multiple value syntax */
speak-as: spell-out literal-punctuation;
speak-as: spell-out no-punctuation;
speak-as: digits literal-punctuation;
speak-as: digits no-punctuation;
speak-as: spell-out digits literal-punctuation;
speak-as: spell-out digits no-punctuation;

normal

正常的發音規則,標點符號用停頓代替。例如,“Hello, world!”將發音為“Hello(停頓)world(停頓)”。這是預設值。

spell-out

內容逐字拼讀。例如,“role”將發音為“r”“o”“l”“e”。

literal-punctuation

標點符號按字面意思拼讀。例如,“Hello, world!”將發音為“Hello 逗號 world 感嘆號。”

digits

數字按單個數字發音。例如,“31”將發音為“三 一”。

no-punctuation

內容正常發音,不帶任何標點符號。例如,“Hello, world!”將發音為“Hello”“world”。

注意:speak-as 屬性的支援有限,並且在不同的輔助技術(如螢幕閱讀器或語音合成器)中實現不一致。為確保任何依賴發音的關鍵資訊對廣泛受眾來說仍然使用者友好和可訪問,請不要僅僅依靠此 CSS 屬性來定義此資訊內容的聽覺呈現方式。

正式定義

初始值auto
應用於所有元素
繼承性
計算值指定值
動畫型別離散

正式語法

speak-as = 
normal |
spell-out || digits || [ literal-punctuation | no-punctuation ]

示例

HTML

html
<p class="normal">Hello, world! I'm 25.</p>
<p class="spell-out">Hello, world! I'm 25.</p>
<p class="literal-punctuation">Hello, world! I'm 25.</p>
<p class="no-punctuation">Hello, world! I'm 25.</p>
<p class="digits">Hello, world! I'm 25.</p>
<p class="multi">Hello, world! I'm 25.</p>

CSS

css
.normal {
  speak-as: normal;
}

.spell-out {
  speak-as: spell-out;
}

.literal-punctuation {
  speak-as: literal-punctuation;
}

.no-punctuation {
  speak-as: no-punctuation;
}

.digits {
  speak-as: digits;
}
.multi {
  speak-as: literal-punctuation digits;
}

規範

規範
CSS Speech Module Level 1
# speaking-props-speak-as

瀏覽器相容性

另見