HTML
lang属性の未設定
html要素にlang属性がない
こんな症状
Lighthouseで「html element does not have a [lang] attribute」と出る。アクセシビリティ対応で見落としやすいポイントだよ。
まず試す
<html lang="ja"> のように html タグに言語コードを付ける（日本語は ja、英語は en）。
html
<html lang="ja">
<head>...</head>
</html>これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓日本語のページ
→ <html lang="ja"> にする。 - ✓英語のページ
→ <html lang="en"> にする。 - ✓ページの一部だけ別言語
→ その部分に lang を付ける（<span lang="en">Hello</span>）。
なぜ起きる？
htmlタグにlang属性が設定されていないよ。スクリーンリーダーはlang属性を見てページの言語を判定し、適切な音声エンジンで読み上げるんだ。lang属性がないと、英語の音声エンジンで日本語を読み上げようとして正しく発音できないよ。
✕ エラーが起きるコード
<html><head>...</head></html>
<!-- lang なし -->✓ 直したコード
<html lang="ja"><head>...</head></html>✅ 直ったか確認
Lighthouseを再実行して [lang] の警告が消えればOK。
この解決法は役立ちましたか？
🔗 関連するエラー
- imgのalt属性エラー — alt属性が書かれていない
- セマンティックHTMLでアクセシビリティ警告 — 見出しの階層が飛んでいる
- tabindex の順序が期待通りにならない — tabindexの順序が期待通りにならない
- 画像が表示されない — 画像パスが間違っている
- ページのレイアウトが崩れる — タグの閉じ忘れ
📖 この問題を学べるレッスン
✏️ 手を動かして練習
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説