なぜその `lang` 属性を疎かにしてはいけないのか？――アクセシビリティとUXの「見えない土台」を整える

フロントエンドエンジニアの皆さん、日々のコーディングで `lang` 属性を意識していますか？
「`` だけ書いておけばOKでしょ？」と思っているなら、少し立ち止まって考えてみましょう。その認識、実はかなり危ういかもしれません。

単なる「おまじない」だと思われがちな `lang` 属性ですが、実はブラウザのレンダリングエンジンやスクリーンリーダー、さらには検索エンジンのクローラーに至るまで、Webサイトの「素性」を決定づける極めて重要な情報源です。今回は、この `lang` 属性が実務の現場でどのような化学反応を起こしているのか、その裏側の挙動まで深掘りしていきましょう。

—

1. `lang` 属性がブラウザと支援技術に与える「決定的な影響」

ブラウザやスクリーンリーダー（NVDA, VoiceOverなど）にとって、`lang` 属性は「このテキストをどの辞書で解釈すべきか」という道しるべです。

スクリーンリーダーの「読み上げ」が変わる

もし日本語のページの中に英語の引用文があるとします。ここで `lang=”en”` を指定していないと、スクリーンリーダーは英語を「無理やり日本語の読み方」で発音しようとします。これではユーザーは何を言っているのか全く理解できません。適切な指定があるだけで、音声合成エンジンは動的に読み上げルールを切り替え、ネイティブに近い自然なイントネーションで読み上げてくれるようになります。

ブラウザの「翻訳機能」の精度を左右する

Chromeの翻訳機能などは、ページ全体の `lang` だけでなく、要素単位の `lang` を見ています。特定の箇所だけ言語が切り替わっていることを正しく伝えておかないと、翻訳精度がガタ落ちします。「なぜかこの部分だけ翻訳されない」「誤訳がひどい」といったトラブルの多くは、実はタグの言語指定漏れが原因だったりするのです。

—

2. 実務で遭遇する「言語混在」のベストプラクティス

現場では、日本語のコンテンツの中に技術用語や引用として英語が混ざることは日常茶飯事です。こうした場合、以下のようなアプローチをとるのがプロの流儀です。

基本のコード例

ここでのポイント:

• `xml:lang` の併記: 古いブラウザや特定のXMLパーサーとの互換性を保つために、`lang` とセットで `xml:lang` を書くのが堅実な実装です。
• 意味のある単位で囲む: 単語ひとつなら ``、段落なら `

  ` や `

  ` に付与します。やりすぎるとDOMが汚れるので、「言語が明確に切り替わる塊」に対して適用するのがバランスの良い戦略です。

—

3. シニアからのアドバイス：CSSとの連動

`lang` 属性はアクセシビリティだけでなく、CSSの `:lang()` 擬似クラスと組み合わせることで、表現の幅をグッと広げることができます。

/ 日本語の時は標準的なフォント /
:lang(ja) {
font-family: “Noto Sans JP”, sans-serif;
}

/ 英語の時は少しフォントサイズを調整したり、イタリックを適用する /
:lang(en) {
font-family: “Inter”, sans-serif;
font-style: italic;
}

このように、CSS側で「日本語のときはこの書体、英語のときはこの書体」といった出し分けを制御できるようになります。特に欧文フォントと日本語フォントでベースラインが微妙にズレる問題なども、これを使えばスマートに解決できるのです。

—

最後に：なぜ「泥臭い」作業が必要なのか

正直なところ、すべての要素に `lang` を細かく振るのは面倒な作業です。しかし、私たちが作っているのは「誰にでも開かれたWeb」です。

目が見えない人、ブラウザの翻訳機能を頼りにしている外国人ユーザー、あるいは検索エンジンという「読み手」たちに対して、情報が正しく伝わるようにタグを打つ。この小さな積み重ねが、結果としてサイト全体の品質を高め、SEO的な評価にも繋がっていきます。

派手なJSライブラリを導入する前に、まずはHTMLの基礎である `lang` 属性を正しくマークアップする。そんな「当たり前を当たり前にやる」ことこそ、一流のフロントエンドエンジニアへの第一歩だと私は確信しています。

皆さんのプロジェクトでも、ぜひ明日のコミットから意識してみてください。きっと、より信頼されるWebサイトになるはずです。