If screenreader users visit a contact page (on a company website) that contains a static map as image, what should be read to them? So: Which alternative text (content of the HTML alt attribute) should be used for static maps?

Usually you won't be able to include the whole journey description (how users may visit by car etc.), as the content length is limited. So this description would have to be placed as text below the image anyway.

What would be the most useful alternative text for screenreader users?

4 Answers 4


Certainly don't just describe "what it is" in a literal sense. Alt text along the lines of "Map showing the location of our office" is of very little use to anyone in this context.

Alt text should be a textual equivalent of the image, providing the same information or serving the same role, as appropriate to its context.

Generally, the purpose of a static map like that described in the question is to pinpoint a location and give some idea of its surrounding landmarks such as nearby roads or buildings. The alt text in this particular context should provide that information - a brief description of the location and its surroundings.

The alt text doesn't need to describe the entire journey since that information isn't contained within the original image and therefore isn't accessible to anyone.


Use alt text to describes what it is. You don't have to try and reproduce the map in words.

So something like "map showing company headquarters in London" or "Map showing the location of the best pizza restaurants in Florence".


Something like this should suffice http://www.mustseeindia.com/driving-directions-from-Bangalore-to-Mysore/travel-direction

In fact, you should allow user to toggle between travel directions and map


According to WebAIM the alt text should communicate the purpose of the graphic.

More importantly, this sort of image should either include alternate directions (as has been mentioned) or a long description.

This can be accomplished by any of the following:

  • Providing the long description in the context of the document itself.
  • Providing a link to a long description via a normal text link.
  • Providing a link to a long description via the longdesc attribute.

Each technique can be further researched at http://webaim.org/techniques/images/longdesc

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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