What does this accessibility issue mean?
Web accessibility issue summary: <area> element missing alt text
The <area> element in HTML is used within an image map to define clickable areas within an image.
The alt tag attribute can be used within an image map’s <area> element> to provide alternative text for an image map that can be read by screen readers, helping visually impaired users understand the content and purpose of the image.
When the <area> element is missing alt text, it can create significant accessibility problems for website users, particularly those with visual impairments or who rely on assistive technologies.
Solution:
Ensure each clickable area within an image map has an alt, aria-label or aria-labelledby attribute value that describes the purpose of the link.
Example HTML violation: Area element is missing alt text (WCAG Level A Issue)
<!DOCTYPE html>
<html lang='en' class='no-js'>
<head>
<title>E-commerce Website</title>
</head>
<body>
<img src="store-map.png" usemap="#store-map" />
<map name="store-map">
<area shape="rect" coords="0,0,100,100" href="electronics-section.html" />
<area shape="rect" coords="100,0,200,100" href="clothing-section.html" />
</map>
</body>
</html>Explanation:
This HTML code violates the '<area> element missing alt text' accessibility rule because the '<area>' elements do not have any alternative text defined using alt, aria-label or aria-labelledby attributes. Consequently, users who use assistive technologies can't determine the purpose of these <area> elements.
Here's the corrected HTML with the issue resolved:
How to fix "Area element is missing alt text (WCAG Level A Issue)" issue
<!DOCTYPE html>
<html lang='en' class='no-js'>
<head>
<title>E-commerce Website</title>
</head>
<body>
<img src="store-map.png" usemap="#store-map" />
<map name="store-map">
<area shape="rect" coords="0,0,100,100" href="electronics-section.html" alt="Electronics Section" />
<area shape="rect" coords="100,0,200,100" href="clothing-section.html" alt="Clothing Section" />
</map>
</body>
</html>In this corrected HTML, each <area> element includes an alt attribute, which provides a text alternative that describes the purpose of the link. This allows users with assistive technologies to understand the purpose of these links.
