<area> tag in HTML: The <area> tag is used in conjunction with the <map> tag to define clickable areas within an image map in HTML. It allows you to create image maps, where different regions of an image can act as separate clickable links. Here's how the <area> tag works:
<area shape="shape" coords="coordinates" href="URL" alt="alternate_text">
Attributes:
shape: Specifies the shape of the clickable area. It can be one of the following values:rect: Defines a rectangular area.circle: Defines a circular area.poly: Defines a polygonal area (requires additionalcoordsattribute).
coords: Specifies the coordinates of the clickable area. The format of the coordinates varies based on the shape.- For
rect, it'sx1,y1,x2,y2(top-left and bottom-right coordinates). - For
circle, it'sx,y,r(center coordinates and radius). - For
poly, it's a list ofx,ycoordinates for each point of the polygon.
- For
href: Specifies the URL that the area links to.alt: Provides alternate text for the area, which is typically displayed when the image fails to load or for accessibility purposes.
Example:
<img src="image.jpg" usemap="#exampleMap" alt="Clickable Image">
<map name="exampleMap">
<area shape="rect" coords="0,0,100,100" href="page1.html" alt="Link 1">
<area shape="circle" coords="200,200,50" href="page2.html" alt="Link 2">
<area shape="poly" coords="300,100,400,200,350,300" href="page3.html" alt="Link 3">
</map>
In this example:
- An
<img>tag displays an image (image.jpg) with an associated image map (exampleMap). - Three
<area>tags define clickable areas within the image using different shapes (rect,circle, andpoly). - Each
<area>specifies coordinates, a destination URL (href), and alternate text (alt) for accessibility.
Syntax and Attributes
Here's the syntax and commonly used attributes for the <area> tag in HTML:
<area shape="shape" coords="coordinates" href="URL" alt="alternate_text">
Attributes:
shape: Specifies the shape of the clickable area. It can be one of the following values:rect: Defines a rectangular area.circle: Defines a circular area.poly: Defines a polygonal area (requires additionalcoordsattribute).
coords: Specifies the coordinates of the clickable area. The format of the coordinates varies based on the shape:- For
rect, it'sx1,y1,x2,y2(top-left and bottom-right coordinates). - For
circle, it'sx,y,r(center coordinates and radius). - For
poly, it's a list ofx,ycoordinates for each point of the polygon.
- For
href: Specifies the URL that the area links to.alt: Provides alternate text for the area, typically displayed when the image fails to load or for accessibility purposes.
Example:
<area shape="rect" coords="0,0,100,100" href="page1.html" alt="Link 1">
<area shape="circle" coords="200,200,50" href="page2.html" alt="Link 2">
<area shape="poly" coords="300,100,400,200,350,300" href="page3.html" alt="Link 3">
In this example:
- Three
<area>tags define clickable areas within an image map. - Each
<area>specifies the shape (shape), coordinates (coords), destination URL (href), and alternate text (alt) for accessibility.
Accessibility Considerations
Accessibility considerations for the <area> tag primarily focus on ensuring that clickable areas within an image map are usable and understandable by all users, including those with disabilities. Here are some accessibility considerations:
Clear and Descriptive Text: Provide descriptive and meaningful alternate text (alt) for each <area> tag. This text should accurately describe the function or destination of the clickable area to users who may not be able to view the image or use a mouse.
Keyboard Accessibility: Ensure that clickable areas defined by <area> tags are accessible via keyboard navigation. Users should be able to navigate to and activate each area using only the keyboard, without relying on mouse interaction.
Visible Focus Indicator: Ensure that a visible focus indicator is provided for keyboard users when they navigate to a clickable area. This helps users understand which area is currently focused and ready to be activated.
Sufficient Clickable Area Size: Ensure that clickable areas are large enough to be easily targeted and activated by users, especially those with motor disabilities or who may have difficulty with fine motor control.
Provide Context: Ensure that each clickable area within the image map has sufficient context or surrounding content to help users understand its purpose or function. This can include additional text or visual cues.
Test with Assistive Technologies: Test the image map, including its clickable areas defined by <area> tags, with assistive technologies such as screen readers and keyboard navigation tools. Ensure that all areas are accessible and understandable to users with disabilities.
Use Accessible Shapes: When defining clickable areas with the shape attribute, consider using shapes that are easily distinguishable and accessible to users with various disabilities. Avoid overly complex shapes that may be difficult to understand or activate.
By considering these accessibility considerations, you can ensure that image maps created using the <area> tag are accessible and usable by all users, regardless of their abilities or assistive technology usage.
→ Utilizing the <abbr> HTML Tag (syntax, attributes, compatibility)
Compatibility and Browser Support
The <area> tag is widely supported across modern web browsers and has good compatibility. Here's an overview of its compatibility and browser support:
Compatibility:
HTML4: The <area> tag has been a part of the HTML specification since HTML 4.01, where it's used to define clickable areas within an image map.
HTML5: It's fully compatible with HTML5 and continues to be widely used for creating image maps.
Browser Support:
- Chrome: Fully supported.
- Firefox: Fully supported.
- Safari: Fully supported.
- Edge: Fully supported.
- Internet Explorer: Fully supported since IE6.
The <area> tag is recognized and rendered appropriately by all modern web browsers. It's commonly used in conjunction with the <map> tag to create image maps, where different regions of an image can act as separate clickable links.
Although the <area> tag itself enjoys good browser support, it's essential to ensure that the image map is designed and implemented in a way that is accessible and usable across different browsers and devices. This includes providing clear and descriptive alternative text for each clickable area and ensuring keyboard accessibility for users who may not be able to use a mouse.