画像のimgタグに付与するalt属性は、アクセシビリティとSEOの観点から非常に重要な役割を果たします。
意味を持つ画像だけでなく、装飾的な画像にもalt属性を正しく設定することで、検索エンジンとスクリーンリーダーが画像を適切に解釈できるようになります。

alt属性の重要性とその役割

alt属性は、画像が持つ情報をテキストで伝えるためのもので、視覚障害者向けのスクリーンリーダーや検索エンジンが画像の内容を理解するために使用されます。
意味のある画像にはその内容に応じたalt属性を設定しますが、装飾的な画像にもalt属性は必須です。

仮にその画像が装飾目的で、何の意味もない画像だったとしても、必ずalt属性を付与しましょう。

NG例:

<img src="esample.jpg" width="20" height="20">

OK例:

<img src="esample.jpg" width="20" height="20" alt="">

さて。
上記の例を見て、「alt属性に何も入力されていないじゃないか?」と疑問を持ちましたか?

もし仮に、ウェブページのコンテンツに影響する「意味を持つ画像」だった場合は、次のようにalt属性に値を入力します。

<img src="esample.jpg" width="20" height="20" alt="新鮮な林檎と革新的なApple">

しかし何も意味のない画像だった場合は?

……答えは先に述べたとおり。

何の意味もない画像だったとしても、必ずalt属性を付与しましょう。

W3Cは公式に、「『alt属性が空(empty)であること』と『alt属性が指定されていないこと』は同義ではない」とアナウンスしています。

以下がその違いです。

  1. alt属性が空の場合 :
    alt属性が空でalt=""と設定されている場合、画像は「装飾的」なものであり、視覚的に必要ではないとみなされます。そのため、スクリーンリーダーはこの画像をスキップし、内容を読み上げません。
  2. alt属性が指定されていない場合:
    alt属性がまったく指定されていない場合、スクリーンリーダーは「この画像には説明が設定されていない」とみなし、画像ファイルのURLやファイル名をそのまま読み上げることもあります。説明があるべき画像には適切なalt属性が必要です。

アクセシビリティの観点からもalt属性の存在は重要であり、またそれ以上に大切なことに、検索エンジンもこの違いを理解し、内容を解釈する際に用いてます。

結論

alt属性は空(empty)でも構いません。
しかし最低限、必ずalt=""は付与しておきましょう。