HTML
imgのalt属性エラー
alt属性が書かれていない
こんな症状
HTMLバリデーターやリンターでalt属性のエラーが出る。imgタグを書くときに忘れがちなポイントだよ。
まず試す
すべての <img> に alt 属性を付け、画像の内容を簡潔に説明する（装飾画像は alt=""）。
html
<img src="photo.jpg" alt="風景写真">これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓内容を伝える画像
→ alt="夕日の富士山" のように内容を簡潔に書く。 - ✓装飾だけの画像（罫線・背景等）
→ alt="" と空にする（読み上げから除外される）。 - ✓毎回付け忘れる
→ ESLintのjsx-a11yプラグインで自動警告できる。
なぜ起きる？
<img>タグにalt属性が書かれていないよ。alt属性は画像が表示できないときの代替テキストで、スクリーンリーダー（視覚障害者向けの読み上げソフト）がこのテキストを読み上げるんだ。アクセシビリティとSEOの両方の観点から必須とされているよ。
✕ エラーが起きるコード
<img src="photo.jpg">
<!-- alt 属性がない -->✓ 直したコード
<img src="photo.jpg" alt="風景写真">✅ 直ったか確認
Lighthouseやバリデーターで alt のエラーが消えればOK。
この解決法は役立ちましたか？
🔗 関連するエラー
- lang属性の未設定 — html要素にlang属性がない
- tabindex の順序が期待通りにならない — tabindexの順序が期待通りにならない
- 画像が表示されない — 画像パスが間違っている
- ページのレイアウトが崩れる — タグの閉じ忘れ
- リンクをクリックしても何も起きない — href 属性の書き忘れ
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
✏️ 手を動かして練習
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説