How much alt text does my map need?


I’m updating a website with an apartment community map. The map includes a map legend and shows the locations of buildings, mailboxes, and other outdoor amenities like our BBQ grills. I’ve added alternative text to the map: “The River Drive apartment complex map and map legend.” Is this enough?


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.

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.