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

スクリーンリーダーを使っているユーザーから「文章が変な読み方をされる」「英語読みで読み上げられて全然わからない」というクレームが届いたことはありませんか？

または、翻訳ツールで「なぜかうまく翻訳されない」「ブラウザの自動翻訳が起動しない」という謎の現象に悩んだこと、ないですか？

実はこれ、たった1行のコードで大半が解決するんです。それが今回のテーマ、達成基準 3.1.1「ページの言語」です！

一言で言うと？

「このページは何語で書かれてるよ」ってHTMLに明記しておいてね、ということです。

もう少し砕けて言うと——

中学生でもわかるイメージ：外国語の授業で、先生が最初に「今日は英語の授業です」と言ってくれないと、みんな「え、フランス語？スペイン語？」と混乱しますよね。それと同じです。

「HTMLのタグに `lang` 属性を書いて、このページが何語で書かれているか機械（スクリーンリーダーや翻訳ツール）に教えておきましょう」

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

🎨 デザイナーがすること

実はデザイナーが直接コードを書くことは少ないですが、以下を意識するだけで十分です！

• ページの主要言語を明確にする
  「このページは日本語メインで作る」「英語版ページを別で用意する」を設計段階で決めておきましょう。

• 多言語が混在するページの設計をチームに共有する
  英語のキャッチコピーや商品名が入る場合は、コーダーに「ここは英語だよ」と伝える習慣をつけましょう。

💻 コーダーがすること

超シンプルです！HTMLの最初の行を確認するだけです。

✅ 合格（パス）の例：日本語のページ

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
  </head>
  <body>
    <p>こんにちは！これは日本語のページです。</p>
  </body>
</html>

`lang="ja"` が指定されているので、スクリーンリーダーは「日本語エンジン」で読み上げます。

✅ 合格（パス）の例：英語のページ

<html lang="en">

❌ 不合格（失敗）の例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
  </head>
  <body>
    <p>こんにちは！</p>
  </body>
</html>

`lang` 属性がない！スクリーンリーダーは言語を特定できず、英語エンジンで日本語を読み上げてしまう可能性があります。「コンニチハ！」のような機械音声になったり、そもそも読み上げられなかったりします。

よく使う lang コード一覧

• 日本語：`lang="ja"`

• 英語（アメリカ）：`lang="en"` または `lang="en-US"`

• 英語（イギリス）：`lang="en-GB"`

• 中国語（簡体字）：`lang="zh-Hans"`

• 韓国語：`lang="ko"`

• フランス語：`lang="fr"`

ちょっと応用：ページ内に別の言語が混在するとき

ページ全体は日本語だけど、一部に英語の文章がある場合はどうする？

これは達成基準 3.1.2（パーツの言語）の話になりますが、こんな書き方が正しいです：

<html lang="ja">
  <body>
    <p>これは日本語の文章です。</p>
    <p lang="en">This is an English sentence.</p>
  </body>
</html>

部分的に `lang` 属性をつけることで、スクリーンリーダーは自動で言語を切り替えて読んでくれます。

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

テクニック1：既存サイトの一括チェック

HTMLファイルをAIに貼り付けて、lang属性の有無を確認してもらいましょう。

以下のHTMLを確認して、lang属性が正しく設定されているか教えてください。
設定されていない場合は、修正したコードも提示してください。

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

テクニック2：多言語サイトの lang コード特定

どの lang コードを使えばいいか迷ったときは、AIに聞くのが早いです。

以下の言語のHTML lang属性コードを教えてください。
BCP 47の言語タグ形式で回答してください。

言語：タイ語、ベトナム語、ヒンディー語

テクニック3：自動検証ツールとの組み合わせ

axe DevTools（Chrome拡張）やWAVEなどの無料ツールを使うと、lang属性の欠落を自動検出できます。

Webアクセシビリティチェックツール「axe」で「lang属性が設定されていない」
というエラーが出ました。
以下のHTMLを修正してください。

[エラーが出たHTMLをここに貼る]

テクニック4：CMSでの設定確認

WordPressやその他CMSを使っている場合は、AIに確認方法を聞いてみましょう。

WordPressで作ったサイトのHTMLにlang属性を正しく設定するには
どうすればいいですか？テーマやプラグインでの設定方法も含めて教えてください。

まとめ：今すぐできる3ステップ

1. 自分のサイトのHTMLを開く
   `<html` のタグを探す

2. lang属性があるか確認する
   `lang="ja"` などが書かれているか確認

3. なければ追記する
   `<html lang="ja">` に修正するだけ！

たったこれだけで、スクリーンリーダーユーザーへの体験が大きく改善します。しかも対応工数は5分もかかりません。これをやらない理由はゼロですよね！