Skip to content

A plan for accessible maps

Designing accessible interactive maps is hard. I don’t think I could point to any single thing that I’ve worked on that covers all of the things mentioned here. But, if I was going to start a brand new project, with plenty of time to get things right, this is where I’d start.

The following isn't perfect, I'm really just sharing my workings so far. I hope that if you can see something is wrong or missing, you'll point it out. I’ll definitely iterate and add to this post in future.

Accessible map overview

First, decide if you really need a map

Maps are complicated, both for the people using them, and the teams building them. Do user research to make sure you really need a map.

Make sure information in the map is available elsewhere

It's useful to remember that maps, no matter how well done, are an exclusive tool. They require digital literacy, geographic literacy and they rely on visual communication methods to present information. So they shouldn't be relied upon solely to communicate information to your users.

Keep the map simple

Design maps in black in white first

Don’t use colour alone to convey meaning. Using red and green to convey "good and bad" without labels is a classic bad example of this. I find that designing in black and white first helps me to do this, then I add colour later, as an enhancement.

Break the map down into layers

Interactive maps are made up of multiple layers:

I like to break down the map, then think about how to make each layer more accessible.

It may be very hard to make maps 100% accessible for everyone, but by considering each component part I think there is plenty of room for improvement and reasonable adjustment.

Features (points or areas of interest)

Features are the points of interest on the map. The individual data points that users are most interested in. They could be points that mark the location of a town, a line that follows the path of a river or a polygon that maps the outline of a local authority. Often they'll have short text labels that are always visible.

Dialogues (for detailed information)

A benefit of interactive maps is that you can progressively disclose details when the user needs, so they don't get bombarded with everything all at once.

Map controls

Map controls are the buttons, form elements and gestures that the allow users to manipulate how they view the map.

Background maps

The background map contains extra context. They typically depict large water bodies, land masses and can include labels for important landmarks like cities.

The images might be generated from satellite photos or they can by stylised illustrations that are common in things like Google Maps.

If you have control of the background layer it’s worth simplifying things down to exactly what you need.

Supporting information, map metadata and descriptive labels

Supporting text such copyright, source and license information is often overlooked in maps.

Test the map with a mobile

Test the map with a keyboard

Consider adding a skip link, allowing keyboard users to skip the map completely. Skip link are more commonly used to skip the main navigation, but could be adapted for this purpose too. Read about skip links in the GOV.UK design system.

Make sure to check all interactive elements are available to keyboard users. For example users will need to interact with the map controls (like zoom buttons and full screen toggles) as well as any interactive features like points and polygons.

Do a range of testing

This blog post isn't an exhaustive list of ways to meet all access needs or create something that works with all kind of assistive technology.

It's definetely worth doing your own manual and automatic testing. I've written a bit about manual and automatic accessibility testing before so I won’t go into more detail here.

It's also important to do user research (including with people with access needs) and to get some accessibility experts to audit the finished thing.

Further reading

Services with maps

Map prototyping tools


Thanks

Cathy Dutton and the interaction design team at Defra, Angharad Stone, Joe Lanman, Simon Everest, John Waterworth, Rob Chambers, Oli Hawkins, ONS digital and Swirrl.

Updates on 7 December 2020

  1. Added a link to Map Accessibility from Minnesota IT Services via Philip Kiff
  2. Added a note about Shapefiles via Mike Gifford
  3. Added a link to FixMyStreet from My Society and clarification that interactive maps don't always require Javascript via Matthew Somerville
  4. Added a link to Defra map design standards via Cathy Dutton