alt
初級読み方：オルト｜英語：Alt
画像が表示できないときの代替テキストで、img タグに必ず書くよ。いつ使う？ <img>タグを書くときは毎回alt属性を追加しよう。「この画像が見えない人に何を伝えたいか」を書くよ。間違いやすいポイント: alt="画像"のような意味のない説明はNG。「プロフィール写真」「商品の外観」など具体的に書こう。装飾用の画像はalt=""と空にするよ。
やさしい説明
alt（オルト）属性とは、画像が表示できないときに代わりに表示されるテキストです。「alternative（代替）」の略です。
ネットが遅くて画像が読み込めないとき、altに書いた文字が表示されます。「ここに何の画像があるか」を言葉で伝える役割です。
目の不自由な方が使うスクリーンリーダー（読み上げソフト）は、altテキストを声で読み上げます。altがないと「画像」としか伝わりません。
検索エンジン（Google等）も画像の内容をaltで判断します。SEO（検索順位の最適化）にも重要です。
具体例・使い方
<!-- ✅ 内容を説明する画像 → 具体的に書く -->
<img src="fuji.jpg" alt="雪をかぶった富士山">
<!-- ✅ 装飾用の画像 → 空にする -->
<img src="decoration.png" alt="">
<!-- ❌ ファイル名をそのまま書くのはNG -->
<img src="IMG_0234.jpg" alt="IMG_0234.jpg">いつ使う？
imgタグを書くときは必ずaltを付けます。文化祭のWebサイトに写真を載せるとき、「クラスの集合写真」「模擬店の看板」のように内容を書きましょう。
間違いやすいポイント
❌ altを省略する
altがないとアクセシビリティ違反になります。Lighthouseでも警告が出ます。
❌ 「画像」「写真」とだけ書く
「何の画像か」が伝わりません。「校庭で遊ぶ生徒たち」のように具体的に書きましょう。
よくある疑問
Q: altは必ず書く必要がある？
A: はい。imgタグにはalt属性を必ず書きましょう。装飾用の画像はalt=""と空にします。書かないとアクセシビリティの警告が出ます。
Q: altに何を書けばいい？
A: 画像の内容を簡潔に説明します。例: alt="夕日に照らされた富士山" alt="送信ボタン"。長すぎず、画像が見えない人に伝わる内容にしましょう。
Q: altを書かないとどうなる？
A: スクリーンリーダーがファイル名を読み上げてしまい、視覚障害のあるユーザーに意味が伝わりません。SEOにも悪影響です。
関連用語
📖 関連レッスン
レッスンを見る →