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 になります。
  • 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 プロパティに対する支援技術は非常に限られています。ページの目的を理解するために重要な情報を伝えるためには、このプロパティに依存しないようにしてください。

Let's Talk About Speech CSS | CSS Tricks

公式定義

関連するアット規則@counter-style
初期値auto
計算値指定通り

形式文法

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報