【超・口語訳】WCAG 2.2 攻略シリーズ：達成基準3.1.2（AA）

26K

2026年8月23日 10:10

日本語のサイトに英語のキャッチコピーやフランス語の商品名が入っている、よくありますよね。

でもスクリーンリーダーユーザーがそのページを見たとき、こんなことが起きているかもしれません——

「For a Better Tomorrow」という英語のフレーズが突然「フォア・ア・ベター・トモロー」と日本語エンジンで読み上げられる😱

英語話者が読んでも「なんて言ってるの？」となりますし、日本語ユーザーへの読み上げも意味不明。まさに誰も得しない状況です。

一言で言うと？

「ページの中に別の言語が出てきたら、そこだけ言語を教えてね」、ということです。

🗣️ ページ全体は日本語でも、英語・フランス語・中国語など別の言語が混ざっている部分には、その部分だけ `lang` 属性をつけましょう。

学校の例えで言うと——「今日は英語の授業です」と始まったのに、途中で先生が急にフランス語で話し始めたら？ちゃんと「ここからフランス語ね！」と言ってくれないと生徒は混乱しますよね。それがこの達成基準です。

「ページの中に違う言語が出てきたら、その部分に `lang` 属性をつけて機械に教えてあげましょう。ただし、固有名詞（ブランド名など）や専門用語は除外OK」

「除外OK」な例って何？

迷いやすいポイントなので先に整理します！

✅ lang属性をつけなくていいもの

固有名詞・ブランド名： 「Apple」「Google」「YouTube」など（固有名詞は言語を問わない）
技術用語： 「HTML」「API」「JavaScript」など（世界共通の技術用語）
日本語として定着した外来語： 「アクセシビリティ」「インターネット」など

⚠️ lang属性をつけるべきもの

英語の文章・フレーズ：「For a Better Tomorrow」
フランス語の商品名の説明文：「Eau de Parfum（オードパルファム）の一種」
韓国語・中国語の引用文

デザイナーとコーダーがやること

🎨 デザイナーがすること

デザインカンプにメモを添える習慣をつける
「このコピーは英語」「この商品説明文はフランス語」と注記しておくとコーダーが迷いません。
多言語が混在するページはリストアップして共有
デザイン段階で「ここが別言語」をリスト化しておくと、実装時の見落としが減ります。
ツールを活用： FigmaのAnnotation機能でlang指定が必要な箇所にコメントをつけるのもオススメです。

💻 コーダーがすること

該当箇所のHTML要素に `lang` 属性を追加するだけです！

✅ 合格（パス）の例：英語フレーズを含む日本語ページ

<html lang="ja">
  <body>
    <h1>私たちのビジョン</h1>
    <p>私たちは、<span lang="en">For a Better Tomorrow</span>を掲げ、日々の活動に取り組んでいます。</p>
  </body>
</html>

英語フレーズの部分だけに `lang="en"` を指定しています。スクリーンリーダーはここだけ自動で英語エンジンに切り替えて読み上げます。

✅ 合格（パス）の例：複数言語が混在するページ

<html lang="ja">
  <body>
    <article>
      <h2>海外ブランド紹介</h2>
      <p>フランスを代表する香水ブランドの新作、
        <span lang="fr">Lumière du Matin</span>（朝の光）が登場しました。
      </p>
      <blockquote lang="zh-Hans">
        <p>这款香水散发出清晨的气息。</p>
        <cite>中国メディアのレビュー</cite>
      </blockquote>
    </article>
  </body>
</html>

❌ 不合格（失敗）の例

<html lang="ja">
  <body>
    <p>私たちは、For a Better Tomorrowを掲げ、日々の活動に取り組んでいます。</p>
    <p>Lumière du Matinが新発売。</p>
  </body>
</html>

ページ全体が `lang="ja"` なのに、英語・フランス語部分に個別の `lang` 指定がない。スクリーンリーダーはすべて日本語エンジンで読んでしまいます。

よく使うタグと lang の組み合わせ

inline要素に使うか、block要素に使うかで使い分けます：

インライン要素（文の途中に混在する場合）

<span lang="en">Check it out!</span>
<em lang="fr">Bon voyage</em>

ブロック要素（段落・引用まるごと別言語の場合）

<p lang="en">This is a full English paragraph.</p>
<blockquote lang="ko">
  <p>이 제품은 정말 훌륭합니다.</p>
</blockquote>

🤖 AIを活用した時短・効率化テクニック

テクニック1：lang属性が必要な箇所を自動特定

HTMLを渡してAIに確認させましょう。

以下のHTMLのページ全体の言語は日本語（lang="ja"）です。
日本語以外の言語（英語・フランス語・中国語など）が含まれている箇所を
すべて特定し、それぞれに適切なlang属性を追加したコードを出力してください。
固有名詞・ブランド名・技術用語（HTML、API等）は除外してください。

[HTMLコードをここに貼る]

テクニック2：大量のコンテンツを一括チェック

CMSからエクスポートした記事や商品説明文が大量にある場合、AIに分類させます。

以下のテキストに含まれる「日本語以外の言語フレーズ」をすべてリストアップしてください。
各フレーズについて、使用言語と適切なBCP47言語コードも教えてください。

[テキストをここに貼る]

テクニック3：Figmaデザインからの言語注記生成

デザインのテキストをコピーしてAIに投げると、lang対応リストを自動生成できます。

以下のデザインに含まれるテキストを分析して、
日本語以外の言語が使われている部分をリストアップし、
HTML実装時に必要なlang属性の一覧を作成してください。

【テキスト一覧】
- For a Better Tomorrow（キャッチコピー）
- Lumière du Matin（商品名）
- Apple（ブランド名）
- JavaScript（技術用語）
- 明日を、もっと豊かに。（日本語コピー）

テクニック4：自動検証ツールの活用

axe DevToolsで検出できないケースがあるため、AIとの組み合わせが効果的です。

スクリーンリーダーで「For a Better Tomorrow」が日本語エンジンで
読み上げられてしまうと報告がありました。
以下のHTMLを確認し、lang属性の修正が必要な箇所を指摘してください。

[HTMLコードをここに貼る]

3.1.1 との違いを整理しよう

3.1.1 は「レベルA」で絶対必須、3.1.2 は「レベルAA」でより高品質を目指すときの基準です。ただし、多言語コンテンツが多いサイトでは積極的に対応しておく価値があります！

まとめ：今すぐできること

自分のサイトに英語などのフレーズがないか確認する
キャッチコピー・ボタンテキスト・引用文など
別言語の部分を洗い出す
固有名詞・技術用語は除外OK
該当箇所に `lang` 属性を追加する
`<span lang="en">〜</span>` のひと手間で完了！

対応コスト：コーダーなら1ページあたり数分〜30分程度。多言語コンテンツが少ないサイトなら、午後イチで終わります😊