CSS3: speak-as プロパティ - 読み上げ方法

■ 概要

項  目説  明
記述形式 セレクタ {speak-as: }
値 の形式 normalspell-outdigits,[ literal-punctuationno-punctuation ]
初 期 値 normal
対応ブラウザー C?+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+
適用可能な要素 すべての要素
継  承 する

■ 解説

speakプロパティ は,読み上げ方法を指定 します。

指定できる値の形式は,以下のとおりです。

説  明
normal 使用言語に依存した発音の規則に従って要素と子要素の読み上げを行います。 (初期値)
spell-out テキストを1文字ずつ分けて読み上げます。
CSS3 で新規の仕様で,speakプロパティの同じ値を別プロパティとして指定する形です。
digits 数字を1桁ずつ切り分けて発音します。 12 は「いち に」,31 は「さん いち」という発音になります。
literal-punctuation 通常は若干の間を空ける形の処理となる句読点,セミコロン,括弧などを声にして読み上げます。
no-punctuation 句読点,セミコロン,括弧などは読み上げず,間を空ける処理もしません。

■ 使用例

HTMLソース
CSS
<head> ~ </head>
<style type="text/css">
<!--
   .spas1 { speak-as: normal; }
   .spas2 { speak-as: spell-out; }
   .spas3 { speak-as: digits; }
   .spas4 { speak-as: literal-punctuation; }
   .spas5 { speak-as: no-punctuation; }
-->
</style>
HTML
<body> ~ </body>
<p class="spas1">標準規則で読み上げます。</p>
<p class="spas2">1文字ずつ読み上げます。</p>
<p class="spas3">数字を分けて読み上げます。</p>
<p class="spas4">句読点なども読み上げます。</p>
<p class="spas5">句読点などは間を空けずに読み上げます。</p>

ブラウザー 表示例

標準規則で読み上げます。

1文字ずつ読み上げます。

数字を分けて読み上げます。

句読点なども読み上げます。

句読点などは間を空けずに読み上げます。

■ 備考

【参考ページ】