2021/08/13 時点の英語版に基づき新規翻訳

1 files changed, 113 insertions, 0 deletions

diff --git a/files/ja/web/css/@counter-style/speak-as/index.md b/files/ja/web/css/@counter-style/speak-as/index.md
new file mode 100644
index 0000000000..cb61f51353
--- /dev/null
+++ b/files/ja/web/css/@counter-style/speak-as/index.md
@@ -0,0 +1,113 @@
+---
+title: speak-as
+slug: Web/CSS/@counter-style/speak-as
+tags:
+  - '@counter-style'
+  - アットルール記述子
+  - CSS
+  - CSS 記述子
+  - リファレンス
+browser-compat: css.at-rules.counter-style.speak-as
+translation_of: Web/CSS/@counter-style/speak-as
+---
+{{CSSRef}}
+
+**`speak-as`** 記述子は、与えられた {{cssxref('@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` の有効値は {{cssxref("@counter-style/system", "system")}} 記述子の値に基づいて決定されます。
+
+    - `system` の値が `alphabetic` の場合、 `speak-as` の有効な値は `spell-out` になります。
+    - `system` が `cyclic` の場合、 `speak-as` の有効な値は `bullets` です。
+    - `system` が `extends` の場合、 `speak-as` の値は拡張スタイルで `speak-as: auto` が指定されている場合と同じになります。
+    - 他の場合はすべて、 `auto` を設定すると `speak-as: numbers` を設定するのと同じ効果になります。
+
+- `bullets`
+  - : 順序なしリストの項目を表すために{{Glossary("user agent", "ユーザーエージェント")}}で定義されたフレーズまたはオーディオキューが読み上げられます。
+- `numbers`
+  - : カウンターの数値が、文書の言語で読み上げられます。
+- `words`
+  - : ユーザーエージェントは、通常通りカウンター値を生成し、それを文書の言語の単語として読み上げます。
+- `spell-out`
+  - : ユーザーエージェントは通常通りカウンター表現を生成し、それを 1 文字ずつ読み上げます。ユーザーエージェントが特定のカウンター記号を読み上げる方法を知らない場合、ユーザーエージェントは `speak-as` の値が `numbers` であるかのように読み上げるかもしれません。
+- `<counter-style-name>`
+  - : 別のカウンタースタイルの名前を {{cssxref("&lt;custom-ident&gt;")}} として指定します。もし含まれていれば、カウンターはそのカウンタースタイルで指定された形式で発声されます。これは、 {{cssxref("@counter-style/fallback", "fallback")}} 記述子を指定するのと同じようなものです。指定されたスタイルが存在しない場合、 `speak-as` の既定値は `auto` です。
+
+## アクセシビリティの考慮
+
+`speak-as` プロパティに対する支援技術は非常に限られています。ページの目的を理解するために重要な情報を伝えるためには、このプロパティに依存しないようにしてください。
+
+[Let's Talk About Speech CSS | CSS Tricks](https://css-tricks.com/lets-talk-speech-css/)
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
+
+{{csssyntax}}
+
+## 例
+
+### カウンターの読み上げ方を設定
+
+#### 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;
+}
+```
+
+#### 結果
+
+{{ EmbedLiveSample('Setting_the_spoken_form_for_a_counter') }}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}
+- {{cssxref("symbols()")}}、無名のカウンタースタイルを生成する関数記法