HTML Living Standard/area

area 要素

<area> 要素は、クライアントサイドイメージマップ内で特定の領域を定義します。この要素は、リンク先やインタラクティブエリアを指定するために使用されます。

カテゴリ

• フローコンテンツ
• フレージングコンテンツ

使用される文脈

• <map> 要素の子要素として使用されます。

コンテンツモデル

• 空要素（内容を持ちません）。

タグの省略

• 開始タグと終了タグは必須です（空要素として使用されます）。

属性

<area> 要素には以下の属性が使用できます：

• グローバル属性 — すべてのHTML要素で共通の属性。
• alt — 領域の代替テキスト。アクセシビリティのために必須。
• coords — 領域の形状に対応する座標を指定。
• shape — 領域の形状を指定（デフォルトは rect）。
  • rect — 矩形
  • circle — 円形
  • poly — 多角形
  • default — 画像全体
• href — 領域がリンクする先のURL。
• target — リンク先を開くターゲット（例: _self, _blank, _parent, _top）。
• download — ダウンロード可能なリソースを指定。
• ping — リンククリック時に通知を送るURLのリスト。
• rel — リンクの関係性を指定。
• referrerpolicy — リンククリック時のリファラーポリシーを指定。

使用例

基本的な使用例

以下は、<map> 要素と <area> 要素を使用したクライアントサイドイメージマップの例です。

<img src="example.jpg" usemap="#example-map" alt="Example Image">
<map name="example-map">
  <area shape="rect" coords="0,0,100,100" href="https://example.com/section1" alt="Section 1">
  <area shape="circle" coords="150,150,50" href="https://example.com/section2" alt="Section 2">
  <area shape="poly" coords="200,200,250,250,300,200" href="https://example.com/section3" alt="Section 3">
</map>

属性の詳細

1. alt 属性
   • 領域の説明を記述します。スクリーンリーダーなどの支援技術に重要です。
2. coords 属性
   • 領域の形状を定義する座標を指定します。形状によって座標の形式が異なります。
     • 矩形 (rect) — x1,y1,x2,y2
     • 円形 (circle) — x,y,r（中心座標と半径）
     • 多角形 (poly) — x1,y1,x2,y2,...（頂点のリスト）
3. shape 属性
   • 領域の形状を指定します。デフォルトは rect。
4. href 属性
   • 領域がリンクするURLを指定します。

アクセシビリティの考慮事項

• 代替テキスト (alt) の提供
  • 各 <area> 要素には必ず alt 属性を設定してください。これにより、支援技術を利用するユーザーにもリンクの目的が伝わります。
• フォーカス管理
  • <area> 要素はフォーカス可能であり、キーボードユーザーがアクセスできるようにする必要があります。

非推奨の使用法

• イメージマップは、特にモバイルデバイスではタップ領域が狭くなるため、慎重に設計してください。
• モダンなWebアプリケーションでは、SVGやCSSを使用してインタラクティブ領域を実現する方法も検討してください。

関連仕様

• HTML Living Standard - area
• MDN Web Docs - area

参考情報

• クライアントサイドイメージマップは、画像内の特定領域をクリック可能にする方法として便利です。
• アクセシビリティを考慮し、alt 属性を適切に設定してください。