Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

speak-as

speak-as は CSS のプロパティで、HTML コンテンツの読み上げ方法を定義するために使用されます。1 つから 3 つまでの列挙型キーワードによって、スクリーンリーダーやデジタルアシスタントなどの音声技術による要素やテキストのレンダリング方法が決定されます。

このプロパティは、擬似要素を含むすべてのコンテンツに適用されますが、@counter-style にspeak-as 記述子を定義して構築された ::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
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.phone-number {
  speak-as: digits;
}
.code {
  speak-as: literal-punctuation;
}

ライブデモ

digits（桁読み）

CSS の digits（桁読み） パターンです。

プレビュー全画面表示

literal-punctuation

CSS の literal-punctuation パターンです。

プレビュー全画面表示

no-punctuation

CSS の no-punctuation パターンです。

プレビュー全画面表示

実務での使いどころ

  • 電話番号の1桁ずつ読み上げ

    電話番号やコード番号を、数値として読み上げずに1桁ずつ読み上げさせることで、聞き取りやすさを向上させます。

注意点

  • Safari以外のブラウザではサポートされておらず、実用的な音声制御にはWAI-ARIAの使用が推奨されます。

アクセシビリティ

  • 音声読み上げの制御には、aria-labelやaria-describedbyなどのWAI-ARIA属性の使用がより確実で推奨されます。

参考リンク