WCAG 達成基準 · Level A

WCAG 3.1.1: ページの言語

WCAG 3.1.1 では、各ウェブページの既定の人間の言語がプログラムによって判別できることが求められており、主に HTML 要素に有効な lang 属性を設定することで実現されます。これにより、スクリーンリーダーのような支援技術がコンテンツを正しく読み上げることができ、認知障害や言語に関連する障害のあるユーザーがページを理解しやすくなります。

このルールの意味

WCAG 3.1.1「ページの言語」は、理解可能という原則の下にあるレベルAの達成基準です。これは、すべてのウェブページの主要な人間の言語が、支援技術がプログラムによって検出できる形で公開されていることを求めています。実務上は、ほとんどの場合、ページの<html>要素に直接、有効なlang属性を指定することを意味します。

lang属性の値は、有効なBCP 47言語タグでなければなりません。BCP 47タグは、主言語サブタグ(英語ならen、トルコ語ならtr、フランス語ならfrなど)と、必要に応じてハイフンで区切られた地域サブタグ(en-UStr-TRpt-BRなど)で構成されます。言語タグは、ページコンテンツが書かれている支配的な言語を正確に反映していなければなりません。主にトルコ語で書かれたページはlang='tr'またはlang='tr-TR'を宣言しなければならず、英語で書かれたページはlang='en'またはその地域バリアントを宣言しなければなりません。

<html>要素に、空でなく構文的に有効なBCP 47言語タグであり、ページの主要言語を正しく特定しているlang属性が付与されている場合、そのページはこの基準に適合します。lang属性がまったく存在しない場合、値が空(lang='')である場合、または値が認識されるBCP 47言語タグでない場合(たとえば、ハイフンではなくアンダースコアを用いたlang='en_US'lang='turkish'など)は、そのページは不適合となります。

XML MIMEタイプで配信されるXHTMLページでは、lang属性とXML名前空間属性xml:langの両方を指定する必要があり、その値は一致していなければなりません。たとえばlang='en'xml:lang='tr'のように両者が一致しない場合、この基準と関連するaxe-coreルールhtml-xml-lang-mismatchの両方に違反することになります。

WCAGは明示的に1つの例外を示しています。ページが純粋に装飾的である場合、意図的に判別可能な言語を持たないCAPTCHAである場合、または(テキストのない画像だけのページのように)完全に非言語的なコンテンツで構成されている場合、そのページには決定可能な言語がないかもしれません。しかし、この例外は範囲が狭く、現実世界のほとんどのページには言語宣言が必要となる十分なテキストが含まれています。

なぜ重要か

ページ言語が正しく宣言されていることによる主な恩恵を受けるのは、スクリーンリーダー利用者であり、その大多数は全盲または重度のロービジョンの人々です。NVDA、JAWS、VoiceOverといったスクリーンリーダーは、適切な音声合成(TTS)音声と発音エンジンを選択するためにlang属性を使用します。トルコ語ユーザーがlang='tr'を正しく宣言しているページを閲覧すると、スクリーンリーダーはトルコ語TTS音声に切り替え、正しいトルコ語の音韻、アクセントパターン、ダイアクリティカルマークを適用します。この宣言がない場合、スクリーンリーダーはユーザーのシステム言語やまったく別の言語をデフォルトとして使用し、内容が理解不能な意味不明の発音を生み出す可能性があります。

具体的なシナリオを考えてみましょう。視覚障害のあるトルコ人市民が、政府の申請書をダウンロードするために公的機関のウェブサイトを訪れます。しかし、そのサイトにはlang属性がありません。ユーザーのNVDAは英語のTTSプロファイルをデフォルトとして使用しています。トルコ語の単語が英語の音韻で読み上げられ、「şehir」(都市)や「başvuru」(申請)といった単語が判別不能になります。ユーザーは、見える人の助けなしにはフォームを完了できず、デジタルサービスの目的が完全に損なわれてしまいます。

認知・学習障害のあるユーザーも恩恵を受けます。ブラウザはlang属性を用いて正確な翻訳候補を提示します。ディスレクシアのある一部のユーザーは、コンテンツを処理しやすい言語に変換するためにブラウザベースの翻訳ツールに依存しています。lang属性が誤っている、または欠落していると、これらのツールは元の言語を誤認し、質の低い翻訳を生成したり、翻訳の提案自体を行わなかったりします。

Dragon NaturallySpeakingのような音声コントロールソフトウェアに依存する運動障害のあるユーザーも、ページの言語が正しく解釈されることに依存しています。ソフトウェアは、話されたコマンドを画面上のテキストに一致させるためにページの言語を利用しますが、ページ言語が誤認されるとこのマッチングが機能しなくなります。

アクセシビリティ以外にも、具体的なSEO上の利点があります。検索エンジンは、ページの対象言語と地域を判断するシグナルの1つとしてlang属性を使用し、ローカライズされた検索結果の精度を高めます。正しい言語タグ付けは、支援技術を使用していないユーザーも含め、すべてのユーザーに対してブラウザのスペルチェックや文法チェック機能の信頼性を向上させます。世界保健機関によると、世界で約22億人が何らかの視覚障害を抱えており、その相当数がスクリーンリーダーに依存しています。したがって、正しい言語宣言は、最小限の労力で実現できるアクセシビリティ改善の中でも、最も大きな効果を持つものの1つです。

関連するaxe-coreルール

  • html-has-lang — このルールは、<html>要素にlang属性が存在するかどうかをチェックします。ドキュメント内の他の場所に属性が存在するかどうかに関係なく、ルートの<html>タグからlang属性が完全に欠落しているページを検出します。修正が単一の属性追加で済むため、最も一般的かつ影響の大きい自動検出の1つです。
  • html-lang-valid — このルールは、<html>要素上のlang属性の値が有効なBCP 47言語タグであるかどうかをチェックします。lang='turkish'(ISO 639-1コードtrの代わりに英語のフルネームを使用している)、lang='en_US'(ハイフンの代わりにアンダースコアを使用している)、lang='xx'(割り当てられた言語のないプレースホルダー)など、認識されない言語コードを検出します。存在していても無効な値を含むlang属性は、支援技術が信頼して動作できないため、属性が欠落しているのと同じくらい問題です。
  • html-xml-lang-mismatch — このルールは、<html>要素にlang属性とxml:lang属性の両方を持つXHTMLページに特有のものです。たとえばlang='en'xml:lang='tr'のように、2つの属性が異なる言語コードを指定している場合を検出します。これらの値が矛盾していると、支援技術やXMLプロセッサは相反するシグナルを受け取り、予測不能な動作をする可能性があります。両方の値は同じ主言語サブタグを指定しなければなりません。

これら3つのルールは最も一般的なプログラム上の不備をカバーしますが、自動ツールは意味的な正確さを検証することはできません。つまり、宣言された言語が実際にページが書かれている言語と一致しているかどうかを判断することはできません。完全にトルコ語で書かれているページがlang='en'を宣言している場合、3つのaxe-coreルールはすべてパスしますが、宣言された言語がページの実際の主要言語を反映していないため、WCAG 3.1.1には依然として不適合となります。そのため、自動スキャンに加えて、宣言された言語が正しいことを確認するための手動レビューが常に必要です。

テスト方法

  1. axe DevToolsまたはLighthouseによる自動スキャン: ChromeまたはFirefoxでページを開きます。DevTools(F12)を開き、axe DevToolsパネルまたはLighthouseタブに移動して、アクセシビリティのフル監査を実行します。html-has-langhtml-lang-validhtml-xml-lang-mismatchの各ルールにおける違反を特に確認します。axeは<html>要素をハイライトし、具体的な不備を説明します。Lighthouseも、アクセシビリティカテゴリの下で同様の問題を表示します。検出されたすべての違反と推奨される修正内容を記録します。
  2. ソースコードの手動確認: ページソースを表示します(多くのブラウザではCtrl+U)。開始タグの<html>を探し、lang属性が含まれていること、その属性値が有効なBCP 47タグであること(IANA Language Subtag Registryで確認)、そしてページコンテンツが書かれている言語を正確に反映していることを確認します。XHTMLページの場合は、xml:lang属性がある場合に、その主言語サブタグがlangと同じであることも確認します。
  3. NVDAとFirefoxによるスクリーンリーダーテスト: NVDA(無料、Windows)をインストールし、Firefoxでページを開きます。NVDA+Tを押してページタイトルを読み上げさせ、使用されているTTS音声を確認します。ページがトルコ語であれば、音声はトルコ語TTS音声であり、トルコ語の単語が正しく発音されているはずです。トルコ語コンテンツに対して英語など誤った音声が聞こえる場合、lang属性が欠落しているか誤っています。ChromeでJAWSを、macOSのSafariでVoiceOverを使用して同様のテストを繰り返します(Cmd+F5でVoiceOverを起動し、ページに移動して本文テキストの発音を確認します)。
  4. ブラウザの言語検出の確認: Chromeでページを開きます。ブラウザの組み込み翻訳バーを確認します。Chromeは、ブラウザの設定と比較して外国語であると判断したページに対して翻訳を提案します。Chromeがページ言語を誤認したり、本来翻訳を提案すべき場面で翻訳を提案しなかったりする場合、lang属性が誤っているか欠落している実務的なシグナルとなります。これは決定的なアクセシビリティテストではありませんが、有用な二次的指標です。
  5. 意味的な正確さの確認(手動のみ): ページコンテンツを読み、宣言されているlang値がページの実際の主要言語と一致していることを確認します。自動ツールはこのチェックを行うことができません。異なるURLから異なる言語バージョンを提供する多言語サイトに特に注意してください。各URLのページは、単一のグローバルデフォルトを継承するのではなく、それぞれの正しい言語を宣言しなければなりません。

修正方法

lang属性の欠如 — 誤り

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <title>Başvuru Formu</title>
  </head>
  <body>
    <h1>Hoş Geldiniz</h1>
  </body>
</html>

lang属性の欠如 — 正しい例

<!DOCTYPE html>
<html lang='tr'>
  <!-- lang='tr' はスクリーンリーダーにトルコ語TTS音声の使用を指示する -->
  <head>
    <meta charset='UTF-8'>
    <title>Başvuru Formu</title>
  </head>
  <body>
    <h1>Hoş Geldiniz</h1>
  </body>
</html>

無効なlang属性値 — 誤り

<!DOCTYPE html>
<html lang='turkish'>
  <!-- 'turkish' は有効なBCP 47タグではない。axeは html-lang-valid 違反として検出する -->
  <head>
    <title>Kurumsal Site</title>
  </head>
  <body>
    <p>Şirketimiz hakkında bilgi edinmek için buraya tıklayın.</p>
  </body>
</html>

無効なlang属性値 — 正しい例

<!DOCTYPE html>
<html lang='tr'>
  <!-- 英語の単語 'turkish' ではなく、ISO 639-1 の2文字コード 'tr' を使用する -->
  <head>
    <title>Kurumsal Site</title>
  </head>
  <body>
    <p>Şirketimiz hakkında bilgi edinmek için buraya tıklayın.</p>
  </body>
</html>

XHTMLのxml:lang不一致 — 誤り

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
  'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='tr'>
  <!-- lang と xml:lang が一致していない — html-xml-lang-mismatch 違反 -->
  <head><title>XHTML Sayfası</title></head>
  <body><p>İçerik burada.</p></body>
</html>

XHTMLのxml:lang不一致 — 正しい例

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
  'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' lang='tr' xml:lang='tr'>
  <!-- lang と xml:lang の両方が 'tr' — 一貫しており有効 -->
  <head><title>XHTML Sayfası</title></head>
  <body><p>İçerik burada.</p></body>
</html>

多言語サイトで誤った言語を宣言 — 誤り

<!-- サイトの英語版だが、lang がグローバルに 'tr' に設定されている -->
<html lang='tr'>
  <head><title>About Us</title></head>
  <body>
    <p>Welcome to our company. We specialize in accessible web solutions.</p>
  </body>
</html>

多言語サイトで誤った言語を宣言 — 正しい例

<!-- 各言語バージョンがそれぞれ正しい lang 属性を宣言する -->
<html lang='en'>
  <!-- これは英語ページ。/tr/ のトルコ語ページでは lang='tr' を宣言する -->
  <head><title>About Us</title></head>
  <body>
    <p>Welcome to our company. We specialize in accessible web solutions.</p>
  </body>
</html>

よくある間違い

  • BCP 47コードの代わりに言語の英語名をそのまま使うことtrenarといった正しいコードの代わりに、lang='turkish'lang='english'lang='arabic'と記述すること。これらの値は支援技術に認識されません。
  • 地域サブタグの区切りにアンダースコアを使うことlang='en-US'lang='tr-TR'といったハイフン区切りの形式ではなく、lang='en_US'lang='tr_TR'と記述すること。BCP 47ではアンダースコアではなくハイフンを要求しています。
  • <html>ではなく<body>にlang属性を設定することlang属性は、axe-coreのhtml-has-langルールを満たし、支援技術にコンテンツ解析前のページレベルの言語コンテキストを提供するために、ルートの<html>要素に設定しなければなりません。
  • langを空文字列のままにすることlang=''と設定すると、多くの支援技術では属性がないのと同じ扱いになり、空文字列は有効な言語タグではないためhtml-has-langで検出されます。
  • 別言語プロジェクトのテンプレートをコピーしてlang属性を更新しないこと — 英語のボイラープレートを再利用し、<html>タグ上のlang='en'lang='tr'に変更しないままにしてしまう、といったトルコの開発ワークフローで非常に一般的な問題です。
  • 正しいlang属性を宣言していても、新しい言語版サイトを公開する際に更新しないこと — サーバーサイドレンダリングを用いる多言語サイトでは、共有レイアウトテンプレートに単一の値をハードコードするのではなく、ロケールごとにlang属性が動的に設定されていることを保証しなければなりません。
  • CMSやフレームワークが自動的にlang属性を正しく設定してくれると想定すること — 多くのCMSプラットフォーム(特定の設定のWordPress、Joomla、カスタムフレームワークなどを含む)は、デフォルトでは有効なlang属性を設定しません。開発者はテンプレートレベルでこれを検証し、CMS任せにしてはなりません。
  • HTML用のlang属性とContent-Language HTTPヘッダーを混同すること — HTTPヘッダーはキャッシングやコンテンツネゴシエーションに影響しますが、スクリーンリーダーには使用されません。WCAG 3.1.1への準拠のための正しいメカニズムは、<html>上のドキュメント内lang属性です。
  • 異なる方言を示す誤った地域サブタグを使用すること — たとえば、簡体字中国語(zh-CN)で書かれたページにlang='zh-TW'(繁体字中国語、台湾)を宣言すると、スクリーンリーダーが誤った音声プロファイルや発音ルールを選択する可能性があります。
  • シングルページアプリケーション(SPA)で動的に挿入される全ページコンテンツにlangを設定し忘れること — SPAが同一ドキュメントシェル内で複数言語のコンテンツを読み込みながらlang属性を更新しない場合、ユーザーが言語セクション間を移動しても、新しいコンテンツセクションに対して正しいTTS発音が提供されません。

トルコのアクセシビリティ規制との関係

WCAG 3.1.1「ページの言語」は、2025年6月21日に官報第32933号で公布された大統領通達2025/10により、トルコにおいて直接的な法的効力を持ちます。この通達は、WCAG 2.2に整合した必須のウェブアクセシビリティ要件を定め、すべての対象組織に対してレベルA準拠を最低限の義務基準として指定しています。

この通達は、公的部門と民間部門の幅広い組織を対象としています。省庁、自治体、国立大学、公立病院、すべての中央および地方政府機関などの公的機関は、通達の公布から1年以内にレベルAへの完全準拠を達成することが求められます。規制の対象となる民間部門の組織には、2年の遵守期間が与えられており、電子商取引プラットフォーム、銀行・金融機関、民間病院・医療提供者、20万以上の加入者を持つ通信事業者、旅行代理店、民間輸送会社、国民教育省(MoNE)の認可の下で運営される私立学校などが含まれます。

WCAG 3.1.1はレベルAの基準であるため、この通達の対象となるすべての組織にとって必須のベースラインに含まれます。トルコの公的機関のウェブサイトが<html>要素からlang='tr'を省略している場合、あるいは誤った、または無効な言語タグを宣言している場合、それは法的に義務付けられた標準への直接的な不適合となります。銀行や電子商取引プラットフォームなどの民間部門の組織にとっても、遵守期間内に同様の不備がある場合は規制違反となります。

トルコのウェブチームにとっての実務的な意味は大きいものです。すべてのページテンプレート、すべてのCMSレイアウト、すべてのSPAシェル、すべての動的に生成されるページについて、ルートHTML要素に有効なlang='tr'(または適切なバリアント)が存在することを確認するための監査が必要です。これは単なるベストプラクティスの推奨ではなく、通達2025/10の下では法的義務です。axe-coreルールhtml-has-langhtml-lang-validによって、これらの不備の大部分を自動的に検出できることを踏まえると、遵守期限までにこの問題を特定し是正するうえで技術的な障壁はありません。

通達の対象となる組織は、WCAG 3.1.1への準拠を最優先の是正項目として扱うべきです。これは(単一の要素に単一の属性を追加するだけという)最も修正が容易な基準の1つでありながら、スクリーンリーダー利用者にとってすべてのページのアクセシビリティに極めて大きな影響を与えるものであり、この規制が最も直接的に保護しようとしている人々の権利に関わるものだからです。