<html>要素にはlang属性が必要です

ルールID: html-has-lang
ルールセット: axe-core 3.3
ユーザーへの影響: 深刻
ガイドライン: WCAG 2.1 (A), WCAG 2.0 (A)

axe DevTools Proでよりアクセシビリティの高いウェブサイトを構築しましょう。

Intelligent Guided Tests™ を使用して、ページコンテンツに関する一連の簡単な質問に答えることで、さらに多くの問題を見つけて修正できます。無料トライアル。クレジットカードは必要ありません。

Compliance Data & Impact

User Impact

Disabilities Affected

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

Standard(s)

  • WCAG 2.1 (A)
  • WCAG 2.0 (A)

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

  • 3.1.1: 必須: Language of Page

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

  • 3.1.1: 必須: Language of Page

修正方法

ドキュメントの第一言語を表す値の lang 属性を html 要素に付与します (例: <html lang="ja">)。

始めの <html> 要素に言語を指定すること、そして属性のスペリングが正しいことを確認してください。例えば、ドキュメントの第一言語が日本語であれば、言語を次のように指定できます:

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

アメリカ英語を意味する "en-US" や カナダのフランス語を意味する "fr-CA" といった方言をコードで示すこともできます。言語と方言コードの一覧は、インターネットで検索できます。

ドキュメント内で言語が切り替わる場合は、次のように指定することができます:

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

右から左に書かれる言語を使用している場合は、必ず dir 属性を用いてそのことを指定します。

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

左から右に書かれる言語を指定したい場合は、dir 属性の値を "ltr" と指定することができます。

なぜ重要なのか

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

スクリーン・リーダーは言語の発音や特徴に応じて、各言語で異なる音声ライブラリーを使用します。スクリーン・リーダーは言語ライブラリーの切り替えを容易にできますが、それはドキュメントが読まれるべき言語とタイミングを指定していた場合のみです。言語が指定されていなければ、スクリーン・リーダーはユーザーの既定の言語でドキュメントを読み上げ、結果的に不自然なアクセントになります！スクリーン・リーダーが誤った言語ライブラリーを使用していると、なにも理解できません。

ルールの説明

HTML document 要素は、有効な lang 属性を含むか、既定言語以外のものを好むマルチリンガルなスクリーン・リーダーのユーザーのために有効な lang コードに対応しなければなりません。

仕組みについて (簡単に言うと)

すべての HTML ドキュメントに lang 属性が存在することを確認します

リソース

Deque University コースのページ (要登録)

GitHub で axe-core に貢献する

その他のリソース

その他リソースもあわせてご参照ください。

axe 3.3 ルールの一覧 を参照する

この情報は役に立ちましたか?

すでにフィードバックをいただきました、ありがとうございます。.

あなたの回答は次のとおりです。

この情報は役に立ちましたか?
フィードバックが提出された日付/時刻: