サイトアイコン IT & ライフハックブログ｜学びと実践のためのアイデア集

WCAG 2.2「3.1.1 ページの言語」Level A：lang属性の設定と確認方法

greeden
dictionary text in bokeh effect

Photo by Pixabay on Pexels.com

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ヘッダーは補助情報として使います。
属性の有無だけを自動検査している 値が本文の言語と一致するかまでは判断できない場合があります。 自動検査に加えて、制作者が本文と設定値を照合します。

公開前の確認手順

  1. ページのソースコードまたは開発者ツールで、ルートの<html>要素を確認します。
  2. lang属性があり、その値がページの主な言語と一致しているか確認します。
  3. 一部分だけ別の言語を使っている場合は、その範囲に適切なlang属性があるか確認します。
  4. PDFでは、文書のプロパティに設定された言語を確認します。
  5. AxeやWAVEなどの自動検査結果を確認し、最後に本文と設定値を人の目で照合します。

可能であれば、スクリーンリーダーでも読み上げを確認します。
自動検査は属性の不足を見つける助けになりますが、ページの実際の言語と設定値が一致しているかは、内容を読んで確かめる必要があります。

実装時のチェックリスト

ページの言語設定を確実に運用する

達成基準3.1.1への対応は、HTMLでは<html>要素のlang属性、PDFでは文書の既定言語を正しく設定することから始まります。
HTTPヘッダーは補助情報として扱い、本文の言語と設定値の一致を手動でも確認します。

当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティを提供しています。
アクセシビリティ向上にご興味がある方は、サービスの詳細をご覧ください。

モバイルバージョンを終了