speak-as
実験的: これは実験的な技術です。
本番環境で使用する前に、ブラウザーの互換性一覧表を注意深く確認してください。
`speak-as` CSS プロパティは、HTML コンテンツがどのように発話されるかを定義するために使用されます。1 つから 3 つの列挙されたキーワードは、スクリーンリーダーやデジタルアシスタントなどの音声技術によって、要素やテキストがどのようにレンダリングされるかを決定します。
このプロパティは、擬似要素を含むすべてのコンテンツに適用されますが、定義された `speak-as` 記述子を持つ `@counter-style` を介して構築された `::marker` 擬似要素は例外です。これは、継承された `speak-as` プロパティ値よりも優先されます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
speak-as 実験的 | | | | 11.1 | | 11.3 |
digits 実験的 | | | | 11.1 | | 11.3 |
literal-punctuation 実験的 | | | | 11.1 | | 11.3 |
no-punctuation 実験的 | | | | 11.1 | | 11.3 |
normal 実験的 | | | | 11.1 | | 11.3 |
spell-out 実験的 | | | | 11.1 | | 11.3 |
基本構文
CSS
.phone-number {
speak-as: digits;
}
.code {
speak-as: literal-punctuation;
}ライブデモ
実務での使いどころ
-
電話番号の1桁ずつ読み上げ
電話番号やコード番号を、数値として読み上げずに1桁ずつ読み上げさせることで、聞き取りやすさを向上させます。
注意点
- Safari以外のブラウザではサポートされておらず、実用的な音声制御にはWAI-ARIAの使用が推奨されます。
アクセシビリティ
- 音声読み上げの制御には、aria-labelやaria-describedbyなどのWAI-ARIA属性の使用がより確実で推奨されます。