CSSのvoice-balanceプロパティとは？音声メディアで左右のバランスを設定する方法

CSSのvoice-balanceプロパティとは

CSSのvoice-balanceプロパティは、音声メディア（スピーチメディア）向けのプロパティの一つで、スクリーンリーダーなどの音声読み上げ時に、声が左・中央・右のどの方向から聞こえるようにするかを設定できます。

このプロパティを活用することで、視覚に頼らないユーザー体験の向上や、立体音響的な読み上げ表現の実現が可能になります。

voice-balanceの構文

音声のバランスを左・中央・右に設定するための基本的な構文は以下のとおりです。

voice-balance: left | center | right;

それぞれの値の意味は次のとおりです。

• left：音声を左側から聞こえるようにします（-100deg相当）
• center：音声を中央から聞こえるようにします（0deg相当）
• right：音声を右側から聞こえるようにします（100deg相当）

なお、数値（-100〜100の角度）を指定することも可能で、より細かいバランス調整に対応できます。

voice-balanceの使用例

以下は、voice-balanceプロパティを実装した具体的なコード例です。

p {
    voice-balance: right;
}

この例では、<p>要素の内容を読み上げる際に、音声が右側から聞こえるように設定しています。

対応ブラウザと注意点

voice-balanceプロパティはCSS Speech Moduleで定義されていますが、現時点では主要ブラウザでのサポートが限られています。実際に使用する場合は、対応状況を確認したうえで、フォールバックのスタイルを用意しておくことをおすすめします。