langとxml：langの<html>要素は同じ基本言語である必要があります

ルールID: html-xml-lang-mismatch

ルールセット: axe-core 4.10

ユーザーへの影響: 普通

ガイドライン: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), EN 301 549

Start building more accessible experiences

Axe DevTools Pro helps dev teams find and fix up to 80% of accessibility issues while coding. No experience required. Get started with your free trial today.

Start for free

Compliance Data & Impact

User Impact

普通
▼

Minor

Critical

Disabilities Affected

視覚障害
視聴覚障害
認識障害

Standard(s)

WCAG 2.1 (A)
WCAG 2.0 (A)
WCAG 2.2 (A)
EN 301 549

WCAG 達成基準 [WCAG 2.1 (A)]

3.1.1: 必須: Language of Page

WCAG 達成基準 [WCAG 2.0 (A)]

3.1.1: 必須: Language of Page

WCAG 達成基準 [WCAG 2.2 (A)]

3.1.1: 必須: Language of Page

修正方法

lang 属性値を html 要素 (e.g. <html lang="ja">) に追加し、ドキュメントの第一言語を示します。

必要があれば、lang 属性の値を xml:lang 属性の値として html 要素で重複させます。

開始の html 要素に lang 属性値を指定し、値を正しくスペリングすることを忘れないでください。例えば、ドキュメントの第一言語が日本語の場合、次のように言語を指定します:

<html lang="ja">
  <!--ドキュメントの head と body-->
</html>

言語値のコードは、アメリカ英語をイギリス英語と区別する "en-US" やカナダのフランス語をヨーロッパのフランス語と区別する "fr-CA" などのいくつかの方言を含みます。言語の一覧と方言コードは ISO Codes for the Representation of Names of Languages web page で見つけることができます。

ドキュメントが複数言語を含むときは、必要に応じて次のように言語を指定します:

<p>一つの言語のテキスト <span lang="es">別の言語のテキスト</span></p>

右から左へ書かれる言語は、dir 属性を使って指定するようにしてください:

<p lang="ar" dir="rtl">Arabic text here</p>

反対に、左から右に書く言語は dir="ltr" 属性値で指定できます。

なぜ重要なのか

スクリーン・リーダーの設定をする際、ユーザーは既定の言語を設定します。もし web ページの言語が指定されていない場合、スクリーン・リーダーはユーザーが設定した既定の言語がそのページの言語であると見なします。複数の言語で話し、web サイトにアクセスするユーザーにとって複数言語は問題です。既定の言語を指定すること、そしてそれが有効であることはスクリーン・リーダーが正確に動作する上で重要です。

スクリーン・リーダーは言語の発音や特徴に応じて、各言語で異なる音声ライブラリーを使用します。スクリーン・リーダーは言語ライブラリーを容易に切り替えることができますが、それはドキュメントに読み上げられるべき言語が指定されていた場合のみです。言語が指定されていない場合、スクリーン・リーダーはドキュメントをユーザーの既定言語で読み上げ、意味不明な言語をもたらします。スクリーン・リーダーが誤った言語ライブラリーを使用していた場合、あらゆることを理解することが難しくなります。

ルールの説明

HTML ドキュメントは、有効な lang 属性を含むか、既定言語以外のものを好むマルチリンガルなスクリーン・リーダーのユーザーのために有効な lang コードに対応しなければなりません。xml:lang 属性値が html 要素に含まれている場合、lang の値を正確に重複させなければなりません。