WCAG 2.2の達成基準「3.1.1 ページの言語（Level A）」は、各ウェブページの既定の言語をプログラムで判別できるようにする基準です。
HTMLでは、ページの主な言語を<html>要素のlang属性に指定します。
日本語ページなら、基本形は<html lang="ja">です。
この指定は画面上には見えませんが、スクリーンリーダーの読み上げなどに使われます。
値がない場合や本文と異なる言語を指定した場合、支援技術が適切な発音規則を選べない可能性があります。
達成基準3.1.1が求める言語情報
既定の言語とは、ページ全体のテキストを処理するときに基準となる言語です。
複数の言語が含まれるページでは、主に使われている言語をページの既定値として指定します。
プログラムで判別できるとは、見た目や文章の内容から推測させるのではなく、支援技術やブラウザーが読み取れる属性や文書情報として示すことです。
「このページは日本語です」と本文に書くだけでは、言語設定の代わりになりません。
言語情報を正しく設定すると、対応する支援技術が適切な読み上げ規則を選びやすくなります。
ページ制作者にとっても、言語の指定箇所と確認方法が明確になり、公開前の検査を手順化できます。
HTMLではhtml要素にlang属性を設定する
HTML文書の既定の言語は、ルート要素である<html>にlang属性を付けて示します。
日本語はja、英語はen、フランス語はfrのように指定します。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページタイトル</title>
</head>
<body>
<h1>ページの見出し</h1>
</body>
</html>設定値は、ページの主な本文の言語に合わせます。
たとえば英語のページにlang="fr"を指定すると、属性自体は存在していても内容と一致しません。
一部分だけ別の言語になる場合
<html lang="ja">は、ページ全体の既定値を示します。
日本語ページの中に英語の文章がある場合は、その要素にもlang属性を付けると、言語の切り替わりを明示できます。
<html lang="ja">
<body>
<p>このページの主な言語は日本語です。</p>
<p lang="en">This sentence is written in English.</p>
</body>
</html>ページ全体と一部分の指定をどう使い分けるかは、HTMLのlang属性で一部分の言語を指定する方法でも解説しています。
PDFでは文書の既定言語を設定する
PDFにはHTMLの<html>要素がないため、文書のプロパティで既定の言語を指定します。
PDF内部では、文書カタログの/Langエントリとして保持される情報です。
設定は、PDFを書き出す元の文書作成ソフトやPDF編集ソフトで行います。
公開前には、PDF編集ソフトやアクセシビリティ検査機能で、文書の言語が本文と一致しているか確認します。
言語設定以外の読み上げ順や見出し構造も含めた確認は、WebアクセシビリティにおけるPDFの実務ガイドが参考になります。
Content-Languageヘッダーは補助情報として扱う
HTTPのContent-Languageヘッダーでも、コンテンツの対象言語に関する情報を送信できます。
Content-Language: jaただし、このヘッダーはHTML本文を処理するときの言語を指定するlang属性の代わりではありません。
HTMLでは<html lang="ja">を設定したうえで、必要に応じてHTTPヘッダーも整合させます。
よくある失敗と修正方法
| 状態 | 問題 | 修正 |
|---|---|---|
<html>にlangがない |
支援技術が既定の言語を属性から判別できません。 | 主な本文が日本語なら<html lang="ja">を設定します。 |
| 本文と異なる言語を指定している | 支援技術が本文に合わない読み上げ規則を選ぶ可能性があります。 | ページの主な言語とlangの値を一致させます。 |
Content-Languageだけを設定している |
HTML本文の処理言語を示すlang属性がありません。 |
<html>のlangを設定し、HTTPヘッダーは補助情報として使います。 |
| 属性の有無だけを自動検査している | 値が本文の言語と一致するかまでは判断できない場合があります。 | 自動検査に加えて、制作者が本文と設定値を照合します。 |
公開前の確認手順
- ページのソースコードまたは開発者ツールで、ルートの
<html>要素を確認します。 lang属性があり、その値がページの主な言語と一致しているか確認します。- 一部分だけ別の言語を使っている場合は、その範囲に適切な
lang属性があるか確認します。 - PDFでは、文書のプロパティに設定された言語を確認します。
- AxeやWAVEなどの自動検査結果を確認し、最後に本文と設定値を人の目で照合します。
可能であれば、スクリーンリーダーでも読み上げを確認します。
自動検査は属性の不足を見つける助けになりますが、ページの実際の言語と設定値が一致しているかは、内容を読んで確かめる必要があります。
実装時のチェックリスト
- HTMLのルート要素に
lang属性がある langの値がページの主な言語と一致している- 別の言語で書かれた文章には、必要に応じて個別の
lang属性がある - PDFの文書言語が設定されている
Content-Languageだけで対応を完了したと判断していない- 自動検査と手動確認の両方を行っている
ページの言語設定を確実に運用する
達成基準3.1.1への対応は、HTMLでは<html>要素のlang属性、PDFでは文書の既定言語を正しく設定することから始まります。
HTTPヘッダーは補助情報として扱い、本文の言語と設定値の一致を手動でも確認します。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティを提供しています。
アクセシビリティ向上にご興味がある方は、サービスの詳細をご覧ください。