概要

speak-asは、CSSでスクリーンリーダーがテキストを読み上げる際の発話方法をカスタマイズするためのプロパティです。このプロパティを使用すると、アクセシビリティを向上させるためにテキストの読み上げ方を調整できます。例えば、数字を「ひとつずつ」読み上げる、文字を一文字ずつ読むなど、視覚障害者のユーザーにとってわかりやすい発話スタイルを実現できます。

speak-asの使い方

speak-asプロパティは、音声出力においてテキストがどのように発話されるかを制御します。これにより、数値の読み上げ方やテキストの発音スタイルを指定することが可能です。適切な設定を行うことで、アクセシビリティの向上に寄与します。

基本的な構文

.speak-as {
  speak-as: <値>;
}

指定できる値

  • normal: デフォルトの読み上げ方法を使用します。
  • spell-out: テキストを1文字ずつ読み上げます（例: CSS → C, S, S）。
  • digits: 数字を一桁ずつ読み上げます（例: 123 → 1, 2, 3）。
  • literal: 数字や文字を通常の文章として読み上げます（例: 123 → 一二三）。
  • numeric: 数字を数値として読み上げます（例: 123 → 百二十三）。

使用例

数字を一桁ずつ読み上げる

以下の例では、speak-asを使用して、スクリーンリーダーが数字を一桁ずつ読み上げるように設定します。電話番号やパスコードなどの読み上げに適しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>speak-asのデモ</title>
<style>
.speak-digits {
  speak-as: digits; /* 数字を一桁ずつ読み上げ */
}
</style>
</head>
<body>
<h2>speak-as: digits を使用した読み上げ</h2>
<p class="speak-digits">123456</p>
</body>
</html>

このコードをスクリーンリーダーで実行すると、数字が「1, 2, 3, 4, 5, 6」と一桁ずつ読み上げられます。

文字を一文字ずつ読み上げる

次の例では、speak-as: spell-outを使って、スクリーンリーダーがテキストを一文字ずつ読み上げるように設定します。略語や頭文字の説明に適しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>speak-asのデモ - 一文字ずつ読み上げ</title>
<style>
.speak-spell {
  speak-as: spell-out; /* 文字を一文字ずつ読み上げ */
}
</style>
</head>
<body>
<h2>speak-as: spell-out を使用した読み上げ</h2>
<p class="speak-spell">`CSS`</p>
</body>
</html>

この例では、「C, S, S」と一文字ずつ発話されるようになります。

数値として読み上げる

numericオプションを使うと、スクリーンリーダーは数字を数値として読み上げます。例えば、「123」を「百二十三」と発話します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>speak-asのデモ - 数値として読み上げ</title>
<style>
.speak-numeric {
  speak-as: numeric; /* 数値として読み上げ */
}
</style>
</head>
<body>
<h2>speak-as: numeric を使用した読み上げ</h2>
<p class="speak-numeric">123</p>
</body>
</html>

この設定により、「123」が「百二十三」と読み上げられます。

ブラウザ対応

speak-asは比較的新しいプロパティであり、現在もサポート状況が完全ではありません。特にスクリーンリーダーの動作に依存するため、環境によって挙動が異なる場合があります。

  • Chrome: 対応予定（試験的機能）
  • Firefox: 一部対応
  • Safari: 未対応
  • Edge: 対応予定（試験的機能） 実装する際には、必ずスクリーンリーダーを使用して期待通りに動作するか確認する必要があります。

使用する際の注意点

  1. スクリーンリーダーの依存
    speak-asはブラウザの機能だけでなく、スクリーンリーダーの対応状況に依存します。特定のスクリーンリーダーでは対応していなかったり、設定が反映されなかったりすることがあるため、実際に使用するデバイスやソフトウェアでテストすることが重要です。
  2. アクセシビリティの効果確認
    適切に設定しないと、意図しない読み上げが行われ、かえって混乱を招く可能性があります。特に重要な情報やユーザーにとって理解が必要な部分は、十分なテストと調整を行いましょう。
  3. フォールバックの用意
    speak-asが期待通りに機能しない場合のフォールバックを考慮し、他のアクセシビリティ対応も同時に行うことを推奨します。視覚的なヒントや追加説明をテキストで提供することも効果的です。

まとめ

speak-asプロパティを使用することで、スクリーンリーダーの読み上げ方を細かく制御し、アクセシビリティを高めることができます。特に数字や略語の読み方を調整する際に役立ちますが、スクリーンリーダーの対応状況を確認し、実際に動作をテストすることが重要です。ユーザーのニーズに合わせた音声出力を実現し、アクセシビリティの高いWebサイトを構築しましょう。

参照:

speak-as（`CSS`） - MDN Web Docs