Add Alt Text to Your Image Map Areas
It's easy to add alt text to your image maps. Alt text in image maps makes the image maps more usable and friendly to your customers, because they get more information about where they're going to go when they click on the link.
The key to alt text on image maps is that you want to put alt text for the specific section of the image that you're marking. In other words, rather than creating one single alt text statement for the entire image, you should create several - one for each clickable area.
To do it, simply treat each area element as you would a separate image, and add the alt attribute to that element:
<area href="#" shape="rect" coords="0,25,50,100" alt="A rectangle" />
Add a Title Attribute to Provide Even More Information
Some browsers treat the alt attribute as a tool tip or pop-up, while others use the title attribute. By using both attributes you can be sure that when your customers mouse over the area on the image map, they'll have the information you want to impart.
Add the title attribute to the area element just like you did the alt text:
<area href="#" shape="rect" coords="0,25,50,100" alt="A rectangle" title="A rectangle" />
Why Use Alt Text and Title Attributes on Image Maps
Image maps are not very accessible to anyone without a visual browser or a mouse to click on the image. By adding titles and alternative text to your image map areas, you make them a little easier to use. By adding in a title and alternative text, you tell your customers more about what they're going to get when they click, so they're more likely to click.
