alt 属性
よみ: オルトぞくせい
<img> タグに設定する「画像の代替テキスト」のことです。Web アクセシビリティの基本中の基本であり、主に以下の役割があります。
- 通信エラー等で画像が表示されない時、代わりにテキストを表示する。
- 視覚障害のあるユーザーが使う「スクリーンリーダー(音声読み上げソフト)」で読み上げられる。
- 検索エンジン(SEO)が画像の内容を理解するための、補助情報になる。
判断の基準
「もし画像が表示できなかった場合、そこにどんな文字が書いてあれば内容が通じるか」を想像すると、適切なテキストを作りやすくなります。
使い分けの勘所
- 見出し・ロゴ画像：意味を端的かつ正確に書く。
- 文字列画像：画像化されているテキストを、そのまま書く。
- 写真：「何が写っているか」よりも「なぜその写真を載せたか(伝えたい文脈)」を書く。
- リンク内の画像：「リンク先のページが何であるか」が分かる文にする。
- 装飾用・背景画像：
alt=""(空文字)にする。「画像」「写真」と入れると音声読み上げのノイズになるため注意。
よくある落とし穴（NG 例）
- 画像のファイル名(例：DSC_1234.jpg)を、そのまま放置する。
- CMSが自動生成したテキストをそのまま放置する(必ず手動で確認・書き換える運用に)。
- 必須欄を埋めるためだけに「-」や「.」などの記号を入れる。
- リンク画像の alt に「もっと見る」といった汎用語を使い、リンク先の意味が伝わらない。
- SEO 目的で不自然にキーワードを詰め込む(Google ガイドライン違反になります)。
- 見出し画像と装飾画像の判断を、制作業者に丸投げしてしまう。
言葉をよく利用する人
- コーダー / フロントエンドエンジニア
- デザイナー
- Web 担当者(発注側)
- SEO 担当者
- ライター / コピーライター
会話上での使用例
納品物の検収で、画像の代替テキストの書き方をコーダーに依頼する場面
-
Web 担当者
画像のalt 属性なんですが、飾りの画像と意味のある画像で書き分けてもらえますか。飾りのほうは中身を空にしてもらって大丈夫です。
-
コーダー
承知しました。判断に迷う画像もあるので、御社のルールを一枚にまとめてもらえると助かります。たとえばアイキャッチは意味あり、背景の模様は飾り、みたいに決めておければスムーズです。
-
Web 担当者
わかりました。こちらで基準表を用意してお渡ししますね。
ライターが代替テキストを空のまま公開する事故が続いている場面
-
Web 担当者
ライターさんが画像を投稿するとき、alt 属性を空っぽのまま公開してしまうことが続いていて困っています。
-
ディレクター
管理画面側で、入力が空だと公開できないようにチェックを入れましょう。飾り画像用に「装飾です」のチェックボックスを置いて、オンなら空でも許可、オフなら空はエラーにする二段構えにすれば、現場も迷わず運用できますよ。