alt 属性
よみ: オルトぞくせい
<img> タグに付ける画像の代替テキスト。画像が表示されない時にその位置に表示され、視覚障害ユーザーのスクリーンリーダーで読み上げられる。SEO の画像理解の補助情報としても使われる、Web アクセシビリティの基本中の基本。
本書のスタンス(Lesson 4-5)は「画像が表示できなかった場合に、その場所に文字として書いたら通じるか」を判定基準にすると間違えにくい。装飾用画像は alt=""(空文字)で問題ない、というルールも合わせて押さえる。装飾画像に「画像」「写真」のような無意味な alt を入れると、支援技術ではノイズになる。
担当者の観点:見出し的な画像(ロゴ・大型バナー)は意味を端的に・装飾的な背景画像は alt=""・リンクの中の画像はリンク先を表す文・写真は「何の写真か」より「なぜ載せたか」。文字列画像(テキストを画像化したもの)は alt にそのテキストをそのまま書く。CMS の自動生成代替テキストは必ず手動で書き換える運用にする。
落とし穴は、画像のファイル名(DSC_1234.jpg)や CMS 自動生成テキストを放置、装飾画像にも意味のない alt(画像 / 写真 / イメージ)、SEO のためにキーワードを詰め込み(Google ガイドライン違反)、CMS の必須欄を埋めるためだけに「-」「.」、リンク画像の alt が「もっと見る」のような汎用語で支援技術に意味が伝わらない、見出し画像と装飾画像の判断を業者任せ。
言葉をよく利用する人
- コーダー / フロントエンドエンジニア
- デザイナー
- Web 担当者(発注側)
- SEO 担当者
- ライター / コピーライター
会話上での使用例
業者納品の検収で alt 属性をチェックする場面
-
Web 担当者
画像のalt 属性、装飾画像と意味画像で書き分けてもらいたいです。装飾は alt="" でお願いします
-
コーダー
了解です。判断基準の表を出してもらえると助かります。「アイキャッチは意味画像、背景パターンは装飾」など、自社ルールを 1 枚にしてください
CMS で投稿者が alt を入れずに公開する事故が続いた場面
-
Web 担当者
ライターが画像投稿時に alt 属性を空のまま公開してしまいます
-
ディレクター
管理画面で alt 必須化のバリデーションを追加しましょう。装飾画像用に「装飾です」チェックボックスを置いて、ON なら alt="" を許可、OFF なら空文字 NG、の二段構えで