ページの本文が日本語で書かれていても、HTMLで言語を正しく指定しなければ、その情報が支援技術へ適切に伝わらないことがあります。
lang属性は、ページや要素で使われている言語をHTML上で示すための属性です。
日本語のページでは、まず<html lang="ja">を設定します。
この記事では、JIS X 8341-3への対応で押さえておきたい言語指定の考え方を、ページ全体とページ内の一部に分けて説明します。
ページの言語指定が読み上げに与える影響
支援技術とは、ウェブコンテンツの利用を助けるソフトウェアや機器の総称です。
その一つであるスクリーンリーダーは、ページに指定された言語を読み上げ方の判断に利用します。
日本語の文章が英語として扱われると、日本語の語句が不自然な発音で読まれ、内容を聞き取りにくくなる可能性があります。
言語指定は画面の見た目を変えるための設定ではありません。
文章が何語で書かれているかを、ブラウザや支援技術へ伝えるための情報です。
ページ全体の言語を指定する方法
ページ全体の主な言語は、文書の起点となる<html>要素に指定します。
日本語のページなら、次のようにlang="ja"を設定します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アクセシビリティの基本</title>
</head>
<body>
<h1>アクセシビリティとは</h1>
<p>利用しやすいウェブページを設計します。</p>
</body>
</html>この例のjaは、ページ全体の言語が日本語であることを示します。
lang属性には、画面に表示されている文章の主な言語と一致する値を設定します。
ページ内の一部だけ言語が異なる場合
日本語のページ内に英語のまとまった表現がある場合は、その部分に英語の言語指定を加えます。
ページ全体のlang="ja"を変更するのではなく、言語が切り替わる要素へlang="en"を指定します。
<p>アクセシビリティは、
<span lang="en">web accessibility</span>
とも呼ばれます。
</p>この例では、<span>で囲んだ英語部分だけにlang="en"を設定しています。
それ以外の文章には、<html lang="ja">で指定した日本語が引き継がれます。
ページ内で言語が切り替わる箇所の考え方は、パーツごとの言語設定と多言語対応でも紹介しています。
よくある設定ミス
言語指定の問題は、属性の有無だけでなく、指定した値と実際の文章が一致しているかという点でも起こります。
実装時には、次の三つを確認します。
| 設定ミス | 起こり得る問題 | 修正方法 |
|---|---|---|
lang属性がない |
ページの主な言語が支援技術へ明示されません。 | <html>要素に主な言語を指定します。 |
| 言語コードが本文と異なる | 文章と合わない読み上げ方が選ばれる可能性があります。 | 日本語ならja、英語ならenのように、文章に合う値へ直します。 |
| 異なる言語の部分を指定していない | ページ全体と同じ言語として読まれ、発音が不自然になる可能性があります。 | 言語が切り替わる要素へ個別にlang属性を設定します。 |
実装後の確認手順
<html>要素にlang属性があるかを確認します。- 指定した言語コードが、ページ本文の主な言語と一致しているかを確認します。
- ページ内に別の言語で書かれた部分があれば、その要素の
lang属性を確認します。 - 可能であればスクリーンリーダーで読み上げ、言語が切り替わる箇所の発音を確かめます。
コード上で属性が付いていても、値が本文と合っていなければ意図した設定にはなりません。
実際の文章とHTMLの両方を照合することで、指定漏れや誤った言語コードを見つけやすくなります。
言語指定で押さえる要点
- ページ全体の主な言語は、
<html>要素のlang属性で示します。 - 日本語ページの基本形は
<html lang="ja">です。 - ページ内で言語が変わる部分には、その要素へ個別の
lang属性を設定します。 - 実装後は、属性の有無だけでなく、指定値と実際の文章が一致しているかを確認します。
本記事で扱ったのは、JIS X 8341-3への対応に関わる言語指定の基本です。
まずページ全体の言語を明示し、必要な箇所だけ部分的な指定を加えると、構造を整理しながら実装できます。
当社では、ウェブアクセシビリティ改善を支援するUUU ウェブアクセシビリティウィジェットツールを提供しています。
機能や導入方法は、サービスページでご確認ください。