alt 属性はウェブアクセシビリティの重要な要素であり主に視覚障害者のために画像の内容を説明するために使用されます。
ここでは、alt 属性を指定可能なすべての要素について詳しく解説します。
1. <img> 要素
img 要素は、ウェブページに画像を表示するための要素です。alt 属性は、この画像が表示されない場合や、スクリーンリーダーが画像を読み上げる際に使用されます。
<img src="image.jpg" alt="説明文">使用例:
- 商品画像
- 記事のサムネイル
- バナー広告
2. <area> 要素
area 要素は、イメージマップ内のクリッカブル領域を定義します。alt 属性は、イメージマップの各領域の説明を提供します。
<img src="map.jpg" usemap="#map">
<map name="map">
<area shape="rect" coords="34,44,270,350" href="page.html" alt="エリアの説明">
</map>
使用例:
- ナビゲーションマップ
- インタラクティブな地域図
- 画像内の特定のセクションリンク
3. <input type="image"> 要素
input 要素の type 属性が image に設定されている場合、この要素は画像ボタンとして機能します。alt 属性は、この画像ボタンの説明を提供します。
<input type="image" src="button.jpg" alt="送信ボタン">使用例:
- フォームの送信ボタン
- 検索ボタン
- カスタムナビゲーションボタン
まとめ
alt 属性は、ウェブアクセシビリティを向上させるために重要な役割を果たします。img、area、および input type="image" の各要素に対して適切に alt 属性を設定することで、視覚障害者がウェブコンテンツを理解しやすくなります。
また、検索エンジンのクロールや画像のインデックス作成にも役立ちます。
ウェブデザイン技能検定を目指す方は、これらの要素に alt 属性を適切に設定する方法を理解し、実際のプロジェクトで活用できるようにすることが重要です。
