Getting image maps right the first time - Overview
Image maps are areas of an image that are associated with behaviours triggered by a cursor. For example, a cursor moving over an image may cause it to change colours or become highlighted. Clicking the mouse may then take you to a different web page.
Web accessibility guidelines require image maps to be client-side based, that is, their information has to appear in the html on which the page is based. This enables screen readers and text browsers to read the Alt text that accompanies each image.
Why
- A client-side image map's functions are provided on the client's (the user's browser) end rather than at your web server's side. All the information needed to run the map is included in your web page document.
- Server-side image maps, on the other hand, do not allow you to use ALT tags to describe individual links in the image map.
Since text-only browsers, screen readers, or assistive devices may not be capable of interpreting links in server-side image maps, use client-side image maps instead of server-side image maps.
How
- Use an appropriate image for your image map. Make sure colours have a high contrast, and that there are well-defined boundaries within the image.
- Provide redundant links and alternative text for each region of the image map.
- Try not to have small hot regions that are close in proximity. Some users with motor skill problems may find them difficult to navigate.
- Provide keyboard shortcuts for frequently accessed links.