WCAG 2.2 ガイドライン「3.1.6 発音」Level AAA について
はじめに
WCAG 2.2の「3.1.6 発音」は、文脈において発音がわからないと意味が曖昧になる語句について、その発音を特定する仕組みを提供することを求めています。この基準は、特に多義語や正確な発音が重要な場合に、読者が内容を正しく理解できるようにすることを目的としています。
1. 基準の概要
要件
- 文脈によって発音が不明だと意味が曖昧になる語句に対して、発音を特定する方法を提供します。
- これには、文字のルビ、補足説明、リンクによる発音提供などが含まれます。
2. 実装方法
a. ruby要素を使用してルビを表示
ruby要素を使うことで、語句の上部または横に発音を表示できます。
例: 漢字の読み方を提供
<p>彼は<strong>調査</strong><ruby>調査<rt>ちょうさ</rt></ruby>を進めています。</p>
b. 発音をインラインで表示
語句の直後にカッコ書きや注釈として発音を表示します。
例: 英単語の発音を示す
<p>この単語は <strong>read</strong>（リードまたはレッド）と発音されます。</p>
c. 発音リンクを提供
語句の発音に関連する外部リソースや音声ファイルへのリンクを提供します。
例: 発音の音声ファイルへのリンク
<p>この単語の発音は<a href="audio/pronunciation.mp3" target="_blank">こちら</a>で確認できます。</p>
d. グロッサリーに発音を記載
用語集を作成し、そこに発音を含めます。
例: 用語集に発音を記載
<h2>用語集</h2>
<dl>
<dt>調査</dt>
<dd>「ちょうさ」と読みます。</dd>
</dl>
e. ダイアクリティカルマークを使用
必要に応じて標準的なダイアクリティカルマーク（アクセント記号など）を追加し、発音を示します。
例: フランス語の発音を示す
<p>彼女は「café（カフェ）」でコーヒーを注文しました。</p>
3. よくある失敗例とその改善策
a. 発音が不明確なまま
失敗例
<p>彼は調査を進めています。</p>
問題点
- 「調査」が「ちょうさ」と読むのか「しらべ」と読むのか文脈だけでは判断できない。
改善策
<p>彼は<strong>調査</strong><ruby>調査<rt>ちょうさ</rt></ruby>を進めています。</p>
b. 外来語の発音が不明確
失敗例
<p>この単語は read と書きます。</p>
問題点
- 「リード」または「レッド」のどちらの発音なのか不明。
改善策
<p>この単語は <strong>read</strong>（リードまたはレッド）と発音されます。</p>
4. アクセシビリティのメリット
a. 意味の誤解を防ぐ
- 発音が特定されることで、特に多義語や外来語における誤解を防ぎます。
b. 学習者や非ネイティブスピーカーへの配慮
- 新しい言語を学習中のユーザーや、コンテンツの言語が母語でないユーザーが正確に理解できます。
c. スクリーンリーダーとの互換性
- ルビや発音情報を提供することで、スクリーンリーダーが正確な発音を読み上げることができます。
5. テスト方法
a. 手動テスト
- 文脈で発音が曖昧な語句を特定。
- それらの語句に発音情報が提供されていることを確認。
b. 自動テストツール
- AxeやWAVEなどを使用して、
ruby要素やリンクが正しく設定されているか確認。
まとめ
WCAG 2.2の「3.1.6 発音」は、発音が曖昧な語句に対して適切な発音を提供する仕組みを実装することで、すべてのユーザーがコンテンツを正確に理解できるようにすることを目的としています。
実装ポイント
ruby要素やインラインの説明を活用して発音を明確化する。- グロッサリーや外部リソースへのリンクを提供する。
- ダイアクリティカルマークを適宜使用して正確な発音を示す。
これにより、すべてのユーザーが誤解なくコンテンツを理解し、快適に利用できるウェブ体験を実現します。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。