Image maps: map, area, and usemap

Technical summary

Elements and association

Use the same name after the # in usemap and in the map's name:

<img src="island.png" width="480" height="240"
     alt="An island drawing with a mountain, station, and coast"
     usemap="#island-map">
<map name="island-map" id="island-map">
  <area shape="rect" coords="0,0,160,240"
        href="mountain.html" alt="Go to mountain information">
  <area shape="rect" coords="160,0,320,240"
        href="station.html" alt="Go to station information">
</map>

The image's alt says what the whole picture shows. Each linked area's alt names its destination or action. Keep the wording clear in the page's context.

Shapes, coordinates, and hit testing

If shape is missing or unrecognized, its missing/invalid-value default is the rectangle state. circ, rectangle, and polygon are not conforming keywords. Authoring requirements and the browser's processing of invalid coordinate input are different questions.

The HTML Standard hit-testing model accounts for stretching caused by CSS width and height. Browser zoom and CSS/SVG transforms do not transform the image-map coordinates. If the image is cropped or replaced with a different composition, check whether each link still covers the intended place.

When areas overlap, the first shape in tree order is on top. A pointing-device event goes to the topmost shape at that point, or to the img if no shape covers it. One map may be associated with more than one image. Image maps are live: after DOM changes, the browser processes them as if the relevant image-map processing steps ran again.

Accessible names and HTML-AAM

In the HTML Standard, the alt of a linked area supplies link text. The image's alt describes the picture; an area's alt describes the destination or action for that link. W3C WAI image-map guidance also calls for text alternatives for both the image and its linked areas.

The HTML-AAM 1.0 Editor's Draft (2026-07-29) maps an area with href to the link role, and an area without href to the generic role. This is a specification mapping. A browser's accessibility tree, an OS accessibility API, and a screen reader's speech are separate observation targets.

The HTML Standard says user agents may allow individual area links to be selected and activated with a keyboard or other means. The Chrome run below observed Tab and Enter in one setup; it does not establish behavior in every browser. For an important choice, provide regular text links nearby as another route.

DOM API and changes

HTMLMapElement.areas returns an HTMLCollection of descendant areas. An area exposes shape, coords, and alt IDL attributes. These reflected values are distinct from parsed geometry and from the content-attribute text.

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;     // number of areas in the map
map.areas[0].shape;   // "rect"
map.areas[0].coords;  // "0,0,160,240"

If one map is shared by multiple images, an area may correspond to more than one focusable area. When code changes the image, map association, area, or name/id, check the final DOM and the visible link regions again.

Fact and evidence

Evidence

1. HTML Living Standard: Image maps — map/area elements, reference, shape, coordinates, processing, and live updates
2. HTML Accessibility API Mappings 1.0 — area link/generic roles and accessible-name computation
3. W3C WAI: Image maps — text alternatives for the image and linked regions
4. Web Platform Tests: the-area-element — tests for area attributes, coordinates, and display boxes

Implementation evidence

The IMPL, WPT, and AAM rows below record only the checks made under their stated conditions. Partial means other browsers, tests, or platform accessibility APIs remain untested.

Coverage and open issues

• ReviewedImage/map association, name and id requirements, area shape/coordinate authoring rules, tree-order hit testing, and DOM APIs
• ReviewedHTML-AAM area roles and name computation; separate text alternatives for the image and its linked areas
• Partly observedOne Chrome 154 environment: image association, map.areas, mouse area selection, Tab order, and Enter activation. Firefox, Safari, and mobile browsers were not observed
• Selected tests onlyFour WPT files, 66 tests passed. The full area suite, other browsers, and related embedded-content tests were not run
• Partly observedChrome accessibility-tree image/link nodes and area names. Windows UI Automation, Narrator/NVDA, and other assistive technologies were not observed
• Not runCross-browser combinations of image resizing, CSS transforms, overlap, shared maps, and dynamic DOM changes

These browser, WPT, and accessibility-tree results do not prove full image-map conformance or the experience of every assistive-technology user. Treat the observed conditions and untested areas separately.

Related topics

For a beginner-friendly example, see image maps in Yugien. Image meaning, alt, and image fetching are covered by img and picture. Shared hyperlink behavior is covered by a. Image-map coordinates and overlap order have their own processing model.