area要素：HTML Living Standard各要素別メモ

概要

カテゴリー

配置できる場所

上記カテゴリーの要素が置ける場所。ただし、祖先にmap要素がなければならない。

内容モデル

Void elementなので、内容はなし。

属性

グローバル属性
href→リンク先のURL
alt→ハイパーリンクを示すテキスト。href属性がある場合は必須で、その属性値を空にするのは原則禁止（イメージマップが機能しない場合の代替テキストたるリンクテキストとなるため）。href属性がない場合は省略しなければならない。
download→指定された場合は、リンク先がダウンロードされるべきファイルであることを示す。属性値を指定した場合は、それはダウンロードされるファイルのデフォルトファイル名になる。
ping→ピンの送信先のURL。半角スペース区切りで複数指定可。
referrerpolicy→値は下記のとおり。アクセス又はリソース読み込みのときのリファラーヘッダに関するポリシーを指定する。詳細は、Referrer Policyを参照。
- no-referrer→リファラーヘッダを削除し、リファラー情報を送信しない。
- no-referrer-when-downgrade→TLSで保護されたクライアントから信用に値し得ないURLへの送信の際は、リファラーヘッダを削除し、リファラー情報を送信しない。その他の場合は、リファラー情報を全部送信する。
- same-origin→非同一オリジンからの要請に対しては、リファラーヘッダを削除し、リファラー情報を送信しない。同一オリジンからの要請に対しては、リファラー用に削った全部情報を送信する。
- origin→ドメイン部分のみをリファラー情報として送信する（例：「https://example.com/example.html」からのアクセス→「https://example.com/」のみを送信）。
- strict-origin→TLSで保護されたクライアントから信用に値し得ないURLへの送信の際は、リファラーヘッダを削除し、リファラー情報を送信しない。その他の場合は、ドメイン部分のみをリファラー情報として送信する。
- origin-when-cross-origin→非同一オリジンからの要請に対しては、ドメイン部分のみをリファラー情報として送信する。同一オリジンからの要請に対しては、リファラー用に削った全部情報を送信する。
- strict-origin-when-cross-origin→TLSで保護されたクライアントから信用に値し得ないURLへの送信の際は、リファラーヘッダを削除し、リファラー情報を送信しない。その他の場合で、非同一オリジンからの要請に対しては、ドメイン部分のみをリファラー情報として送信する。その他の場合で、同一オリジンからの要請に対しては、リファラー用に削った全部情報を送信する。
- unsafe-url→リファラー用に削った全部情報を送信する。
rel→値は、rel属性値の表で「指定可」とされている値とその他。リンク先・リソースとの関係を示す。
target→値は下記のとおり。リンク先を開く場所を示す。
- _blank→別ウィンドウ又は別タブ。
- _top→入れ子の閲覧文脈の中で、当該要素が現在属している閲覧文脈の最上位の祖先の閲覧文脈。
- _parent→入れ子の閲覧文脈の中で、当該要素が現在属している閲覧文脈の親の閲覧文脈。
- _self→当該要素が現在属している閲覧文脈。
- その他妥当な閲覧文脈名→「_」（アンダースコア）で始まらない一文字以上の文字列。当該要素が現在属している入れ子の閲覧文脈の中又は当該要素が属していない既に開いている別ウィンドウ（もしくは別タブ）に該当する閲覧文脈名のものがあれば、そこに開く。それがなければ、当該閲覧文脈名にて別ウィンドウ又は別タブを開く。
shape→値は下記のとおり。area要素によって示される領域の形状を指定する。デフォルトは、rect
- rect→四角形。
- circle→円形。
- poly→多角形。
- default→画像全体。
coords→カンマ区切りの整数のリスト。shape属性によって与えられ形状の座標を示す。座標は、画像の上左隅を基点とし、そこからの距離をpx単位で表した「x,y」の組（xは横方向、yは縦方向）が基本。shape属性値がdefaultの場合は、指定禁止。それ以外の場合は必須。
- shape属性値がrectの場合→「x₁,y₁,x₂,y₂」。一番目の座標は領域となる四角形の上左隅、二番目の座標は領域となる四角形の下右隅。
- shape属性値がcircleの場合→「x,y,r」。「x,y」は領域となる円の中心の座標であり、rは領域となる円の半径。
- shape属性値がpolyの場合→「x_i,y_i」がカンマ区切りで3個以上。領域となる多角形のすべての点の座標を並べる。
href属性がない場合は、download、ping、referrerpolicy、rel、targetの各属性は省略しなければならない。
itemprop属性がある場合は、href属性は必須。

HTML構文におけるタグの省略

Void elementなので、終了タグはなし。ただし、開始タグの末尾をスラッシュで閉じてもよい（/>）。

WAI-ARIA

href属性が指定されている場合は、
- デフォルトroleは、link。デフォルトroleをrole属性値に指定することは、推奨されない。
- デフォルトrole以外のroleは、指定不可。
そうでない場合は、
- デフォルトroleは、generic。デフォルトroleをrole属性値に指定することは、推奨されない。
- デフォルトrole以外では、button、linkを指定可。

視覚系ブラウザのデフォルトとして期待されるCSS


  area {display: none;}

  :link {
    color :#0000EE;
    text-decoration: underline;
    cursor: pointer;
  }

  :visited {
    color: #551A8B;
    text-decoration: underline;
    cursor: pointer;
  }

  :link:active,
  :visited:active {
    color: #FF0000;
  }

ユーザーエージェントに対する特記事項

ダウンロードしたファイルのファイル名を設定する際には、download属性値は、Content-Disposition HTTPヘッダのファイル名パラメータで上書きできる。
href属性値が#topで参照先が見つからない場合、あるいは、#の場合は、当該HTML文書の先頭に移動する。
ping属性については、ユーザーの設定に従って、これを完全に又は選択的に無視してもよい。
ping属性がある場合は、ハイパーリンクをたどることで、ピンの送信が背後で行われることを明示すべきである。
download属性がある場合は、当該ファイルを保存する方法を提供すべきである。

意味・用法

href属性を持つ場合は、イメージマップ上のハイパーリンク領域を表す。

href属性を持たない場合は、イメージマップ上の無能領域を表す。

アクセシビリティ関連

ユーザーに予告せずに別ウィンドウ又は別タブを開くのは、アクセシビリティを妨げる（Techniques for WCAG 2.1 : G201, H83, F22）。
リンク先やリンクの目的が分かるようなリンクテキストとなるようにalt属性値を指定すべきである（Techniques for WCAG 2.1 : H24, G53, G91, H30, F84）。

私見・補足

ブラウザによっては、画像非表示時のalt属性値による代替テキストの表示はかなり不恰好。

よって、イメージマップの近くに、それと同等の機能を果たすa要素を適切に並べたリンク集を作成しておいた方がよい。

表示確認

map要素を参照。