alt属性

area要素のalt属性は、リンク領域の代替テキストを指定する任意属性。

ブラウザ対応

構文

<area href="URL" alt="代替テキスト">

代替テキスト

イメージマップが表示できなかったときに使う、リンクテキストを指定する。

指定要件

サンプルコード

alt属性を指定する必要がある場合

<img src="sample.png" usemap="#sampleImgMap">
<map name="sampleImgMap">
	<area shape="rect" coords="0,0,100,50" href="sample1.html" alt="サンプル１">
	<area shape="rect" coords="100,0,200,50" href="sample2.html" alt="サンプル２">
</map>

alt属性を省略できる場合

<img src="sample.png" usemap="#sampleImgMap">
<map name="sampleImgMap">
	<area shape="rect" coords="0,0,100,50" href="sample.html" alt="サンプル">
	<area shape="rect" coords="100,0,200,50" href="sample.html">
	<area shape="rect" coords="200,0,300,50" href="sample.html">
</map>

リンク先が同じ３つのarea要素のうち、２つ目と３つ目のarea要素のalt属性を省略している。

alt属性を指定してはいけない場合

<img src="sample.png" usemap="#sampleImgMap">
<map name="sampleImgMap">
	<area shape="rect" coords="0,0,100,50">
	<area shape="rect" coords="100,0,200,50">
</map>

サンプル

HTMLソースコード

<img src="sample-area.png" usemap="#sample-area-1">
<map name="sample-area-1">
	<area shape="circle" coords="50,50,40" href="http://html5.cyberlab.info" alt="ホーム">
	<area shape="rect" coords="110,10,190,90" href="http://html5.cyberlab.info/elements/" alt="要素">
	<area shape="polygon" coords="250,10,206,86,294,86" href="http://html5.cyberlab.info/elements/embedded/img.html" alt="img要素">
	<area shape="polygon" coords="350,10,315,30,315,70,350,90,385,70,375,30" href="http://html5.cyberlab.info/elements/embedded/map.html" alt="map要素">
</map>

実際の表示

ホーム 要素 img要素 map要素