speak-as
speak-asは、要素のテキストが音声合成でどのように発音されるかを制御するCSSプロパティです。normal、spell-out（1文字ずつ）、digits（数字を1桁ずつ）、literal-punctuation（句読点をそのまま読む）などの値を指定できます。@counter-styleのspeak-asディスクリプタとは異なる機能です。CSS Speechモジュールの一部ですが、ブラウザサポートは非常に限定的です。
概要
speak-asは、要素のテキストが音声合成でどのように発音されるかを制御するCSSプロパティです。normal、spell-out（1文字ずつ）、digits（数字を1桁ずつ）、literal-punctuation（句読点をそのまま読む）などの値を指定できます。@counter-styleのspeak-asディスクリプタとは異なる機能です。CSS Speechモジュールの一部ですが、ブラウザサポートは非常に限定的です。
対応ブラウザ
デスクトップ
Chrome 未対応
Edge 未対応
Safari 11.1+
Firefox 未対応
モバイル
Chrome Android 未対応
Safari iOS 11.3+
Firefox Android 未対応
基本構文
CSS
.phone-number {
speak-as: digits;
}
.code {
speak-as: literal-punctuation;
}実務での使いどころ
-
電話番号の1桁ずつ読み上げ
電話番号やコード番号を、数値として読み上げずに1桁ずつ読み上げさせることで、聞き取りやすさを向上させます。
注意点
- Safari以外のブラウザではサポートされておらず、実用的な音声制御にはWAI-ARIAの使用が推奨されます。
アクセシビリティ
- 音声読み上げの制御には、aria-labelやaria-describedbyなどのWAI-ARIA属性の使用がより確実で推奨されます。