Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Accessible interactive maps (draft)

Accessible interactive maps (draft)

Update: blog post

Now an actual, real life blog post:


  • This is a work in progress :)
  • Comments and suggestions welcome
  • Not had an accessibility audit, so can’t confirm this will meet WCAG
  • Based on previous experience and projects with Swirrl and ONS, and training/advice from GDS and DAC


  • Keep things simple
  • Use vectors so you can zoom without losing quality
  • Do user research to decide if you really need a map
  • If you need map, does it need to be interactive (or is a static map enough?)

Content available elsewhere

  • Make sure all important content that is available in the map, is also available via another accessible route (e.g. a nearby data table or spreadsheet download)
  • Interactive maps require JavaScript so having the data available when JS isn’t available is important for progressive enhancement too
  • Break content down into multiple pages rather than having a single mega-map that contains everything (this will also help to keep the map simple)
  • Consider associating the nearby content with the map, using ARIA attributes (e.g. aria-describedby)
  • Avoid complex interactive maps if you don’t need them (e.g. a static inline SVG might be enough in some cases)
  • It may be impossible to make the interactive map accessible to assistive technology like screen readers, so consider hiding it with aria-hidden="true"

Interactive foreground elements

(E.g. labels, points, polygons and polylines)

  • Interactive polylines (e.g. rivers or roads) should be thick enough (e.g. 4px) and high contrast enough to see (e.g. dark colour on a light background map)
  • Interactive elements must be thick enough to click on (e.g. add a clickable label nearby if line is thinner than about 40px)
  • We can probably be lenient with these rules as long as users can zoom in and out
  • If elements are not interactive, they should have a different visual treatment (e.g. black and white text without an underline)
  • Make sure interactive elements (e.g. labels, points, polygons and polylines) have affordance (E.g. underline label text so they are obviously clickable)
  • Add clear hover style for interactive elements (e.g. change in weight (line thickness), tint (colour darkness), mouse cursor (changes to pointer))
  • Ability to pan and zoom with mouse
  • Ability to pan and zoom with keyboard (e.g. visible buttons)
  • Ability to enable/disable pan and zoom (e.g. panning/zooming only works when a key is pressed or when user uses 2 fingers to swipe), so that users don’t get inadvertently trapped in the map when they try to scroll or swipe past it


  • Don’t use colour alone to convey meaning (e.g. directly label things where possible or use a legend/key if direct labelling is not possible)
  • Consider using shading patterns to help e.g. cross hatching
  • Use colours that are high contrast enough to read (e.g. avoid light greys)
  • Check the colour combinations work in greyscale


  • Check maps works at small sizes
  • Check map works with touch interfaces
  • Intercate touch gestures (like pan and zoom) may be difficult for people with people with less dexterity


  • Ability to skip maps components completely, so they don’t become keyboard traps
  • Ability to keyboard navigate main interactive bits of map (e.g. zoom, full screen, pan buttons)
  • Clear focus style for any interactive element

Background tiles

  • Turn off any background layers you don’t need (e.g. hide roads if you don’t need roads)
  • Make the text legible (e.g. increase size and contrast of labels for towns and cities)
  • Choose background tiles that don’t contrast too much with the foreground (the labels, points, polygons and polylines that are rendered on top)


  • Wrap the map in a <figure> so we can take advantage of <figcaption> to give the map a label, and <footer>to wrap small print, copyright info, related links etc
  <h2>Map title</h2>
  <p>Map description</p>
  …Map stuff here…
  <a>Download data</a>
  <p>Other small print</p>



Further reading

Services with maps

Helpful for prototyping

Todo list

Copy link

benjystanton commented Apr 24, 2020

  • add some screenshots
  • good to be reminded that maps are exclusive, they require high digital literacy, high data/spatial data literacy and rely on visual information so present a high barrier to those with other access needs
  • including which access needs are out of scope for now is useful, it's still a very worthwhile effort to make maps more accessible to those with "reasonable vision". I think there is real value in making "reasonable adjustments" to maps.
  • could include example mark-up for static inline SVGs and how to work with them and make them accessible
  • one benefit of having simple maps broken down into one-page-per-thing type services means that you get URLs for every thing
  • standards for background mapping could be expanded upon

Copy link

benjystanton commented Nov 28, 2020

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment