WCAG 2.2 ガイドライン「3.1.2 コンテンツ部分の言語」Level AA について
はじめに
WCAG 2.2の「3.1.2 コンテンツ部分の言語」は、コンテンツ内の各段落やフレーズの言語がプログラム的に判別可能であることを求めています。この基準は、スクリーンリーダーなどの支援技術がコンテンツを適切に解釈し、正確に読み上げるために重要です。
1. 基準の概要
要件
- コンテンツ内の特定の段落やフレーズがページ全体のデフォルト言語と異なる場合、その言語をプログラム的に指定する必要があります。
- 固有名詞、技術用語、曖昧な言語の単語、または周囲の言語に馴染んだ外来語については、言語指定の対象外とします。
例
ページが日本語で書かれているが、一部英語が含まれている場合、英語部分に言語を指定します：
<p>このページのタイトルは <span lang="en">Web Accessibility Guidelines</span> です。</p>
2. 実装方法
a. HTMLで言語を指定
HTMLでは、lang属性を使用してフレーズや段落の言語を指定します。
例: 英語を指定
<p>私たちのウェブサイトでは、<span lang="en">Accessibility</span> を重視しています。</p>
- **
lang="en"**により、スクリーンリーダーが「Accessibility」を英語として認識し、適切に発音します。
b. PDFで言語を指定
PDFでは、Langエントリを使用して特定の段落やフレーズの言語を指定します。Adobe Acrobatなどのツールを使って設定できます。
c. CSSとの組み合わせ
言語指定された部分にスタイルを適用する場合、CSSと組み合わせて使用できます。
例: フランス語のテキストにスタイルを適用
HTML
<p>彼の有名な言葉は、<span lang="fr">Liberté, égalité, fraternité</span> でした。</p>
CSS
[lang="fr"] {
font-style: italic;
}
3. よくある失敗例とその改善策
a. 言語指定を忘れる
失敗例
<p>彼のスローガンは "Yes we can" でした。</p>
問題点
- 英語部分が日本語として認識され、誤って読み上げられる可能性がある。
改善策
<p>彼のスローガンは <span lang="en">"Yes we can"</span> でした。</p>
b. 言語指定が誤っている
失敗例
<p>彼のスローガンは <span lang="de">"Yes we can"</span> でした。</p>
問題点
- 実際には英語であるのに、ドイツ語として指定されているため、正確に読み上げられない。
改善策
<p>彼のスローガンは <span lang="en">"Yes we can"</span> でした。</p>
4. アクセシビリティのメリット
a. 正確な発音
- スクリーンリーダーが適切な言語で読み上げるため、すべてのユーザーに正確な情報が伝わります。
b. 学習や多言語対応の支援
- 多言語対応のコンテンツが明確になることで、学習者や異なる言語を話すユーザーにとって使いやすいコンテンツになります。
c. 包括的なデザイン
- さまざまな言語を話すユーザーへの対応を強化し、国際的なユーザー体験を向上させます。
5. テスト方法
a. 手動テスト
- 各フレーズや段落の言語が正しく指定されているかソースコードを確認。
- スクリーンリーダーを使用して、指定された言語で正確に読み上げられるかを確認。
b. 自動テストツール
- AxeやWAVEを使用して、
lang属性が適切に設定されているか確認。
まとめ
WCAG 2.2の「3.1.2 コンテンツ部分の言語」は、コンテンツ内の言語が正確に指定されることで、支援技術が正確に動作し、すべてのユーザーに情報が伝わることを目的としています。
実装ポイント
- デフォルト言語と異なる部分に
lang属性を使用する。 - 言語指定を正確に設定し、誤解を防ぐ。
- PDFでも適切な言語指定を行う。
これにより、より多くのユーザーが正確にコンテンツを理解し、快適な体験を得られるようになります。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。