What does this accessibility issue mean?
Accessibility issue summary: server-side image map is used instead of client-side map
Server-side image maps are image maps in which the clickable areas are defined on the server rather than within the HTML code itself.
Server-side image maps do not provide any semantic context about the clickable areas within the image. As a result, users with visual impairments who rely on assistive technologies like screen readers cannot perceive or understand the purpose of these clickable regions.
Additionally, users who navigate websites using keyboards or other alternative input devices may encounter difficulties interacting with server-side image maps. These maps often rely on mouse-based interactions for clicking the regions, making it challenging or impossible for keyboard-only users to access the clickable areas.
To ensure website accessibility, it is better to use client-side image maps created using the HTML<map> and <area> elements. With client-side image maps, clickable areas and their associated information are directly included in the HTML, allowing for better semantic structure, improved support for assistive technologies, and greater flexibility in interactions.
Solution:
Ensure that server-side image maps are not used. Use client-side image maps instead, if required.
Example HTML violation: Server-side image map is used instead of a client-side map (WCAG 2.0 Level A Issue)
<h1>My E-Commerce Web Page</h1>
<a href="/image-map/region.map">
<img src="/prod/img/shirt.png" alt="My image description" ismap="ismap" width="145" height="126" />
</a>Explanation: This example code violates "Server-side image map present" because it uses ismap attribute which makes the image a server-side image map.
Server-side image maps work by passing the mouse click coordinates to a server-side script which then determines what was clicked. They are not accessible to people who use a keyboard for navigation, including people who use screen readers or speech commands. This is due to the inability to map coordinates from mouse clicks to keyboard presses accurately.
As a result, they may violate WCAG 2.1 (A) and Section 508 standards.To fix the issue, we can use client-side image map instead of server-side. Client-side image maps are able to handle keyboard navigation and text alternatives providing a better accessibility.
The corrected code will look something like this:
How to fix "Server-side image map is used instead of a client-side map (WCAG 2.0 Level A Issue)" issue
<h1>My E-Commerce Web Page</h1>
<img src="/prod/img/shirt.png" alt="My image description" usemap="#shirtmap" width="145" height="126" />
<map name="shirtmap">
<area alt="Shirt Front" coords="0,0,82,126" shape="rect" href="shirt-front.html" />
<area alt="Shirt Button" coords="90,58,3" shape="circle" href="shirt-button.html" />
</map>In this corrected code, the <img /> tag has a usemap attribute which links to a <map> tag via their names. The <map> tag contains <area /> tags, each specifying a portion of the image that links to a different page.
This is fully accessible to keyboard users and screen readers, addressing the issue in the original code.
