speak-as

speak-as 記述子は、与えられた @counter-style で構築されたカウンター記号が、どのように話し言葉で表現されるかを指定します。例えば、カウンター記号を数値として話すか、あるいは単にオーディオキューで表現するかを指定することができます。

構文

css
/* キーワード値 */
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 になります。
  • systemcyclic の場合、 speak-as の有効な値は bullets です。
  • systemextends の場合、 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 プロパティに対する支援技術は非常に限られています。ページの目的を理解するために重要な情報を伝えるためには、このプロパティに依存しないようにしてください。

Let's Talk About Speech CSS | CSS Tricks

公式定義

形式文法

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

<counter-style-name> = <custom-ident>

カウンターの読み上げ方を設定

HTML

html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

CSS

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
speak-as

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

関連情報