WCAG 2.2 ガイドライン「3.1.1 ページの言語」Level A について
はじめに
WCAG 2.2の「3.1.1 ページの言語」は、各ウェブページのデフォルトの言語がプログラム的に判別可能であることを求めています。この基準は、スクリーンリーダーなどの支援技術が適切に動作し、ユーザーがページの内容を正確に理解できるようにするために重要です。
1. 基準の概要
要件
ウェブページ全体のデフォルトの言語が、HTMLやPDFなどのドキュメントで明示的に設定されている必要があります。
例
- ページ全体が日本語で書かれている場合、HTMLの
lang属性を使用して日本語を指定します。
<html lang="ja">
2. 実装方法
a. HTMLで言語を設定する
lang属性を使用してページの言語を指定します。lang属性は、HTMLのルート要素（<html>）に記述します。
例: ページが日本語の場合
<!DOCTYPE html>
<html lang="ja">
<head>
<title>ページタイトル</title>
</head>
<body>
<h1>こんにちは、世界！</h1>
</body>
</html>
- **
lang="ja"**により、このページのデフォルトの言語が日本語であることを支援技術に伝えます。
b. PDFで言語を設定する
PDFの場合は、/Langエントリを使用してデフォルトの言語を指定します。Adobe AcrobatなどのPDF編集ソフトで設定可能です。
c. HTTPヘッダーで言語を設定する
ウェブサーバーでHTTPヘッダーを設定することで、デフォルトの言語を指定する方法もあります。
例: 日本語を指定する場合
Content-Language: ja
- この方法は、クライアント側で利用される可能性のある複数の技術に対応するために役立ちます。
3. よくある失敗例とその改善策
a. 言語が指定されていない
失敗例
<!DOCTYPE html>
<html>
<head>
<title>ページタイトル</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
問題点
- デフォルトの言語が設定されていないため、スクリーンリーダーが適切に読み上げられない可能性があります。
改善策
<html lang="en">
b. 言語の設定が誤っている
失敗例
<html lang="fr">
問題点
- ページ内容が英語なのに、
lang="fr"（フランス語）が指定されている。
改善策
<html lang="en">
4. アクセシビリティのメリット
a. スクリーンリーダーの正確な読み上げ
- 言語情報が正確であることで、スクリーンリーダーが正しい発音でコンテンツを読み上げます。
b. 検索エンジン最適化（SEO）
- ページの言語情報が明示されていると、検索エンジンが正確に内容をインデックス化できます。
c. ユーザーエクスペリエンスの向上
- ユーザーがページを正確に理解しやすくなります。
5. テスト方法
a. 手動テスト
- ソースコードを確認し、
lang属性が正しく設定されているか確認。 - ページの内容に対応した言語が指定されていることをチェック。
b. 自動テストツール
- AxeやWAVEなどのアクセシビリティチェックツールを使用して、
lang属性の設定を確認。
まとめ
WCAG 2.2の「3.1.1 ページの言語」は、ウェブページのデフォルトの言語をプログラム的に判別可能にすることで、すべてのユーザーが正確にコンテンツを理解できるようにすることを目的としています。
実装ポイント
- HTMLのルート要素に
lang属性を設定する。 - PDFやHTTPヘッダーでも言語設定を適切に行う。
- ページの内容と一致した言語を設定する。
これにより、支援技術の正確な動作を促進し、すべてのユーザーにとって使いやすいウェブコンテンツを実現できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。