SiteLint documentation and guidelines

Area missing alt

Description

The <area> element in HTML is used within an <map> element to define clickable areas on an image. Each <area> element should have an alt attribute that provides alternative text for the area, ensuring that users who cannot see the image can understand the purpose and function of the clickable area. Missing alt attributes on <area> elements can lead to accessibility issues, as users relying on screen readers and other assistive technologies may not receive necessary information.

Disabilities impacted

  • Visual impairments: users with visual impairments who rely on screen readers depend on the alt attribute to understand the purpose of each clickable area on an image.
  • Cognitive disabilities: users with cognitive disabilities benefit from descriptive text that helps them understand the function and context of interactive elements.
  • Motor impairments: users with motor impairments who navigate using keyboards or other assistive devices rely on properly labeled interactive areas to interact efficiently.

Why it matters

Providing alt text for <area> elements ensures that all users, particularly those using assistive technologies, can access and understand the content. Missing alt attributes on these elements create barriers to accessibility and hinder the user’s ability to interact with the content effectively. Properly implemented alt attributes enhance the accessibility and usability of image maps.

Coding problems and solutions

Common coding problems

  • Missing alt attribute: <area> elements lack the alt attribute, providing no alternative text.
  • Non-descriptive alt text: the alt attribute contains text that is not descriptive or meaningful.
  • Incorrect use of alt attribute: the alt attribute is used incorrectly, providing irrelevant or confusing information.

How to fix it

Add descriptive alt attributes

Ensure that every <area> element includes a descriptive alt attribute that conveys the purpose of the clickable area.

Correct example
<img src="image-map.png" usemap="#image-map" alt="Interactive image map">
<map name="image-map">
    <area shape="rect" coords="34,44,270,350" href="page1.html" alt="Description of the clickable area 1">
    <area shape="circle" coords="337,300,44" href="page2.html" alt="Description of the clickable area 2">
</map>
Incorrect example
<img src="image-map.png" usemap="#image-map" alt="Interactive image map">
<map name="image-map">
    <area shape="rect" coords="34,44,270,350" href="page1.html">
    <area shape="circle" coords="337,300,44" href="page2.html">
</map>

Ensure alt text is meaningful and relevant

Provide clear and relevant text in the alt attribute that accurately describes the clickable area.

Correct example
<map name="image-map">
    <area shape="rect" coords="34,44,270,350" href="products.html" alt="View our products">
    <area shape="circle" coords="337,300,44" href="contact.html" alt="Contact us">
</map>
Incorrect example
<map name="image-map">
    <area shape="rect" coords="34,44,270,350" href="products.html" alt="Rectangular area">
    <area shape="circle" coords="337,300,44" href="contact.html" alt="Circular area">
</map>

Known limitations

  • Complex image maps: for complex image maps with many clickable areas, ensure that each area has a unique and descriptive alt attribute.
  • Dynamic content: ensure that dynamically generated <area> elements also include appropriate alt attributes.
  • Testing across devices: test image maps across different devices and screen readers to ensure that alt attributes provide the necessary information.

Resources