画像の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属性が指定されていないこと』は同義ではない」とアナウンスしています。
以下がその違いです。
- alt属性が空の場合 :
alt属性が空でalt=""
と設定されている場合、画像は「装飾的」なものであり、視覚的に必要ではないとみなされます。そのため、スクリーンリーダーはこの画像をスキップし、内容を読み上げません。 - alt属性が指定されていない場合:
alt属性がまったく指定されていない場合、スクリーンリーダーは「この画像には説明が設定されていない」とみなし、画像ファイルのURLやファイル名をそのまま読み上げることもあります。説明があるべき画像には適切なalt属性が必要です。
アクセシビリティの観点からもalt属性の存在は重要であり、またそれ以上に大切なことに、検索エンジンもこの違いを理解し、内容を解釈する際に用いてます。
結論
alt属性は空(empty)でも構いません。
しかし最低限、必ずalt=""
は付与しておきましょう。