WCAG 達成基準 · Level AA

WCAG 3.1.2: 一部の言語

WCAG 3.1.2 は、ページの主要な言語とは異なる言語で書かれたあらゆる文章、フレーズ、またはセクションのウェブコンテンツについて、lang 属性を使用してプログラム的に特定することを求めています。これにより、支援技術、特にスクリーンリーダーが自動的に発音エンジンを切り替え、音声出力に依存するユーザーに対してコンテンツを正確に読み上げることが可能になります。

このルールの意味

WCAG 3.1.2「部分の言語」は、「理解可能」という原則の下にあるレベルAAの達成基準です。これは、ページ全体の主要な言語を宣言することを求める3.1.1(ページの言語)を直接的に発展させたものです。達成基準3.1.2はさらに踏み込み、ある文章、句、またはコンテンツの一部がページの既定言語とは異なる言語で書かれている場合、その部分には、その特定の言語を示すlang属性を付与しなければならないと定めています。

実際のHTMLの観点では、これは言語が切り替わる部分を囲む要素にlang属性を適用することを意味します。属性値は有効なBCP 47言語タグでなければなりません。たとえば、英語にはlang='en'、フランス語にはlang='fr'、ドイツ語にはlang='de'、トルコ語にはlang='tr'などです。方言特有の発音が重要な場合には、lang='en-US'lang='tr-TR'のような地域サブタグの使用が認められており、推奨されています。

人間の読者が別の言語に属すると認識するすべての明確な言語セグメントが、正しいlang属性を持つ要素で囲まれている場合、そのページは適合(pass)となります。逆に、別の言語の文章が存在するにもかかわらずlang属性が付与されていない場合、あるいは誤った属性が付与されている場合(たとえばフランス語の文をlang='de'とラベル付けするなど)は、不適合(fail)となります。

WCAGはこの達成基準に対して3つの明示的な例外を認めています。第一に、固有名詞(人名、ブランド名、地名)は、たとえ他言語に由来していても言語タグを付ける必要はありません。第二に、主要言語の語彙として認識されている専門用語(医療系の英語ページで使われるラテン語のin vitroなど)は免除されます。第三に、主要言語に完全に取り込まれており、その起源が曖昧になっている言語が特定しにくい語も免除されます。これらの例外は、多くの借用語は正しく理解されるために発音の切り替えを必要としないという実務上の現実を反映しています。

lang属性は、<span><p><div><blockquote><section>、さらには表のセルである<td>など、任意のHTML要素に付与できます。この属性はすべての子孫要素に継承されるため、ブロック全体が対象言語で書かれている場合は、上位のコンテナにタグを付けるだけで十分です。短いフレーズが、基本的には単一言語の段落の中に散在している場合にのみ、個々のインライン要素にタグを付ける必要があります。

なぜ重要か

この達成基準の主な受益者は、特に全盲または弱視のスクリーンリーダー利用者です。スクリーンリーダーは言語ごとに特化した音声合成(TTS)エンジンに依存しています。トルコ語のスクリーンリーダーがlang='fr'属性のないフランス語の文に遭遇すると、そのフランス語の単語をトルコ語の音韻規則で発音しようとし、その結果、ほとんど理解不能な音声が生成されます。利用者は言語が切り替わったことに気づかないかもしれず、単に乱れた音声を聞くだけでコンテンツの理解を完全に失ってしまいます。

トルコのECサイトや観光サイトでよく見られる現実的なシナリオを考えてみましょう。トルコ語で書かれた商品ページに、ブランド名と短い英語のマーケティングスローガンが含まれ、その後にヨーロッパの顧客向けのフランス語の免責事項が続くケースです。英語とフランス語の部分に言語タグが付与されていなければ、トルコ語のTTS音声に依存する全盲の利用者は、3つのセグメントすべてをトルコ語として発音された状態で聞くことになります。英語のスローガンは音の類似性から推測できるかもしれませんが、フランス語の法的文言は完全に理解不能となり、重要な契約情報や安全情報を見落とす可能性があります。

専用のスクリーンリーダーだけでなく、テキスト読み上げツールに依存する認知障害のある利用者も影響を受けます。多くの一般的な読み上げ支援ブラウザ拡張機能は、適切な音声を選択するためにlang属性を利用しています。これがない場合、ツールは言語の切り替えを無視するか、ページ全体に単一の音声を適用してしまい、理解度を損ないます。

アクセシビリティを超えて、正しい言語タグ付けは明確なSEO上の利点ももたらします。検索エンジンはlang属性を用いて多言語コンテンツを正しくインデックスし、言語別のページが地理的・言語的にターゲットされた検索結果に表示されやすくなります。ブラウザもこの属性を利用して正確な翻訳候補を提示し、スペルチェックツールは適切な辞書を適用するために参照します。要するに、適切な言語マークアップは、障害の有無にかかわらずすべての利用者に利益をもたらします。

世界中で22億人以上が何らかの視覚障害を抱えていると推定されており、そのうち数千万人が日常的にスクリーンリーダーに依存しています。国際市場では多言語のWebコンテンツがますます標準となっており、多言語またはグローバルなオーディエンスにサービスを提供するあらゆるサイトにとって、「部分の言語」への準拠は極めて重要です。

関連するaxe-coreルール

WCAG 3.1.2は手動テストを必要とします。なぜなら、自動化ツールは自然言語処理(NLP)アルゴリズムを適用しない限り、ページのどの部分のテキストがページの既定言語とは異なる言語で書かれているかを確実に特定できないからです。そして、短いフレーズや固有名詞、専門用語に対しては、NLPであっても判定が不確かになり得ます。

  • 手動検査 — 言語の判定:axe-coreのような自動スキャナーは、<html>要素に付与されたlang属性が存在し有効であるか(html-has-langおよびhtml-lang-validルールでカバー)を検証できますが、本文全体を読み通して、特定の文章がフランス語、ドイツ語、日本語のいずれであるかを判断することはできません。ツールには、文字列"Bonjour tout le monde"がフランス語なのか、作り物のフレーズなのかという意味的理解がないため、その周囲の要素にlang='fr'が欠けていても指摘できません。
  • 手動検査 — 誤ったlang値:開発者が要素にlang属性を付与していても、誤った言語コードを指定している場合(たとえばスペイン語のテキストをlang='pt'とマークしているなど)、自動ツールは有効なBCP 47タグとして認識し、エラーを報告しません。ミスマッチを特定できるのは、両方の言語を読める人間のレビュアだけです。
  • 手動検査 — 言語変更の範囲:たとえlang属性が存在していても、その属性が外国語の文章全体を正しくカバーしているか(最初の1文だけで終わっていないか、または主要言語に属する隣接コンテンツにまで及んでいないか)を確認するのは人間の役割です。自動ツールには、その判断を行うための読解力がありません。

テスト方法

  1. 自動ベースラインスキャン:対象ページに対してaxe DevTools(ブラウザ拡張またはCI統合)またはGoogle Lighthouseを実行します。html-has-langhtml-lang-validの違反がないか確認します。これらの違反は、ページレベルの言語宣言自体が欠落しているか誤っていることを示しており、3.1.2に取り組む前に修正すべき前提条件となります。どちらのツールもインラインのlang属性の欠落は検出しないため、このステップはあくまでベースラインの確立に過ぎません。
  2. 視覚的コンテンツ監査:ページ全体のコンテンツを読み、宣言されているページ言語とは異なる言語で明らかに書かれているすべての文章、句、ブロックを特定します。これらの要素の一覧を作成し、DOM内での位置を記録します。ブラウザのDOMインスペクタ(ブラウザのDevTools → Elementsパネル)で各要素(または最も近い祖先要素)にlang属性があるか確認します。その値が、実際のコンテンツの言語に一致する有効なBCP 47タグであることを検証します。
  3. スクリーンリーダーテスト — NVDA + Firefox(Windows):NVDAを有効にした状態でFirefoxでページを開きます。矢印キーでコンテンツを移動し、特定しておいた外国語の文章に注目します。注意深く聞き、NVDAが正しくタグ付けされたlang属性に遭遇したときに自動的に発音を切り替えることを確認します。外国語のテキストが、明らかな音声の変化もなく既定言語の発音規則で読まれる場合、そのlang属性は欠落しているか誤っている可能性が高いです。
  4. スクリーンリーダーテスト — JAWS + Chrome(Windows):ChromeでJAWSを起動し、仮想カーソルを使ってページを読み進めます。JAWSの挙動はNVDAと同様で、lang値に基づいてTTSエンジンを切り替えます。詳細読み上げモードを有効にして、言語のアナウンスを聞けるようにします。見た目の言語に対して発音が不自然に聞こえる箇所を記録します。
  5. スクリーンリーダーテスト — VoiceOver + Safari(macOS/iOS):VoiceOverを有効にし、VO+右矢印でページを移動します。iOSでのモバイルテストではスワイプでコンテンツを移動します。Safari上のVoiceOverもlang属性を尊重し、それに応じて音声を切り替えます。対象となる外国語の音声パックがデバイスにインストールされていれば、正しくタグ付けされた要素で明確な音声の変化が聞こえるはずです。
  6. BCP 47タグの検証:見つけたすべてのlang値について、IANA Language Subtag Registryで照合するか、オンラインのBCP 47バリデータを使用して検証します。よくある誤りとして、lang='en-us'(地域コードを小文字で書くことは技術的には有効だが一般的ではない)や、lang='english'のような無効なコードがあります。

修正方法

トルコ語の段落内のインライン外国語フレーズ — 誤り

<p>
  Bu ürün uluslararası standartlara uygundur ve
  <em>state of the art</em> teknoloji kullanmaktadır.
</p>

トルコ語の段落内のインライン外国語フレーズ — 正しい例

<p>
  Bu ürün uluslararası standartlara uygundur ve
  <!-- lang='en' tells screen readers to switch to an English TTS engine -->
  <em lang='en'>state of the art</em> teknoloji kullanmaktadır.
</p>

複数文からなる外国語のブロック引用 — 誤り

<blockquote>
  <p>La liberté commence où l'ignorance finit.</p>
  <p>— Victor Hugo</p>
</blockquote>

複数文からなる外国語のブロック引用 — 正しい例

<!-- lang='fr' applied to the blockquote covers all descendant content -->
<blockquote lang='fr'>
  <p>La liberté commence où l'ignorance finit.</p>
  <p>— Victor Hugo</p>
</blockquote>

バイリンガルのナビゲーションメニュー — 誤り

<nav>
  <ul>
    <li><a href='/tr/anasayfa'>Anasayfa</a></li>
    <li><a href='/en/home'>Home</a></li>
    <li><a href='/de/startseite'>Startseite</a></li>
  </ul>
</nav>

バイリンガルのナビゲーションメニュー — 正しい例

<nav>
  <ul>
    <!-- Primary language (Turkish) needs no extra attribute if html lang='tr' -->
    <li><a href='/tr/anasayfa'>Anasayfa</a></li>
    <!-- English and German links receive their own lang attributes -->
    <li><a href='/en/home' lang='en'>Home</a></li>
    <li><a href='/de/startseite' lang='de'>Startseite</a></li>
  </ul>
</nav>

多言語データセルを含むテーブル — 誤り

<table>
  <tr>
    <th>Ülke</th>
    <th>Slogan</th>
  </tr>
  <tr>
    <td>Fransa</td>
    <td>Liberté, Égalité, Fraternité</td>
  </tr>
  <tr>
    <td>Almanya</td>
    <td>Einigkeit und Recht und Freiheit</td>
  </tr>
</table>

多言語データセルを含むテーブル — 正しい例

<table>
  <tr>
    <th>Ülke</th>
    <th>Slogan</th>
  </tr>
  <!-- lang applied to individual td elements containing foreign text -->
  <tr>
    <td>Fransa</td>
    <td lang='fr'>Liberté, Égalité, Fraternité</td>
  </tr>
  <tr>
    <td>Almanya</td>
    <td lang='de'>Einigkeit und Recht und Freiheit</td>
  </tr>
</table>

よくある間違い

  • 短いインラインフレーズへのlang属性の付与漏れ:開発者は、大きな外国語セクションにはタグを付ける一方で、トルコ語の文中に埋め込まれた2語の英語マーケティングスローガンのような短いフレーズを見落としがちです。免除対象の固有名詞や専門用語でない限り、単語1つだけの外国語であってもタグ付けが必要です。
  • 誤ったBCP 47タグの使用:lang='english'lang='turkish'lang='français'のように、正しいISOコード(lang='en'lang='tr'lang='fr')ではない値を指定すると、その属性は無効となり、スクリーンリーダーは完全に無視する可能性があります。
  • CSSや視覚的スタイルに言語切り替えの意味を持たせようとする:フォントや色を変えたり、外国語テキストをイタリックにしたりすることは、視覚的な利用者には言語の違いを示しますが、支援技術に対してプログラム的な情報を提供するものではありません。スクリーンリーダーに対して機能する唯一の仕組みはlang属性です。
  • スクリーンリーダー利用者が文脈から「察してくれる」と想定する:周囲のトルコ語テキストでフランスに言及しているからといって、乱れた音声で聞こえる箇所が実はフランス語だと全盲の利用者が推測してくれると期待するのは不合理であり、理解の負担を利用者側に押し付けることになります。
  • 複数要素からなる外国語ブロックの最初の要素にしかタグを付けない:3つ連続する<p>要素がフランス語の文章を含んでいる場合、最初の段落にだけlang='fr'を付与すると、残り2つの段落はタグなしのままになります。正しいアプローチは、3つすべてをlang='fr'を持つ親要素で囲むか、各段落に個別に属性を付与することです。
  • 固有名詞と完全な外国語フレーズを混同する:固有名詞に関するWCAGの例外は、「Paris」や「Volkswagen」のような名前を対象としており、フランス語やドイツ語で書かれた全文やマーケティングコピーを対象としているわけではありません。開発者がこの例外を誤用し、実質的な外国語コンテンツへのlangタグ付けを省略する根拠としてしまうことがあります。
  • 動的に挿入されるコンテンツへの言語属性の付与漏れ:外国語コンテンツがJavaScript経由で読み込まれる場合(たとえばCMS駆動のFAQブロックや、APIから取得した翻訳済みの商品説明など)、開発者は挿入されるマークアップにlang属性を含めるのを忘れがちです。サーバーサイド/クライアントサイドのレンダリングパイプラインは、テキストコンテンツとともに言語メタデータも渡す必要があります。
  • HTML5文書でlangなしにxml:langを使用する:XHTMLの文脈ではxml:langが適切な属性でしたが、HTML5ではlangが正しい属性です。HTML5文書でxml:langだけを使用すると、一部のブラウザでは動作するかもしれませんが、すべての支援技術で普遍的にサポートされているわけではありません。
  • 主要言語コンテンツも含む広すぎるコンテナにlangを付与する:トルコ語とフランス語のテキストを両方含むセクション全体をlang='fr'で囲むと、トルコ語の部分まで誤った発音で読まれてしまいます。属性の適用範囲は、言語の境界と正確に一致させなければなりません。
  • 修正後に実際のスクリーンリーダーでテストしない:開発者はしばしばlang属性を追加した時点で修正が完了したとみなし、実際のTTS出力を検証しません。NVDA、JAWS、VoiceOverでテストすることだけが、発音の改善がエンドユーザーにとって実際に知覚可能であることを確認する唯一の方法です。

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

トルコの大統領通達2025/10は、2025年6月21日付官報第32933号で公布され、幅広い公的・民間部門の主体に対してデジタルアクセシビリティの拘束力ある枠組みを確立しています。この通達は、技術標準としてWCAG 2.2を正式に採用し、レベルAAへの適合を法令遵守のベースライン要件としています。

WCAG 3.1.2「部分の言語」はレベルAAの達成基準であり、通達で定義された必須の適合目標の中核に位置します。トルコはヨーロッパ、中東、中央アジアの商業の交差点に位置していることから、多言語Webサイトの運営は一般的であり、これらの主体にはこの達成基準を正しく実装する高度な義務があります。英語で外貨建て条件を掲載するトルコの銀行、ドイツ語でローミング契約条項を掲載する通信事業者、アラビア語で患者同意書を掲載する病院のWebサイトなどは、すべての外国語の文章に対してプログラム的なタグ付けを行わなければなりません。

通達の対象となる主体には、公的機関・行政機関電子商取引プラットフォーム銀行・金融機関病院・医療提供者20万件以上の加入者を有する通信会社旅行代理店民間輸送会社、および国民教育省(MoNE)に認可された私立学校が含まれます。これらすべての主体にとって、レベルAAへの適合(3.1.2を含む)を満たさないことは、行政制裁の対象となり得るほか、家族・社会サービス省が発行するアクセシビリティロゴ(Erişilebilirlik Logosu)の取得資格を失う可能性があります。

Erişilebilirlik Logosuは、特に電子商取引や金融サービスの分野で、トルコ市場における信頼のシグナルとしてますます認知されています。このロゴの取得と維持には、すべてのレベルAA達成基準への適合が求められ、「部分の言語」は、国際顧客にサービスを提供したり、多言語で法的拘束力のある文書を公開したりするトルコの主体にとって特に重要です。トルコ法は、消費者権利に関する通知や金融商品の条件など、特定の開示事項について、障害のある利用者にも理解可能であることを求めているため、言語タグ付けは単なる技術的ベストプラクティスではなく、通達のより広範な使命に組み込まれたアクセシブルなコミュニケーション義務の一部です。

ロゴの取得を目指す組織は、デジタル資産全体にわたるすべての外国語の文章を特定するための構造化されたコンテンツ監査を実施し、コンテンツ管理レイヤーでlang属性の適用を強制する開発プロセスを整備し、自動・手動のレビューサイクルと並行して、「部分の言語」を定期的なアクセシビリティテストプロトコルに組み込むことが推奨されます。