Making maps accessible. Why is this map here?

  • Share on Facebook (opens new window)
  • Share on Twitter (opens new window)

Putting maps on a contact page is a great way of making information easier for most users to understand. Services like Google Maps have made that as simple as could be. Unfortunately for web managers and users, this has also made it easy to undo good accessibility work.

One of the most fundamental tenets of accessibility is ensuring equality of experience for everyone. In the case of maps, this is something that time and again baffles web and content developers and managers.

The relevant section of the WCAG2 specification is:

WCAG2 1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. (Level A)

This means that wherever we present a map, we need to provide a text alternative for it. Some developers say, we have an address above or below the map, so that's good enough. If that were true, then we wouldn't need to show the map at all, since every user would get all the information they need from the address alone - there is obviously more to the map than just the address, or else showing the map would provide users no extra value. It is that extra value that needs to be made accessible.

Why is this map here?

As a web author, asking yourself why is this map here? is the key to providing a text-based representation of the map, and unlocking its value for all users.

A technical work-around like linking to the accessible version of Google Maps won't solve this problem.

There could be any number of reasons for adding a map to a page:

  • Sometimes a map is added to demonstrate the location of an address in reference to other landmarks such as nearby towns.
  • Other times a map can be added to show suggested routes, or a multitude of landmarks or entry points.

The reason for the map's presence will determine the alternative text that you provide.

If the map is to show landmarks, then those landmarks and their relative locations should be described, either in an unordered list or a paragraph.

If the map is to show directions, then those directions should be spelled out.

Not just for screen-readers

Keep in mind, spelling out the purpose of a map is not just for users of screen-reader software. If you take the time to think about the underlying purpose of your content, and making that as clear as possible to everyone who uses your website, you are improving the accessibility of your site for everyone, not just for people with disabilities.​

Marking up map alternatives

There are multiple ways that you can provide map alternatives. The best method depends on the purpose of the map.

The main methods for providing a map alternative are:

  1. Provide the alternative content on the same page, below, above or next to the map. This is the method that's most accessible to all users, and provides the most value for everyone visiting your page.
  2. Provide a separate long-description page, and link the map to it. Bear in mind that this will only work if your map is an actual image (not an embedded Google Maps screen). Also, the longdesc attribute has weak browser support, and is not part of the HTML5 specification.

Get accessible, stay accessible

As is usually the case, the technology of making a page with a map is not a challenge - understanding the human factor is the key to success.

Following the tips in this article will put you on your way to achieving WCAG2 Level A compliance, and making your website easier for everyone to use.

Add your comment

Your comment will not be visible until it has been approved.