サイトアイコン IT & ライフハックブログ｜学びと実践のためのアイデア集

HTMLのlang属性を正しく使う方法｜ページ全体、一部分、動的コンテンツの実装例

greeden

日本語のページ内に英語の引用や案内が入るときは、言語が切り替わる範囲に合わせてHTMLのlang属性を指定します。
lang属性は、その要素に書かれた言葉の言語をブラウザや支援技術へ伝えるための情報です。
ページ全体には基本となる言語を指定し、異なる言語を使う部分だけ個別に切り替えます。

この指定があると、スクリーンリーダーが言語に応じた読み上げ方を選びやすくなります。
ただし、lang属性そのものが文章を翻訳するわけではありません。
多言語で情報を届けるには、読者が理解できる本文を用意したうえで、その言語を正しく指定する必要があります。

「パーツの言語」とは何か

「パーツの言語」とは、ページの基本言語とは異なる言語が使われている部分を示す考え方です。
たとえば、日本語のページに英語の引用文がある場合、ページ全体にはjaを、引用文にはenを指定します。

言語を指定する範囲と記述例
対象 指定する要素 記述例
ページ全体 html要素 <html lang="ja">
段落や引用 p要素やblockquote要素 <blockquote lang="en">
短い語句 span要素など <span lang="en">
動的な内容 JavaScriptで作成した要素 message.lang = "en";

言語指定が読み上げに与える影響

スクリーンリーダーは、指定された言語を手掛かりとして発音方法を切り替えます。
日本語として設定された範囲に英語の文章が入っていると、英語の発音が不自然になり、内容を聞き取りにくくなることがあります。
言語が変わる箇所へlang属性を付けることで、その切り替わりを支援技術へ明示できます。

一方、言語指定は画面に表示される文章を書き換えません。
lang属性は翻訳文の代わりではなく、すでに書かれている文章を機械が適切に解釈するための情報です。

lang属性の実装方法

ページ全体の言語を指定する

ページの主な言語は、html要素に指定します。
日本語が中心のページでは、次のようにlang="ja"を設定します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Webアクセシビリティについて</title>
</head>
<body>
  <!-- 日本語のコンテンツ -->
</body>
</html>

ページ単位の指定を詳しく確認したい場合は、ページ全体の言語を指定する方法も参照してください。

段落や引用だけ言語を切り替える

一つの段落や引用文が別の言語になっている場合は、その内容を囲む要素にlang属性を付けます。
次の例では、日本語のページ内にある英語の引用だけをlang="en"にしています。

<p>次の引用は英語で書かれています。</p>
<blockquote lang="en">
  Actions speak louder than words.
</blockquote>
<p>日本語では「行動は言葉よりも雄弁である」という意味です。</p>

短い語句に言語を指定する

文章の一部だけ言語が変わる場合は、該当する語句をspan要素などで囲みます。
次の例では、英語表記の「Internet」だけに英語を指定しています。

<p>
  インターネット（<span lang="en">Internet</span>）は、
  情報をやり取りするための仕組みです。
</p>

動的に追加する内容にも指定する

JavaScriptで要素を作成する場合も、表示する文章の言語に合わせてlang属性を設定します。
テキストだけを差し替え、言語情報を付け忘れないようにします。

const message = document.createElement("p");
message.lang = "en";
message.textContent = "This content is in English.";
document.body.appendChild(message);

指定する範囲の決め方

lang属性は、実際に言語が変わる範囲へ付けます。
範囲が広すぎると周囲の日本語まで英語として扱われ、狭すぎると一部の文章に言語情報が届きません。

実装時に避けたい間違い

公開前の確認項目

  1. html要素のlang属性が、ページの主な言語と一致しているか確認する。
  2. 引用、案内、ボタン文言などで言語が変わる箇所を洗い出す。
  3. 各箇所のlang属性が、言語の切り替わる範囲と一致しているか確認する。
  4. JavaScriptで追加または更新する内容にも、適切な言語が設定されるか確認する。
  5. 可能であればスクリーンリーダーで読み上げを聞き、言語の切り替えが意図どおりか確認する。

言語が切り替わる範囲に合わせて指定する

多言語コンテンツでは、ページ全体の言語を指定するだけでなく、途中で言語が変わる部分にもlang属性を付けます。
段落、引用、短い語句、動的な文章のそれぞれについて、実際の言語と指定範囲が一致しているかを確認してください。

Webアクセシビリティを継続して改善する

当社では、Webアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティウィジェットツールを提供しています。
アクセシビリティ向上にご興味がある方は、サービスの詳細をご覧ください。

モバイルバージョンを終了