wataメモ

日々のメモをつらつらと書くだけ

[2][HTML]imgタグのalt属性

 imgタグのalt属性は入れた方が良いという話は昔から聞いていたが理由とかは意識していなかった。Web Accessibilityで紹介されていたYouTubeを見てみたところ、その辺の話が語られていた。英語なので動画の説明内容を簡単に以下に書いてみた。

alt属性は致命的ではないが、それなりに重要だとのこと。画像にはアイコン等の装飾系(情報を特に持っていない画像)とそれ自体がコンテンツの画像の2種類がある。視覚的に認識できないユーザの為に、すべての画像はテキストで提供されるべき。そこでalt属性が気の利いたテキストを提供すれば、スクリーンリーダとかで認識され、読み上げられる(例ではゴールデンブリッジの画像にalt="The Golden Gate Bridge."と書かれていてそれが読み上げられていた)。そしてalt属性がない場合だとスクリーンリーダは次に有用なファイル名(src属性)を読み上げる。しかし、そのファイル名が「901d3n9t3.jpg」等の画像サイズを自動的に縮小等して生まれた場合では残念な結果になる。装飾系の場合はどうするのか?alt属性は必須だが、空のalt属性を提供すれば、スクリーンリーダは特に読みあげないので問題無くなる。

  ふーむ。昔は「ネットワーク回線が細く、ブラウザの設定の「画像を読み込まない」チェックをするユーザもいるので、それように画像ボタンとかに「alt="登録"」と書いておけば、画像の代わりにテキストが表示されるので、ボタンが見えなくなることがない。」的な理由だった気がしていた。今は「画像を読み込まない」人は少数だろうが、スクリーンリーダ的な対応も意識する必要があるという事なのだろう。