CSSのspeakプロパティ徹底解説！音声読み上げの制御方法とnone・normal・spell-outの違い

CSSのspeakプロパティとは？

speakプロパティは、テキストを音声（オーラリー）として読み上げるかどうか、また読み上げる場合はどのような方法で行うかを指定するためのCSSプロパティです。スクリーンリーダーなどの音声出力環境において、コンテンツの読み上げ挙動を細かくコントロールしたいときに活用されます。

指定できる値は以下の3つです。

1. none — 音声読み上げを抑制する

この値を指定すると、その要素の音声読み上げが完全に抑制されます。要素はレンダリングに時間を必要とせず、音声出力上は存在しないものとして扱われます。

2. normal — 通常の言語ルールで読み上げる

言語ごとに定められた発音規則（言語依存の発音ルール）に従って、その要素および子要素を読み上げます。通常の文章を読み上げる際に用いられる標準的なモードです。

3. spell-out — 一文字ずつ綴って読み上げる

テキストを一文字ずつ区切って読み上げます。略語やパスワード、コードなど、単語として発音させずに一文字ずつ伝えたいテキストに適しています。

「volume: silent」と「speak: none」の違いに注意

speakプロパティを使う際には、volumeプロパティが「silent」の場合との違いを正しく理解しておくことが重要です。

• volume: silent の場合 — 実際に読み上げられた場合と同じ時間がかかります。要素の前後にあるポーズ（間）も含まれますが、音声そのものは生成されません。
• speak: none の場合 — 時間を一切必要とせず、まったくレンダリングされません。

つまり、「silent」は“無音だが時間は占有する”のに対し、「speak: none」は“存在しないものとして扱われる”という点が大きな違いです。音声読み上げ環境でのタイミングやリズムを設計する際には、この違いを意識して使い分けましょう。