CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのspeak-numeralプロパティとは？数字の読み上げ方を制御する方法

speak-numeralプロパティの概要

CSSのspeak-numeralプロパティは、スクリーンリーダーなどの音声読み上げ機能において、数字（数値）をどのように読み上げるかを制御するためのプロパティです。視覚に障害のあるユーザーへのアクセシビリティ向上を目的とした音声スタイルシート（Aural CSS）の一部として定義されています。

指定できる値

speak-numeralプロパティには、主に以下の2つの値を指定できます。

digits（ディジット）

数字を1桁ずつ個別に読み上げます。例えば「237」という数値は、「2・3・7（に・さん・なな）」のように、各桁の数字として順番に読み上げられます。

continuous（連続）

数字をひとつの数値としてまとめて読み上げます。例えば「237」であれば、「237（にひゃくさんじゅうなな）」のように、自然な数値表現として読み上げられます。なお、この読み上げ表現は使用している言語やロケールによって異なります。

使い分けのポイント

電話番号や郵便番号など、桁ごとの情報が重要な場合はdigitsが適しています。一方、金額や数量など、数値全体の意味が重要な場合はcontinuousを選ぶと、より自然で理解しやすい読み上げになります。

記述例

.phone-number {
  speak-numeral: digits;
}

.price {
  speak-numeral: continuous;
}

このように、要素の役割に応じて値を使い分けることで、音声読み上げ環境でもユーザーにとって分かりやすいコンテンツを提供できます。

  1. CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法

    writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し

  2. CSSのpointer-eventsプロパティとは？使い方をコード例で解説

    pointer-eventsプロパティとは CSSのpointer-eventsプロパティは、要素に対してポインターイベントが発生した際に、その要素がアクション（反応）を行うかどうかを指定するためのプロパティです。ポインターイベントは、マウスのクリック、タッチ操作、スタイラスペンなど、さまざまな入力デバイスによって発生します。 このプロパティを活用すると、リンクやボタンへのクリック・ホバー操作を無効化したり、逆に有効化したりできます。主な値は以下のとおりです。 auto：デフォルトの動作。要素が通常どおりポインターイベントに反応します。 none：要素がポインターイベントに反応しなくなります