聴覚メディア向けCSSプロパティ徹底解説｜音声読み上げを制御する19のプロパティ一覧

文書の聴覚レンダリング（オーラルレンダリング）は、主に視覚に障害のあるユーザー向けに利用される技術です。スクリーンリーダーなどの音声合成ソフトウェアがWebページの内容を読み上げる際、CSSを使って音声の出力方法を細かく制御できます。

聴覚メディアCSSプロパティとは

CSS2で定義された聴覚スタイルシート（Aural Style Sheets）では、音の方向や高さ、読み上げの速さ、声の質感などを指定するための専用プロパティが用意されています。以下に、主要な聴覚メディアCSSプロパティを目的別に整理して紹介します。

1. 音の方向を制御するプロパティ

• azimuth：音声が水平方向のどの位置から聞こえるかを設定します。左右の定位を指定できます。
• elevation：音声が垂直方向のどの高さから聞こえるかを設定します。上・水平・下などの仰角を指定できます。

2. 区切り音と一時停止を制御するプロパティ

• cue-before：要素の内容を読み上げる前に再生する音（合図音）を指定し、他の要素と区切りをつけます。
• cue-after：要素の内容を読み上げた後に再生する音を指定し、他の要素との境界を明確にします。
• cue：cue-before と cue-after をまとめて設定できるショートハンドプロパティです。
• pause-before：要素の内容を読み上げる前に挿入する一時停止（ポーズ）を指定します。
• pause-after：要素の内容を読み上げた後に挿入する一時停止を指定します。
• pause：pause-before と pause-after をまとめて設定できるショートハンドプロパティです。

3. 声の質感を制御するプロパティ

• pitch：話し声の平均的なピッチ（周波数）を指定します。
• pitch-range：平均ピッチに対する変化の幅を指定します。値が大きいほど抑揚のある声になります。
• richness：話し声の豊かさ（明るさ・響き）を指定します。
• stress：声の抑揚曲線における「局所的なピーク」の高さを指定します。
• voice-family：使用する声のファミリー名を優先順位付きのリストで指定します。font-family の音声版に相当します。
• volume：声の中央音量（メディアンボリューム）を指定します。

4. 読み上げの方法を制御するプロパティ

• speak：テキストを音声として出力するかどうか、また出力する場合の方式（通常・単語ごと・文字ごとなど）を指定します。
• speak-numeral：数字の読み上げ方（連続して読むか、個別に読むかなど）を制御します。
• speak-punctuation：句読点（ピリオドやカンマなど）を読み上げるか、無音で表現するかを指定します。
• speech-rate：話す速度（読み上げレート）を指定します。

5. 背景音を制御するプロパティ

• play-during：要素の内容が読み上げられている間、背景として再生する音（効果音や環境音など）を指定します。

注意点：ブラウザ対応について

これらの聴覚メディアプロパティはCSS2の勧告時に定義されましたが、現在では主要ブラウザでの実装は限定的です。後継仕様である「CSS Speech Module」では voice-volume や voice-rate など、より洗練されたプロパティが提案されています。実際のアクセシビリティ対応では、ARIA属性やセマンティックなHTML構造の活用と組み合わせることが推奨されます。