speak-as
speak-as
記述子は、与えられた @counter-style
で構築されたカウンター記号が、どのように話し言葉で表現されるかを指定します。例えば、カウンター記号を数値として話すか、あるいは単にオーディオキューで表現するかを指定することができます。
構文
/* キーワード値 */
speak-as: auto;
speak-as: bullets;
speak-as: numbers;
speak-as: words;
speak-as: spell-out;
/* @counter-style 名の値 */
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
-
ユーザーエージェントは通常通りカウンター表現を生成し、それを 1 文字ずつ読み上げます。ユーザーエージェントが特定のカウンター記号を読み上げる方法を知らない場合、ユーザーエージェントは
speak-as
の値がnumbers
であるかのように読み上げるかもしれません。 <counter-style-name>
-
別のカウンタースタイルの名前を
<custom-ident>
として指定します。もし含まれていれば、カウンターはそのカウンタースタイルで指定された形式で発声されます。これは、fallback
記述子を指定するのと同じようなものです。指定されたスタイルが存在しない場合、speak-as
の既定値はauto
です。
アクセシビリティの考慮
speak-as
プロパティに対する支援技術は非常に限られています。ページの目的を理解するために重要な情報を伝えるためには、このプロパティに依存しないようにしてください。
公式定義
関連するアット規則 | @counter-style |
---|---|
初期値 | auto |
計算値 | 指定通り |
形式文法
auto | bullets | numbers | words | spell-out | <counter-style-name> <counter-style-name> = <custom-ident>
例
カウンターの読み上げ方を設定
HTML
<ul class="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
CSS
@counter-style speak-as-example {
system: fixed;
symbols: ;
suffix: " ";
speak-as: numbers;
}
.list {
list-style: speak-as-example;
}
結果
仕様書
Specification |
---|
CSS Counter Styles Level 3 # counter-style-speak-as |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
list-style
,list-style-image
,list-style-position
symbols()
、無名のカウンタースタイルを生成する関数記法