Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

My question of the day is about image maps and accessibility.

Now it is my understanding that whenever you use an alt tag within an img tag you describe the image which increases the user experience for those who are blind or just people whom have just disabled images from rendering for one reason or many.

Now this logic doesn't seem to work with Image Maps which I'll demonstrate an example.

<img alt="Image Map of Bits and Bobs" usemap="#imgmap" src="bits-and-bobs">
  <map name="imgmap">
    <area shape="poly" coords="" href="" alt="Spanner" title="Guitars Repairs"/>
    <area shape="poly" coords="" href="" alt="Dollar" title="Guitars for Sale"/>
    <area shape="poly" coords="" href="" alt="eLearning" title="Learning about Guitars"/>
    <area shape="poly" coords="" href="" alt="String" title="How to tune a Guitar"/>
  </map>

Valid Href's and Coords removed for easier viewing...

So as you can see in the above image I'm describing the area of the image rather that the outcome if they click the image. So my question is simple....

Within a image map that contains links do you describe the link outcome rather describe the image... For example a image of strings using strings wouldn't indicate that its a link about how to tune a guitar, however the title tag does.

share|improve this question
    
PS. I've never had to use image maps before, personally I dislike em but I've been requested and with blind users in mind. –  bybe Dec 16 '13 at 20:28

1 Answer 1

In general, if a link only contains an image, the alt attribute of that image should not describe the image but the link target.

With image maps, it’s the same.

The alt attribute of the img element should describe the whole image (as the image itself is not linked).

The alt attribute of the area element should describe its purpose (as this image area is linked, so the link is important, not the image).

Reference: HTML5 (CR from 2013-08-06): areaalt:

It [the alt attribute] specifies the text of the hyperlink. Its value must be text that, when presented with the texts specified for the other hyperlinks of the image map, and with the alternative text of the image, but without the image itself, provides the user with the same kind of choice as the hyperlink would when used without its text but with its shape applied to the image.

FWIW, WCAG’s technique H37 (informational, not normative) has an example for the img-alt that includes also an instruction to select an area:

An image on a Web site depicts the floor plan of a building. The image is an image map with each room an interactive map area. The alt text is "The building's floor plan. Select a room for more information about the purpose or content of the room." The instruction to "select a room" indicates that the image is interactive.

Personally, I’m not so sure about this. I think if such an instruction would be needed, it should be part of the prosa text near the image map.


So in your example, you should use the content of the title attributes as alt content (and probably remove the title attributes as to not repeat this content).

As I didn’t see your image, I can only guess here, but I assume the image consists of 4 icons without any textual label. If so, the guideline for icon image might apply here:

An icon is usually a simple picture representing a program, action, data file or a concept.

In which case the img-alt shouldn’t describe the (beauty of the) icons but what they represent.

If my assumption is correct, this doesn’t seem to be a perfect candidate for an image map, but, oh well, clients.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.