How to make accessible image maps

The modern HTML provides such a function as creation of image-maps. Simply put, it is the ability of cutting an image in multiple areas, with every area having a link tied to it. So, if you click on an area of the map, you are sent to one web page. And if you click on the second area of the map, another page opens.

Basically, there are two types of image maps: server-side and client-side. The most used type is client-side maps, as there are some implementation problems with the server-side image maps.

The client-side image maps are called so, because the browser, after it receives the image, must figure out how to handle the clicking on every different piece of  the image. If the user clicked on the page, the browser looks at the areas specified in the <area> tag. If the user clicked in a region pointed in the code, the browser opens the requested page.

Because the screen readers are unable to understand what is written on images, it is required to use the alt tags together with these image maps, so that a blind person that uses a screen reader would be able to hear where the link goes to, instead of the link itself which very often in incomprehensible for the simple person.

Another type of image-maps are the server-side image maps. The difference between the client-side and server-side image maps is that the server-side image is closed in the <a> tag, and contains the ismap boolean attribute. Because of the implementation, this kind of image map is not accessible for a disabled person. Pressing Enter on the image would simply give the output of pressing on the image on 0,0 coordinate, and therefore it doesn’t allow access for people that are unable to use the mouse.

Therefore, it is recommended to specify redundant text links next to server-side image maps, in order to allow access for the disabled people.