SYNCERのロゴ
アイキャッチ画像

alt属性 - area要素のハイパーリンクのテキスト

area要素のalt属性はハイパーリンクのテキストを意味します。ユーザーエージェントが領域が何を意味しているのか解釈するヒントとなります。href属性が存在する場合、この属性もセットで持たなければいけません。ただし同じmap要素内に同じ値のhref属性を持つ他のarea要素があり、かつ、その要素がalt属性を持っている場合は、省略してもかまいません。

概要

要素
area要素
DOM Interface
HTMLAreaElement.alt
仕様書
https://html.spec.whatwg.org/multipage/image-maps.html#attr-area-alt

画像が表示されない時に代わりに表示される、ハイパーリンクの代替テキスト。

<area alt="北海道の情報">

説明

alt属性にはリンクのテキストを指定します。例えば、日本地図画像に各都道府県のハイパーリンク領域を設定していく場合、alt属性にはその都道府県の名前を指定していくといいでしょう。

<map>
	<area href="http://www.pref.hokkaido.lg.jp/" alt="北海道">
	<area href="https://www.pref.aomori.lg.jp/" alt="青森県">
	<area href="http://www.pref.iwate.jp/" alt="岩手県">
</map>

同じmap要素内において、同じhref属性を持つ他のarea要素がalt属性を持っているなら、自身はalt属性を省略してかまいません。

<map>
	<!-- 本州の領域 -->
	<area href="http://www.pref.niigata.lg.jp/" alt="新潟県">

	<!-- 佐渡島の領域 (alt属性を省略) -->
	<area href="http://www.pref.niigata.lg.jp/">
</map>

デモ

alt属性を指定したデモです。この属性は、一般的なブラウザで人間が見る分には確認できません。検索エンジンなど、機械向けの属性と言えるでしょう。

<!-- このコードは編集できます。 -->

<img src="./image.png" usemap="#my-circle-01" width="200" height="200">
<map name="my-circle-01">
	<area shape="circle" coords="100,100, 50" href="https://syncer.jp/" target="_blank" alt="SYNCER">
</map>

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年9月18日 (月)
コンテンツを公開しました。