LEARN BY EXAMPLE
3.1.1 ページの言語 レベル A
ページの基本となる言語を、読み上げなどのソフトに伝える。
概要
ページの基本となる言語を、ソフトが取得できる形で指定します。ここでいう言語は日本語や英語など、人が情報を伝えるために使う言語です。
同じ日本語の案内に、ページの言語情報を加える
利用者が困る例 ページの言語が未指定
日本語の発音規則を選ぶ手がかりがない。
利用環境によっては別の言語の規則で読まれ、内容を理解しにくくなります。
改善した例 基本となる言語を日本語と指定
写真教室のご案内
初めての方も参加できます。
ソフトに伝える指定
<html lang="ja">jaは日本語を表す
日本語の発音規則を選ぶための情報がある。
見た目が同じでも、ソフトがページの言語を取得できます。
達成できないと起こる問題の例
日本語で書かれた写真教室の案内を、スクリーンリーダーで読みます。ページの言語が指定されていないため、ソフトには日本語の発音規則を選ぶ手がかりがありません。
利用環境によっては日本語の文章が別の言語の規則で読み上げられ、内容を理解しにくくなります。見た目が日本語であることだけでは、ソフトが言語情報を取得できるとは限りません。
達成するための改善例
同じ案内ページのhtml要素に、lang="ja"を指定します。これはこのページの基本となる言語が日本語であることをソフトに伝える指定です。
読み上げソフトはその情報を使って日本語の発音規則を選べます。ブラウザーが文字や書体を表示する際にも役立ちます。利用者が文章を理解するために必要な言語情報を提供します。
確認のポイント
- ページの主な言語が何かを確認しましたか。
- 各ページに、その言語をソフトが取得できる指定がありますか。
- HTMLの場合、html要素のlang属性に、実際の言語に合う有効な値がありますか。
- 日本語版から英語版へ切り替えたページでも、そのページの言語を指定していますか。
条件と補足
人が使う言語を指定する
日本語・英語などの「自然言語」が対象です。JavaScriptなどのプログラミング言語や、文字を保存する方式であるUTF-8の指定とは別です。
HTMLでは、ページ全体を囲むhtml要素のlang属性を使う方法があります。日本語はja、英語はenなど、言語を表す値を設定します。属性が存在するだけでなく、値が有効で、実際の言語と合うことを確認します。
複数の言語があるページ
ページの基本となる言語を「既定の言語」といいます。複数の言語を使う場合は、最も多く使う言語を指定します。複数の言語が同じ割合なら、Understandingでは最初に使う言語を選ぶよう説明しています。
既定の言語と異なる一節や語句の指定は、レベルAAの3.1.2「一部分の言語」で扱います。レベルAを目指す多言語サイトでも、Understandingは3.1.2への対応を強く推奨しています。この推奨は3.1.1のレベルを変えるものではありません。
指定と実際の読み上げを確認する
言語の指定は対応する発音規則を選ぶための情報です。実際の発音や切替は、使うソフト、音声、設定によって変わります。読み上げ結果と、ページに指定した言語情報の両方を確認します。
参照資料
- WCAG 2.2 本体：3.1.1 Language of Page（要件）
- WAIC：3.1.1 ページの言語の解説
- W3C：Understanding Language of Page（英語公開版）
- W3C：H57 html要素の言語属性を使う例
出典の最終確認: 2026-11-09。