【CSS Modules】speak-asプロパティの使い方
speak-asプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
speak-asプロパティは、ウェブページ上のテキストが合成音声でどのように読み上げられるかを制御するための情報を保持するプロパティです。このプロパティは、主にウェブアクセシビリティを向上させる目的で使用され、視覚に障がいのある方などがスクリーンリーダーを利用する際に、内容がより正確で自然な音声で伝わるように調整します。
具体的には、数字の連続を「一二三」のように桁ごとに読むか「ひゃくにじゅうさん」のようにまとまりとして読むか、略語を「シー・エス・エス」のように一文字ずつ綴るか、あるいは日付や時刻、電話番号などをその形式に合わせた自然な読み上げ方で表現するかなどを指定できます。例えば、speak-as: spell-out;を設定すると、テキストが個々の文字として読み上げられ、略語の意味を明確に伝えたい場合に役立ちます。また、speak-as: digits;を設定すると、数字がそれぞれの桁として読み上げられます。
このプロパティを使うことで、CSSによって指定された要素の内容が、合成音声環境でより意図した通りに解釈され、読み上げられるようになります。これにより、情報が誤って伝えられたり、聞き取りにくくなったりするのを防ぎ、ウェブサイトを利用するすべての人にとって、より理解しやすいユーザー体験を提供することに貢献します。ウェブコンテンツのアクセシビリティを高める上で重要な役割を担うプロパティの一つと言えるでしょう。
公式リファレンス: speak-as
構文(syntax)
1speak-as: normal;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません