The <map> Element
As defined in the HTML Living Standard, the <map> element, in conjunction with any <area> element descendants, defines a client-side image map. It is used to define multiple clickable areas on a single image.
<area shape="rect" coords="..." href="..." alt="...">
</map>
<img src="header.png" usemap="#nav-map" alt="...">
The <map> element requires a name attribute, which must match the usemap attribute on the image it is describing.
Programmatic Requirements
- The
nameAttribute: Must be present with a non-empty value. It is the ID used by the<img>element'susemapattribute to bind the map to the image. - Children: The content of the
<map>element typically consists of one or more<area>elements, which define the shapes and links. - Transparent Content: The
<map>element can contain other content besides<area>, which can be useful for providing a fallback list of links for browsers or devices that don't support the image map interface.
WCAG Requirement: Non-text Content
Success Criterion 1.1.1 (Level A): All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.
When using <map>, accessibility depends on the alt text of the <area> children. Sighted users see an image and know where to click. Blind users rely on the accessibility tree to list the interactive regions of that image. Without descriptive alt text on the areas, the "map" is invisible and unusable for assistive technology.
Best Practices
- Responsive Challenges: Traditional image maps use fixed pixel coordinates. They do not scale automatically with responsive images. In modern web design, consider using SVGs for complex clickable maps, as they are natively responsive and provide superior accessibility hooks.
- Logical Focus Order: Ensure the order of
<area>tags within the<map>follows a logical reading or navigation order (left-to-right, top-to-bottom), satisfying WCAG SC 2.4.3 (Focus Order).
A11y Tip: Visible Landmarks
Because clickable regions in a <map> are invisible until focused, they can be difficult for keyboard users to find. Always ensure that the browser's default focus ring is not suppressed, or use CSS to highlight the active area.