More than 3 years have passed since last update.

imgタグへalt属性付与の考察

Posted at 2022-04-21

はじめに

2022年4月21日午後7:37¹、teratailでプロフィール画像を取得できない障害が置きました。

imgタグのalt属性について少し考えたことを書きます。

次が障害の起きた画面になります。プロフィール画像にimgタグの代替テキストが表示されました。

imgタグにalt属性を付けることはSEO対策でほとんど必須となっています。障害が置きないとalt属性には表示上の意味がありません。障害が置きてalt属性が表示上の意味を持ちました。

alt属性を付けなければ次の画面になります。デベロッパーツールを使いました。

エラー用の画像が表示されたことで画像取得の際にエラーが起きたことが分かります。レイアウトを無視した代替テキストが表示されなくなっています。

alt属性を付けないほうが良かったのではないでしょうか？SEO対策で付けることが必須だと思いますが。

画像を表示できないブラウザでアクセスした際に代替テキストを表示することが良いとされていますが、そのようなブラウザを知りません。どのブラウザを想定していますか？²ブラウザを知らないと画面確認ができません。そのブラウザを日常的に使う人はいるのでしょうか？画像を表示しないブラウジングは考えられません。

飛躍しますが解決策です。SEO対策でalt属性を記述した後、次のCSSを使えばいいと思いました。

img {
    overflow: hidden;
    font-size: 0;
}

視覚障害者のために音声を読み上げるソフトがalt属性のテキストを使えますし、画像を取得できない障害が置きたときにも代替テキストを非表示にできます。

障害の起きた画面にびっくりして少し考えたところ、imgタグのalt属性について考えてみました。

解決策のCSSを実戦投入したわけではありませんが、障害時の緩和策として投入することを検討してみてはいかがでしょうか。