You are here:
- Manual
- Development
- Images
- Navigation and Image maps
Images and alternate text: Navigation and Image maps
Images in links
Since the image is included in a link, web developers and content managers must observe the guidelines for writing a good link text when writing the alternate text.
Image with alternate text in a link (HTML)
<a href="/belgium/">
<img src="/images/belgium.gif"
alt="Are you travelling to Belgium this summer?">
</a>Images placed in a link should have a non-empty alternate text to enable visitors who do not see the image to follow the link.
Guideline R-pd.7.4
The image in the link may not be the only link on the page that refers to a document. Sometimes a link contains the ‘regular’ text as well as the image. In such cases, an empty alternate text can be used.
Image and text in two separate links (HTML)
<a href="/belgium/">
<img src="/images/belgium.gif" alt="">
</a>
<a href="/belgium/">
Are you travelling to Belgium this summer?
</a>Image and text in a single link (HTML)
<a href="/belgium/">
<img src="/images/belgium.gif" alt="">
Are you travelling to Belgium this summer?
</a>Image maps
Image maps are images for which selections are indicated in the HTML linking to other HTML documents. The visitor can click on these selections in the image to follow the links.
When using image maps, indicate an effective alternate text for both the img element and each area element by means of the alt attribute.
Guideline R-pd.7.5
Alternate texts in an imagemap (HTML)
<img src="/images/destinations.jpg"
alt="Choose a destination country"
usemap="#destinations">
<map name="destinations">
<area shape="rect" coords="40,20,120,35"
href="/netherlands/" alt="The Netherlands">
<area shape="rect" coords="10,130,50,165"
href="/germany/" alt="Germany">
<area shape="rect" coords="320,60,380,85"
href="/france/" alt="France">
</map>The W3C Web Accessibility Content Guidelines stipulate that a client-side image map should always be used instead of a server-side image map. The example above follows this.
“Provide client-side image maps instead of server-side image maps except where the regions cannot be defined with an available geometric shape.”
