The <area> Element
The <area> element defines a hot spot region on an image, and optionally associates it with a hypertext link. This element is used exclusively inside a <map> element.
Imagine an image of a keyboard where clicking each key takes you to a different documentation page. Each "key" region would be defined by an <area> tag.
<map name="keyboard-map">
<area shape="rect" coords="0,0,50,50" href="keys/esc.html" alt="Escape Key">
<area shape="circle" coords="100,100,20" href="help.html" alt="Help Center">
</map>
<img src="keyboard.jpg" usemap="#keyboard-map" alt="A mechanical keyboard layout">
View HTML Living Standard: The area element
Accessibility Requirements: The Alt Attribute
When an <area> element has an href attribute, the alt attribute is mandatory. It must describe the destination of the link.
WCAG Requirement: Text Alternatives
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.
Because <area> regions are invisible to screen reader users, the alt text is the only way they can understand where the link leads.
Usage & Best Practices
- Link Purpose: Like standard anchors, the
alttext should be descriptive enough to satisfy WCAG SC 2.4.4 (Link Purpose). Avoid generic terms. - Shapes: Valid shapes include
default(the entire image),rect,circle, andpoly. - No Content: The
<area>element is a void element; it has no closing tag and cannot contain child nodes.
A11y Tip: Modern Alternatives
Image maps can be difficult to make fully responsive and accessible. In modern web development, using CSS-positioned <a> tags or SVG maps is often preferred over the <map> and <area> approach.