alt
初級読み方：オルト｜英語：Alt
画像が表示できないときの代替テキストで、img タグに必ず書くよ。
やさしい説明
alt（オルト）属性とは、画像が表示できないときに代わりに表示されるテキストです。「alternative（代替）」の略です。
ネットが遅くて画像が読み込めないとき、altに書いた文字が表示されます。「ここに何の画像があるか」を言葉で伝える役割です。
目の不自由な方が使うスクリーンリーダー（読み上げソフト）は、altテキストを声で読み上げます。altがないと「画像」としか伝わりません。
検索エンジン（Google等）も画像の内容をaltで判断します。SEO（検索順位の最適化）にも重要です。
具体例・使い方
<!-- ✅ 内容を説明する画像 → 具体的に書く -->
<img src="fuji.jpg" alt="雪をかぶった富士山の写真">
<!-- ✅ 装飾用の画像（意味のない背景など）→ 空にする -->
<img src="decoration.png" alt="">
<!-- ✅ ボタンやリンクの中の画像 → 操作の目的を書く -->
<a href="/search"><img src="search-icon.svg" alt="検索"></a>
<!-- ❌ ファイル名をそのまま書くのはNG -->
<img src="IMG_0234.jpg" alt="IMG_0234.jpg">
<!-- ❌ 「画像」「写真」だけもNG（内容が伝わらない） -->
<img src="school.jpg" alt="写真">良いaltテキストの書き方
- 内容を具体的に — 「犬の写真」ではなく「公園でボールで遊んでいる柴犬」
- 文脈に合わせて — 料理ブログなら「クリーミーなカルボナーラのアップ写真」のように料理の特徴を書く
- 装飾画像は空に —
alt=""を書くことでスクリーンリーダーがスキップする - 「画像」「写真」の冗長な言葉は不要 — スクリーンリーダーは既に「画像：〇〇」と読むので重複しない
- 長くなりすぎない — 目安は125文字以内。長い説明が必要なら本文や figcaption に書く
altが必要な3つの理由
- アクセシビリティ — 視覚障害のある方がスクリーンリーダーで画像の内容を理解できる
- 画像読み込み失敗時 — 通信障害や画像ファイルの削除時に代替テキストが表示される
- SEO — Googleなどの検索エンジンは画像を「読む」ことができないため、altで内容を把握する
Google の Lighthouse（パフォーマンス計測ツール）では、alt属性がない画像は「アクセシビリティ違反」として警告が出ます。Web制作では必須の対応です。
いつ使う？
imgタグを書くときは必ずalt属性を付けます。内容を伝える画像には具体的な説明を、純粋な装飾画像には空文字（alt=""）を指定するのがルールです。alt属性を省略すること自体がアクセシビリティ違反になります。
間違いやすいポイント
❌ altを省略する
altがないとアクセシビリティ違反です。装飾画像でも alt="" と空で書く必要があります。省略と空は別物です。
❌ 「画像」「写真」とだけ書く
「何の画像か」が伝わりません。「校庭で遊ぶ生徒たち」のように具体的な内容を書きましょう。キーワードを含めるとSEOにも効果的です。
よくある疑問
Q: altは必ず書く必要がある？
A: はい。imgタグにはalt属性を必ず書きましょう。装飾用の画像はalt=""と空にします。書かないとアクセシビリティの警告が出ます。
Q: altに何を書けばいい？
A: 画像の内容を簡潔に説明します。例: alt="夕日に照らされた富士山" alt="送信ボタン"。長すぎず、画像が見えない人に伝わる内容にしましょう。
Q: altを書かないとどうなる？
A: スクリーンリーダーがファイル名を読み上げてしまい、視覚障害のあるユーザーに意味が伝わりません。SEOにも悪影響です。
関連用語
📖 関連レッスン
レッスンを見る →