発音サポートとは、固有名詞や専門用語などの読み方を、テキストに加えて音声でも確かめられるようにする配慮です。
スクリーンリーダーの読み上げだけでは意図した発音が伝わりにくい場合、<audio>要素で短い音声を添えると、利用者が必要なときに読み方を確認できます。
ただし、音声だけに情報を任せず、対象の単語や説明を画面上のテキストにも残すことが前提です。
発音サポートが役立つ場面
すべての文章を音声に置き換えるのではなく、読み方の確認が理解を助ける箇所に絞って使います。
- 固有名詞：人名、地名、製品名など、読み方を判断しにくい言葉。
- 専門用語や難読語：文字だけでは発音を確かめにくい言葉。
- 多言語の単語：言語ごとの自然な発音を補足したい言葉。
音声を添える目的は、スクリーンリーダーの機能を置き換えることではありません。
テキストを読める状態を保ったうえで、読み方を確かめる手段を一つ増やします。
audio要素で音声を提供する
<audio>要素にcontrols属性を付けると、ブラウザ標準の再生操作を表示できます。
次の例では、用語の直後に発音を確認するための音声を配置しています。
<p>Schrödingerの発音を確認できます。</p>
<audio controls>
<source src="audio/schrodinger.mp3" type="audio/mpeg">
<a href="audio/schrodinger.mp3">音声ファイルを開いて発音を確認する</a>
</audio>controlsがあるため、利用者は必要なときに再生などの基本操作を行えます。
<audio>要素に対応していない環境では、要素内のリンクが音声ファイルを開くための代替手段になります。
独自の発音ボタンを用意する場合
標準の再生操作ではなく独自のボタンを用意する場合は、どの言葉の発音を再生するのかが分かる名前を付けます。
例えば、「発音を聞く」だけでは対象が曖昧になるページでは、「IUPACの発音を再生」のように目的を具体化します。
表示テキストだけで目的が十分に伝わらないときは、aria-labelでも同じ内容を説明します。
利用者が再生を選べる設計にする
音声は自動再生せず、利用者の操作で始まるようにします。
突然の再生は驚きや混乱につながる場合があるためです。
| 確認する点 | 実装の考え方 |
|---|---|
| 再生操作 | controlsを付け、利用者が再生を始められるようにする。 |
| 自動再生 | ページを開いただけで音声が流れる設定を避ける。 |
| テキストによる説明 | 対象の単語や説明を画面上にも残し、音声だけに情報を任せない。 |
| 代替手段 | 音声を再生できない環境でも内容を確認できるよう、説明や音声ファイルへのリンクを用意する。 |
| ボタンの名前 | どの言葉の発音を再生する操作なのかを具体的に示す。 |
実装前後の確認手順
- 読み方の補足が必要な固有名詞、専門用語、難読語を選びます。
- 対象の言葉をテキストで示し、その近くに発音用の音声を配置します。
controlsを付け、音声が自動再生されないことを確認します。- 音声を再生できない場合でも、テキストや代替リンクから内容を確認できるようにします。
- ブラウザとスクリーンリーダーで、説明と再生操作が分かりやすいかを確かめます。
関連するアクセシビリティ対応
発音用の短い音声に限らず、音声や動画全体の代替手段を検討する場合は、音声と動画コンテンツのアクセシビリティ実践ガイドも参考になります。
発音サポートを実装するときの要点
<audio>要素による発音サポートは、固有名詞や専門用語の読み方を確認するための補助です。
controlsを使い、自動再生を避け、テキストと代替リンクを残すことで、音声を利用できる人にも利用できない人にも内容が伝わります。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティウィジェットツールを提供しています。
アクセシビリティ向上にご興味がある方は、サービスの詳細をご覧ください。