repeats the text content for each of the 5 hot spots. The HTML coding would be as follows (the
alt text pieces are bolded to highlight them:
<img src="imagemap.jpg" alt="" width="199" height="303" border="0" usemap="#Map">
<area shape="rect" coords="7,9,191,54" href="#maps" alt="HOME">
<area shape="rect" coords="7,68,191,114" href="#maps" alt="Products">
<area shape="rect" coords="7,127,190,172" href="#maps" alt="Services">
<area shape="rect" coords="6,186,190,229" href="#maps" alt="Contact us">
<area shape="rect" coords="7,245,189,289" href="#maps" alt="Index">
Unless you go out of your way to design it otherwise, all your image maps will be “client side,”
which means the user’s browser processes the map. The alternative – a server-side map – is not
accessible, so do not create server-side image maps.
Other Notes on Image Use
Additional guidelines on using images in HTML pages include:
Don’t use graphical text (images that include text) if you can avoid it because it
distorts when enlarged (turn back to Figure 1 to see an example). If you must use it,
make the font size large, use good color contrast and simple block fonts, and provide
Don’t include rapidly flashing images, as these can induce seizures in some people.
Provide as much color contrast as possible, but don’t use color alone to convey
Don’t put any images that convey content in the background, because you cannot add
alt text to these.
For more on this topic, refer back to the Image section in the Cross-Cutting Strategies chapter
Make sure users can access all of your website content using just the keyboard.
Blind people can’t use a mouse at all. Also, many people with mobility
impairments don’t use a mouse, but instead use tools such as the head wand or
mouth sticks on the keyboard (see photos in Figure 5). A keyboard accessible site
may also make it more usable to people using small, portable web technologies.
Normally, keyboard-only users tab through links, and click ‘enter’ to go to the link destination.
Most of the time, the default tab order will be the same as the visual order of your site. You don’t
have to do anything special to make it work.
In rare cases, such as in some online forms or when you use tables to create complex page
layouts, you might need to create the correct tabbing order using <tabindex>. See
Office of Web Communications, Cornell University