イメージマップ — map・area・img usemap
Technical Summary
イメージマップは、imgに表示した1枚の画像へ、幾何学的な領域とリンクを対応付ける仕組みです。img usemapがmapを参照し、mapの子孫にあるareaが領域の形、座標、リンク先を表します。
仕様は画像の意味、領域の選択、areaリンクの意味を別の条件として定めます。ブラウザー上のクリック・キーボード操作・Accessibility Treeは、仕様上のmappingと分けて実測します。
要素と関連付け
| 部分 | 仕様上の役割・条件 |
|---|---|
img usemap | 画像要素のusemap値をhash-name referenceとして解析する。参照先がmapでなければ、画像はそのイメージマップと関連付かない。 |
map | 画像マップの名前付きコンテナ。name属性は空でない値を必須とし、同じDOM tree内の別のmapと重複できない。idを併記するときはnameと同じ値にする。 |
area | mapの子孫に置くvoid element。shapeとcoordsが領域を表す。hrefがあればhyperlinkとなり、altが必須。hrefがなければ選択できないdead areaで、altは指定しない。 |
| HTML DOM API | HTMLMapElement.name、HTMLMapElement.areas（子孫のareaを返すHTMLCollection）、HTMLAreaElement.shape、coords、alt。 |
基本の関連付けは次の通りです。usemapに#を付け、mapのnameと同じ参照名を指定します。
<img src="island.png" width="480" height="240"
alt="山、駅、海岸を示す島の図"
usemap="#island-map">
<map name="island-map" id="island-map">
<area shape="rect" coords="0,0,160,240"
href="mountain.html" alt="山の案内へ">
<area shape="rect" coords="160,0,320,240"
href="station.html" alt="駅の案内へ">
</map>この例のimgのaltは図全体が何を示すかを説明します。各リンク先を選ぶ名前は、それぞれのarea altで示します。別のリンク先でも、表示する文章や文脈で同じ選択肢が分かるようにします。
shape・coords・hit testing
| state | 適合する記述 | 座標の意味 |
|---|---|---|
rect | 4整数。適合するmarkupではx1 < x2、y1 < y2。 | 左上(x1,y1)と右下(x2,y2)。画像の左上からCSS pxで測る。 |
circle | 3整数。半径は0以上。 | 中心(x,y)と半径r。画像の左・上からCSS pxで測る。 |
poly | 6整数以上で偶数個。連続する2値が1点の(x,y)になる。 | 画像の左上からCSS pxで測った頂点を順に並べる。内部領域はeven-odd ruleで決まる。 |
default | coordsを指定しない。 | 画像全体を覆う長方形。 |
shapeの値がない、または認識できない場合のmissing / invalid value defaultはrectangle stateです。circ、rectangle、polygonは適合するキーワードではありません。実装側のprocessing algorithmが不正な座標列をどう扱うかと、作者が書くmarkupの適合条件は分けます。
HTML Standardのhit-testing modelでは、画像のCSS width・heightによる伸縮を反映して座標を画像上に配置します。ブラウザーのzoom機能やCSS / SVG transformは、その座標を変換しません。図を切り抜いたり別構図へ差し替えたりした場合に、意味のある領域へリンクが残るかは別途確認が必要です。
複数のareaが重なると、tree orderで先にあるshapeが上に重なります。pointing deviceの操作イベントは、点を覆う最上位のshapeへ送られ、shapeがなければimgへ送られます。mapは複数のimgに関連付けられ得ます。DOMの変更後も画像マップはliveであり、user agentは処理モデルを再実行したかのように扱います。
Accessible nameとHTML-AAM
HTML Standardでは、hyperlinkを持つareaのaltがlink textになります。画像のaltは図の情報を説明し、areaのaltはその領域で選べる移動先・操作を説明します。W3C WAIのImage Maps guidanceも、imgと各リンク領域の両方に別々のtext alternativeを求めます。
HTML-AAM 1.0 Editor's Draft（2026-07-29）のrole mappingでは、hrefを持つareaはlink role、hrefを持たないareaはgeneric roleです。これはspecification mappingです。実際のAccessibility Tree、OS platform API、screen readerの発話を同一の結果として扱いません。
HTML Standardは、user agentが個々のarea hyperlinkをキーボード等で選択・実行できるようにする場合があると記述します。後述のChrome実測ではTabとEnterを確認しましたが、この1環境から全browserの入力動作を一般化しません。選択肢が重要な図では通常のテキストリンクも近くに用意すると、図の場所だけに依存しない経路になります。
DOM APIと変更
HTMLMapElement.areasはmapの子孫にあるareaのHTMLCollectionを返します。areaのshape・coords・altはIDL attributeとして公開されます。IDLで読む値と、HTML content attributeの文字列、座標処理後のgeometric shapeは別の層です。
const image = document.querySelector("img[usemap]");
const map = document.querySelector("map[name='island-map']");
image.useMap; // "#island-map"
map.name; // "island-map"
map.areas.length; // map内のarea数
map.areas[0].shape; // "rect"
map.areas[0].coords; // "0,0,160,240"一枚のmapを複数のimgで共有すると、同じareaが複数のfocusable areaに対応し得ます。画像やmapの関連付け、area、name / idが動的に変わる実装では、DOMの最終状態と視覚上の対応を再確認します。
Fact / Evidence
| 種別 | 主張 | 条件・範囲 | 状態 | 根拠 |
|---|---|---|---|---|
| SPEC | img usemapはhash-name referenceからmapを解決し、area子孫を画像領域として処理する。 | 画像・map・areaの関連付け。参照先が解決しない場合はmap関連付けなし。 | 仕様確認済み | HTML Standard: Image maps |
| SPEC | areaのshape state、coords適合条件、areaとmapのDOM APIはHTML Standardで定義される。 | rect / circle / poly / default、name・areas、href・alt条件。作者適合条件と不正入力のprocessingを分ける。 | 仕様確認済み | map · area |
| AAM | hrefありのareaはlink role、hrefなしはgeneric roleに対応する。areaのname computationはARIA naming、alt、titleの順で確認する。 | HTML-AAM 1.0 Editor's Draft mapping。個別user agentのAccessibility Treeとplatform APIは別の実測対象。 | 仕様確認済み | HTML Accessibility API Mappings 1.0 |
| WPT | 選定したarea座標・processing・shape・box model testをChromeで実行した。 | 実行ファイル、pass数、Harness status、環境は下記Implementation Evidenceに限定して記録。 | 選定範囲を実行 | WPT: the-area-element |
Evidence
- HTML Living Standard: Image maps — map・area要素、hash-name reference、shape・coords、処理順、live update
- HTML Accessibility API Mappings 1.0 — areaのlink / generic roleとaccessible name computation
- W3C WAI: Image Maps — 画像とリンク領域それぞれのtext alternative
- Web Platform Tests: the-area-element — area attribute・座標・表示boxに関するtest directory
Implementation Evidence
次のIMPL・WPT・AAM行は、各条件で直接確認した部分だけを記録します。partialは未調査のbrowser、test、platform accessibility APIが残ることを示します。
| 種別 | 観測範囲 | 条件・記録 | 状態 |
|---|---|---|---|
| IMPL | img usemap association, HTMLMapElement.areas, mouse hit testing, Tab order, and Enter activation |
2026-09-27 / Chrome UA 154.0.0.0 / Windows NT 10.0.26200.0 / DPR 1.25 / viewport 870×716 / local image-map-v1 fixture. The 480×240 image resolved useMap="#atlas-map"; map.areas.length was 3 and all entries were HTMLAreaElement rectangles with coordinates 0,0,160,240, 160,0,320,240, and 320,0,480,240. Mouse clicks in the first and third areas targeted the corresponding area. Tab focused Mountain, Station, and Coast in order; Enter on Mountain fired its click handler. The fixture prevented navigation. Other browsers and input configurations were not observed. |
部分観測（Chrome 154 / 1環境） |
| WPT | Selected the-area-element processing, shape, offset, and coordinate test files |
2026-09-27 / Chrome UA 154.0.0.0 / Windows NT 10.0.26200.0 / public wpt.live runner; upstream commit not pinned. All four Harness results were OK: area-processing.html 14/14, area-shape.html 17/17, area-offsets.html 3/3, and area-coords.html 32/32; 66 selected tests passed, zero failed. The full directory and other browsers were not run.実測時のテスト版は未記録です。リンク先の内容は変わることがあり、当時と同じテストで再確認できるとは限りません。 |
部分実行（選定66 tests pass） |
| AAM | Chrome accessibility-tree exposure, image description, linked-area names, and fragment destinations | 2026-09-27 / Chrome UA 154.0.0.0 / Windows NT 10.0.26200.0 / local image-map-v1 fixture. Chrome Accessibility Tree exposed the image as a container with the image description and three descendant links named “Mountain information”, “Station information”, and “Coast information”, with matching fragment URLs. The HTML-AAM 1.0 Editor’s Draft (2026-07-29) maps area[href] to link and an area without href to generic. Windows platform accessibility APIs, Narrator/NVDA, and other browsers were not observed; a Chrome tree snapshot is not a platform API result. 作成後のYugien日本語ページ（viewport 1280×720 CSS px、DPR 1.25）では、Chrome Accessibility Treeに画像と近くの3つの通常リンクが表示された一方、areaの3つの名前は独立したlink nodeとして表示されなかった。同じfigure・img usemap・map・areaと近くの通常リンクを持つ比較fixtureではarea link nodeも表示された。この差の理由は未確認。 |
部分観測（Chrome Accessibility Tree） |
Coverage / Open Issues
- 仕様確認済みimgとmapの関連付け、name / id条件、area shape / coordsの作者条件、hit-testingのtree order、DOM API
- 仕様確認済みHTML-AAMのarea roleとname computation。WAI guidanceに基づくimg / areaそれぞれのtext alternative
- 部分観測済みChrome 154の1環境で画像対応、map.areas、マウス領域選択、Tab順、Enter activationを確認。Firefox・Safari・mobile user agentは未観測
- 選定範囲のみ実施WPT 4ファイル、66 tests pass。the-area-element全suite・全browser・他のembedded-content testは未実施
- 部分観測済みChrome Accessibility Treeのimage / link nodeとarea nameを確認。Windows UI Automation、Narrator / NVDA等の支援技術は未観測
- 未実施画像resize・CSS transform・overlap・map共有・動的DOM変更を組み合わせたbrowser間比較
ここに示すブラウザー、WPT、Accessibility Treeの結果は、イメージマップ全体の適合性や全利用者の支援技術体験を証明しません。実測条件と未実施範囲を分けて扱います。
Related surface
初心者向けの例はYugienのイメージマップページを参照してください。画像のalt、取得、画像候補はimgとpicture、areaから作られるhyperlinkの共通処理はaで扱います。これらは関連しますが、画像領域の座標・重なり順はイメージマップ固有のprocessing modelです。