Level AWCAG 2.2

3.1.1 ページの言語

ウェブページのデフォルトの自然言語がプログラムで解釈可能である。


なぜ重要か

スクリーンリーダー
lang属性がないと誤った言語エンジンで読み上げられ、内容が全く伝わりません。
多言語対応
ブラウザの翻訳機能や辞書ツールが正しく動作するために言語情報が必要です。
文字レンダリング
ブラウザは言語に応じて最適なフォントや文字間隔を選択します。
点字ディスプレイ
点字変換は言語によって規則が異なります。正しい言語指定が不可欠です。

ライブデモ

ページの言語指定とスクリーンリーダー

lang 属性なし
<!DOCTYPE html>
<html>
  <head><title>お知らせ</title></head>
  <body>
    <h1>お知らせ一覧</h1>
    <p>最新のお知らせです。</p>
  </body>
</html>
スクリーンリーダーの読み上げ

言語が不明 → デフォルト言語(例: 英語)で読み上げ

"oh-shee-rah-seh ee-chee-rahn"
※ 英語の発音規則で日本語テキストを読む

ペルソナで理解する

山田さん(28歳)— 全盲

スクリーンリーダーを使っていますが、lang属性がないサイトでは英語エンジンで日本語が読まれ、意味不明な発音が流れます。「おしらせ」が「oh-shee-rah-seh」になると何のことかわかりません。

チェックポイント

参考リンク