html要素に言語が設定されているとは？lang属性の書き方・よくある誤り・診断基準

html要素に言語が設定されているとは

html要素に言語が設定されているとは、文書のルートである <html> 要素に lang 属性を付け、そのページの主な言語をブラウザや支援技術に伝えていることです。

<html lang="ja">

lang 属性の情報は、次のような場面で使われます。

• スクリーンリーダー：lang をもとに読み上げの発音規則を切り替えます。
• ブラウザの表示：フォントの選択（日本語と中国語で字形が異なる漢字の表示など）に使います。
• ブラウザの機能：自動翻訳の提案、ハイフネーションなどに利用します。

セキュリティAIチェッカーのこの項目は、トップページの <html> 要素に、空でなく形式の正しい lang 属性があるかを確認します。直接の脆弱性を判定する項目ではなく、公的機関のWebサイトとして求められるアクセシビリティの基本要件を「HTMLの基本衛生」として重み1で評価します。セキュリティ標準（ASVS、CWE）に直接対応する要件はありません。

html要素のlang属性はなぜ必要か（HTML仕様・WCAG・W3C）

HTML Living Standardでの位置付け

HTML Living Standardでは、lang 属性の値は有効なBCP 47言語タグか空文字列でなければならないとされています。空文字列は「言語不明」を意味します。また、xml:lang 属性はHTML文書（text/html）では効果がなく、使う場合は同じ値の lang 属性と併記しなければなりません。

WCAG 2.2 達成基準3.1.1「ページの言語」

WCAG 2.2の達成基準3.1.1（レベルA）は「それぞれのウェブページのデフォルトの自然言語は、プログラムによる解釈が可能である」ことを求めています。W3Cの解説は、言語が特定されていればスクリーンリーダーが正しい発音規則を読み込めることを意義として挙げています。

公的機関に求められる水準

総務省の「みんなの公共サイト運用ガイドライン（2024年版）」は、国・地方公共団体等の公的機関に対し、JIS X 8341-3:2016に基づく取組を求めており、公的機関は適合レベルAAへの準拠が求められます。達成基準3.1.1はレベルAのため、AA準拠を目標とする場合の前提条件になります。

W3C国際化（i18n）ガイダンスの推奨

W3Cの国際化ガイダンス「Declaring language in HTML」は、次のことを推奨しています。

• ページの既定言語を宣言するために、常に html 要素へ lang 属性を付けること
• text/html で配信するページでは、xml:lang だけに頼らず lang を使うこと
• ページの言語を示す目的で <meta http-equiv="Content-Language"> を使わないこと

lang属性の正しい書き方（言語タグ一覧と多言語対応）

言語タグの書き方

jp（国コードであり言語コードではない）、japanese、日本語、ja_JP（アンダースコア）は誤りです。

多言語対応での注意

自治体サイトでは、外国人住民向けに英語・中国語・韓国語・やさしい日本語などのページを用意することがあります。

• 各言語版のページでは <html lang> をその言語に合わせます。
• 日本語ページの一部に外国語が含まれる場合は、その部分の要素に lang="en" のように個別に指定します（達成基準3.1.2「一部分の言語」、レベルAA）。
• 自動翻訳サービスで表示する場合は、翻訳サービス側が lang を書き換えるかも確認します。
• 「やさしい日本語」のページは日本語なので lang="ja" です。ふりがな（ルビ）は <ruby> 要素で付け、言語の指定とは区別します。
• PDFで提供する外国語の案内は、HTMLの lang ではなくPDF側の文書言語プロパティで設定する必要があります。

html要素の言語についてよくある誤解

• 「xml:lang="ja" を付けているので大丈夫」：HTML文書では xml:lang は効果がありません。lang が必要です。
• 「HTTPの Content-Language ヘッダーで指定している」：W3Cは、ページの言語の宣言には lang 属性を使うよう推奨しています。
• 「日本語のサイトなのでブラウザが自動で判断する」：判断は保証されず、スクリーンリーダーが英語の発音規則で読み上げるなどの問題が起こり得ます。

同じ「HTML基本衛生」の項目として、ページの名前は「ページタイトルが設定されている」、文字コードの宣言は「文字コードが明示されている」で確認します。

html要素に言語が設定されているの診断基準（セキュリティAIチェッカー）

取得対象

• 診断URLへのGETで取得したトップページ（最終URL）のHTML本文（最大2MB）。
• JavaScriptで実行後に設定される lang は対象外です。

判定方法

1. 正規表現 <html\b[^<>]*?\slang\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'>]+))（大文字小文字を区別しない）で、<html> タグ内の lang 属性の値を取り出します。直前に空白が必要なため、xml:lang だけの場合は一致しません。引用符なし（lang=ja）にも対応します。
2. 取り出した値の前後の空白を除き、BCP 47の基本形式 ^(?:[a-z]{2,8}|[xi])(?:-[a-z0-9]{1,8})*$（大文字小文字を区別しない）に合うかを確認します。言語サブタグがIANAの登録簿に存在するかまでは確認しません。

判定条件

得点の読み方

重み1のlow項目のため、△でも総合スコアへの影響は小さく抑えられています。一方で、共通テンプレートの <html> タグを1か所直すだけで全ページが改善することが多く、修正の手間に対して効果が大きい項目です。形式チェックは「言語タグとして書式が正しいか」までで、値がページの実際の言語と一致しているかは判定できないため、外国語版ページを持つサイトでは各言語版のトップページも個別に診断することをお勧めします。

自治体サイトでの判定例

html要素に言語が設定されていないとどんなリスクがあるか

1. アクセシビリティ要件の不適合：スクリーンリーダーが誤った言語の発音規則で読み上げ、視覚障害のある住民が防災情報や手続案内を理解できなくなります。JIS X 8341-3:2016の試験で不適合となり、ウェブアクセシビリティ方針の表明内容と実態が食い違います。
2. 表示の不具合：言語が不明だと、ブラウザやOSの設定によっては漢字が中国語用の字形で表示されることがあります。
3. 自動翻訳の誤動作：ブラウザの翻訳機能が誤った元言語を想定し、外国人住民向けの案内が正しく翻訳されないことがあります。

セキュリティ上の直接の被害はありませんが、公的機関のサイトとしての品質と信頼性に関わるため、HTMLの基本衛生として確認します。

html要素に言語を設定する方法（HTML・CMS・WordPress・Next.js）

1. テンプレートの修正

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>○○市公式ホームページ</title>

XHTML形式のテンプレートを使い続ける場合は、xml:lang と同じ値の lang を併記します。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

外国語版のテンプレートでは、それぞれの言語タグを設定します。

<html lang="en">      <!-- English -->
<html lang="zh-Hans"> <!-- 简体中文 -->
<html lang="ko">      <!-- 한국어 -->

2. CMS・フレームワーク別の設定

• 一般的なCMS：共通テンプレート（ヘッダー部品）の <html> タグを修正します。言語別サイトを持つCMSでは、言語設定から lang を出力する変数があるか確認します。
• WordPress：テーマの header.php で次のように language_attributes() を使い、管理画面の「設定」→「一般」→「サイトの言語」を日本語にします。

<html <?php language_attributes(); ?>>

• Next.js（App Router）：ルートレイアウトで指定します。

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja">
      <body>{children}</body>
    </html>
  );
}

3. 静的HTMLの一括修正

静的HTMLが多数ある場合は、置換ツールで一括修正できます（事前にバックアップを取ります）。

# langのない<html>タグを一覧
grep -rLiE '<html[^>]*\slang=' --include='*.html' ./htdocs
# 単純な <html> を <html lang="ja"> に置換（日本語ページのみが対象であることを確認してから）
find ./htdocs -name '*.html' -exec sed -i 's/<html>/<html lang="ja">/I' {} +

4. 確認方法

curl -s https://www.city.example.lg.jp/ | grep -oiE '<html[^>]*>' | head -1

ブラウザの開発者ツールのコンソールで document.documentElement.lang が ja などの値を返すことを確認します。スクリーンリーダー（NVDA、VoiceOverなど）で実際に読み上げ、日本語として発音されるかを確認するとより確実です。

5. 受入検査・運用への組み込み

CMSのリニューアルや外部委託で新しいテンプレートが追加されると、lang が抜け落ちることがあります。仕様書と受入検査のチェックリストに「全テンプレートの <html> 要素に、ページの言語に合った lang 属性があること」を明記し、JIS X 8341-3:2016の試験（達成基準3.1.1）の結果とあわせて記録しておくと、再発を防げます。

サイトを壊さないための注意点

• 外国語版ページや多言語ページに一括置換で lang="ja" を付けないでください。誤った言語指定は、指定しない場合より読み上げを悪化させることがあります。
• CSSで :lang(ja) や [lang] セレクタを使っているサイトでは、lang の追加・変更で見た目が変わることがあります。主要テンプレートで表示を確認します。
• 一括置換は <html> タグの書き方が揃っていることを確認したうえで行い、置換後に件数を検証します。

よくある質問（FAQ）

参考資料

• HTML Living Standard「Semantics, structure, and APIs of HTML documents」（lang属性）
• W3C Understanding SC 3.1.1: Language of Page（WCAG 2.2）
• WAIC「WCAG 2.2 日本語訳」
• W3C Internationalization「Declaring language in HTML」
• 総務省「みんなの公共サイト運用ガイドライン」

「html要素に言語が設定されている」と関連する診断項目

• ページタイトルが設定されているlow
• 文字コードが明示されているlow
• 過大な初期HTMLを配信していないlow
• Content-Typeが明示されているmedium
• canonicalが安全なURLを指しているmedium
• Content-Typeと文字コードを全テキスト応答へ明示medium