How much alt text does my map need?

Information provided in an image must also be available as text, and this also applies to maps and other complex images.

You’re on the right track in adding alternative text to describe your map, but your example alternative text does not provide enough information – someone who can’t perceive the visual map also needs enough information to locate specific buildings and amenities.

One option is to add a text description in the body of the page that conveys the same information as the map. This description should be programmatically associated with the map image, such as using the aria-describedby technique.

If the map contains so much information that a short description isn’t enough, it can be helpful to include both a summary description of the map’s main characteristics and a clear link to a detailed text description on a separate page or file.

Combining these techniques would include the following:

1. Brief Alternative Text, located in the image code: Provides a general description of the map and the information it includes.
2. Short Description, located in the body text and programmatically related to the image: Describes the high level details of the map, such as the number of buildings, types of amenities, basic directional information, and adjacent street names.
3. Detailed Description, located in the body text or in a separate page or file that is clearly linked: Describes the map in detail, with enough information to navigate the apartment complex and find the labeled locations.

However you address the map, your goal should be to offer the same information in an accessible text form.

To learn more about building accessible web content, explore the Accessibility for Content Creators course bundle from Accessible Web Academy.