※パワーダイレクトは対象外です
適合レベル
A
※各レベルについては適合レベルとはをご覧ください
概要
ページ全体の言語を<html>タグのlang属性で正しく指定する。ページ内で言語が変わる場合は、その部分にもlang属性を設定する。
具体的な実装方法
3.1.1 A
1. ⭕️良い例
HTMLの<html>要素にlang属性を追加し、そのページの主要な言語を示す言語コードを指定します。
ポイント:
- 言語コードは、ISO 639-1の2文字コードを使用することが一般的です（例: 日本語は
ja、英語はen）。 <html>タグに指定することで、ページ全体にデフォルトの言語が適用されます。
実装例 (HTML):
<!DOCTYPE html>
<html lang="ja">
<head>
<title>日本語のウェブページ</title>
</head>
<body>
<p>このページは日本語で書かれています。</p>
</body>
</html>2. ❌悪い例
lang属性がない:
<html>タグにlang属性が指定されていない。
不適切な言語コード:
lang="jp"のように、正しくない言語コードを指定している（日本語はja）。
http-equiv属性による指定:
<meta http-equiv="Content-Language" content="ja">は、この達成基準を満たす方法としては不十分です。lang属性を使用する必要があります。
なぜ問題なのか:
これらの実装では、支援技術がページの言語を確実に判断できず、結果として読み上げがおかしくなるなど、アクセシビリティ上の問題を引き起こします。
改善策:
- 必ず
<html>タグにlang属性を追加します。 - IANAの言語サプタグレジストリで定義されている正しい言語コードを使用します。
3. プラットフォーム別の実装
Webページでは、HTMLの<html>要素にlang属性を指定することで達成します。
4. 特殊なケースへの対応
多言語サイト
- 複数の言語で提供されているサイトの場合でも、各ページのコンテンツの主要な言語を
lang属性で指定する必要があります。例えば、英語版のページには<html lang="en">を指定します。ページ内に他の言語が混在する場合は、達成基準 3.1.2 部分的な言語の識別 に従います。
3.1.2 AA
1. ⭕️良い例
ページの主要言語と異なる言語で書かれているテキストを、<span>や<blockquote>などの適切なHTML要素で囲み、その要素にlang属性で言語コードを指定します。
ポイント:
- 単語単位、フレーズ単位で言語が変わる箇所を正確にマークアップします。
- ページの主要言語は
<html>タグで指定されていることが前提です（達成基準 3.1.1）。
実装例 (HTML):
<!DOCTYPE html>
<html lang="ja">
<head>
<title>多言語が混在するページ</title>
</head>
<body>
<p>アクセシビリティは英語で <span lang="en">accessibility</span> と言います。</p>
<p>シェイクスピアは次のように述べました。</p>
<blockquote lang="en">
<p>To be, or not to be, that is the question.</p>
</blockquote>
</body>
</html>2. ❌悪い例
言語の指定がない
- 日本語のページに含まれる英単語や英文に
lang属性が指定されていない。
不適切な要素での囲み
- 意味的に不適切な要素（例: 見た目のためだけに
<b>タグを使う）で言語を指定している。
画像化されたテキスト
- 外来語の部分が画像になっており、代替テキストにも言語情報がない。
なぜ問題なのか:
これらの実装では、支援技術が言語の切り替えを認識できず、不自然な読み上げの原因となります。
改善策:
- 言語が変わる箇所は、意味的に適切な要素（
<span>,<em>,<blockquote>,<p>など）で囲み、lang属性を付与します。
3. プラットフォーム別の実装
Webページでは、HTMLの各要素にlang属性を指定することで達成します。
4. 特殊なケースへの対応
以下の場合は、言語を個別に指定する必要はありません。
- 固有名詞: "Toyota" や "Sony" のような企業名や人名。
- 専門用語: 主要言語の文脈で一般的に使われるようになった技術用語（例: "computer"）。
- 辞書に載るほど定着した外来語: 日本語における「コンピューター」や「アクセシビリティ」のように、その言語の一部となっている単語。
要するに、その単語が主要言語の話者にとって外来語として認識され、発音が明らかに異なる場合にlang属性の指定が有効になります。
確認観点
3.1.1 A
1. 定量的な基準の担保
自動チェックツールでの確認:
- LighthouseやAxeなどのツールは、
<html>要素にlang属性が存在し、その値が有効であるかを自動でチェックできます。
チェックリストの達成度:
2. 定性的な基準の担保
3.1.1 A
レビュー:
- コードレビューにおいて、全てのHTMLファイルで
<html>タグに適切なlang属性が設定されていることを確認します。
専門家による監査:
- アクセシビリティ専門家が、ページの言語設定がコンテンツの内容と一致しているか、また支援技術で正しく解釈されるかを確認します。
3.1.2 AA
1. 定量的な基準の担保
自動チェックツールでの確認
- この達成基準を完全に自動で検出することは困難です。ツールは
lang属性の存在をチェックできますが、それが文脈上適切かどうかを判断することはできません。
チェックリストの達成度:
2. 定性的な基準の担保
レビュー
- コードレビューとコンテンツレビューを併せて行い、外国語の引用や単語がないかを確認し、
lang属性が適切に使用されているかを目視でチェックします。
専門家による監査
- アクセシビリティ専門家が、スクリーンリーダーを使って実際にページを読み上げさせ、言語が混在する箇所で発音が自然に切り替わるかを確認します。
- どの単語までをマークアップすべきか、文脈に応じた判断を行います。