: Images Maps SEO and Accessibility 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
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.
More posts by @Turnbaugh106
1 Comments
Sorted by latest first Latest Oldest Best
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): area → alt:
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.