WCAG 2.2の達成基準「3.1.2 コンテンツ部分の言語」（Level AA）は、ページの一部で別の言語を使うとき、その言語を支援技術などがプログラムで判別できる状態にすることを求めています。
HTMLでは、言語が切り替わる要素にlang属性を付けるのが基本です。
言語指定がないと、多言語に対応したスクリーンリーダーが、ページの主言語の規則で別言語の語句を読み上げる可能性があります。
指定する範囲の判断から、HTMLとPDFでの設定、確認手順までを順に整理します。
「ページの言語」と「コンテンツ部分の言語」の違い
達成基準「3.1.1 ページの言語」は、ページ全体の基本となる言語を判別できるようにする基準です。
日本語ページなら、通常は<html lang="ja">のように指定します。
一方、「3.1.2 コンテンツ部分の言語」は、その基本言語とは異なる一節や語句を対象にします。
ページ全体が日本語でも、英語の引用文やフランス語のフレーズが含まれるなら、その範囲だけに対応する言語を指定します。
プログラムで判別できるとは、見た目から推測させるのではなく、HTML属性や文書の言語情報をソフトウェアが取得できる状態を指します。
これにより、スクリーンリーダーなどが言語に合った処理を選びやすくなります。
どの範囲に言語を指定するか
アルファベットで書かれた単語を見つけるたびに、機械的にlang属性を付ける必要はありません。
周囲の文章から、別の言語へ切り替わったことが明確な範囲を見分けます。
| 場面 | 考え方 | 指定例 |
|---|---|---|
| 日本語だけで構成されたページ | ページ全体の言語指定を使う | <html lang="ja"> |
| 日本語の段落内に英語のフレーズがある | 英語部分だけを囲む | <span lang="en">...</span> |
| 段落や引用全体が別の言語である | 段落や引用を囲む要素に指定する | <p lang="en">...</p> |
| 固有名詞、技術用語、言語を特定できない語、周囲の言語に定着した語句 | 別言語への切り替えを意図しているか確認する | 必要性を個別に判断する |
固有名詞や技術用語などは、この達成基準の例外に含まれます。
ただし、「英単語だから例外」と一律に決めるのではなく、周囲の言語として自然に扱う語なのか、別言語として読ませたい表現なのかを確認します。
HTMLでの実装方法
段落内のフレーズだけが別言語の場合
日本語の文章に英語の名称を一つ含める場合は、そのフレーズをspan要素で囲み、lang="en"を指定します。
<p>この資料の名称は <span lang="en">Web Accessibility Guidelines</span> です。</p>lang属性の範囲を英語部分だけに限定することで、その前後の日本語にはページ全体の言語指定が引き続き適用されます。
段落全体が別言語の場合
段落全体が英語なら、段落を囲むp要素に言語を指定します。
<p lang="en">This document explains web accessibility.</p>引用全体が別言語の場合も、引用を囲む要素など、実際の言語範囲に合う要素へ指定します。
語句ごとに細かく分割するより、言語が共通するまとまりに付けるほうが、指定漏れを防ぎやすくなります。
言語コードを内容に合わせる
英語にはen、フランス語にはfr、ドイツ語にはdeのように、内容と一致する言語コードを使います。
英語の文章にlang="de"を付けると、属性自体は存在していても、支援技術へ誤った情報を渡すことになります。
CSSによる見た目の指定とは役割が異なる
lang属性が付いた要素は、CSSの属性セレクターで装飾できます。
<p>彼の言葉は <span lang="fr">Liberté, égalité, fraternité</span> でした。</p>[lang="fr"] {
font-style: italic;
}ただし、CSSは見た目を整えるための指定であり、言語情報そのものの代わりにはなりません。
字体や色だけを変えるのではなく、HTMLのlang属性で言語を判別できるようにします。
PDFでの言語指定
PDFでは、言語が異なる語句や段落を含むタグまたはコンテナに/Lang情報を設定します。
設定にはPDFの編集機能を備えたオーサリングツールを使い、対象範囲と指定言語が一致しているかを確認します。
PDFは言語以外にも、タグ付けや読み上げ順などを確認する必要があります。
文書全体の点検方法は、読み上げやすいPDFを作る実務ガイドも参照してください。
よくある失敗
- 指定漏れ：別言語の段落やフレーズに
lang属性がなく、ページの主言語がそのまま適用されている。 - 言語コードの誤り：属性はあるものの、実際の文章とは異なる言語が指定されている。
- 範囲のずれ：一部だけが別言語なのに、段落全体へ別言語を指定している。
- 過剰な指定：固有名詞や周囲の言語に定着した語まで、根拠なく別言語として扱っている。
- 見た目だけの変更：CSSで字体を変えただけで、プログラムが取得できる言語情報を付けていない。
確認は自動チェックと手動チェックを組み合わせる
- ページ全体の主言語が正しく指定されているか確認する。
- 本文から、主言語とは異なる段落、引用、フレーズを洗い出す。
- 開発者ツールやソースコードで、対象要素に
lang属性があるか確認する。 - 言語コードが実際の文章と一致し、指定範囲が広すぎたり狭すぎたりしないか読む人が確認する。
- 対応する言語を利用できるスクリーンリーダーで読み上げを聞き、言語の切り替わりを確認する。
AxeやWAVEなどの評価ツールは、言語属性に関する一部の問題を見つける助けになります。
しかし、自動チェックだけでは、文章の実際の言語、例外に当たる語、意図した指定範囲までを常に判断できないため、内容を読んだうえでの確認を組み合わせます。
実装時に押さえる点
- ページ全体の言語と、途中で切り替わる言語を分けて考える。
- 別言語の範囲に合わせて
lang属性を付け、内容と一致する言語コードを使う。 - 固有名詞や技術用語などの例外を機械的に拡大せず、意図した言語の切り替えかどうかを確認する。
- 自動ツールの結果だけで完了とせず、ソースコードと読み上げの両方を点検する。
当社では、Webアクセシビリティの導入と改善を支援するUUU ウェブアクセシビリティを提供しています。
継続的なアクセシビリティ改善を検討している方は、サービスの詳細をご覧ください。