Skip to content

Instantly share code, notes, and snippets.

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

Accessible interactive maps (draft)


Update: blog post

Now an actual, real life blog post: https://www.benjystanton.co.uk/blog/a-plan-for-accessible-maps/


Caveats

  • 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

General

  • 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

Colour

  • 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

Mobile

  • 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

Keyboard

  • 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)

Mark-up

  • 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
<figure>
 <figcaption>
  <h2>Map title</h2>
  <p>Map description</p>
 </figcaption>
 <div>
  …Map stuff here…
 </div>
 <footer>
  <a>Download data</a>
  <p>Other small print</p>
 </footer>
</figure>

Toggleltip


Thanks

Further reading

Services with maps

Helpful for prototyping


Todo list

@benjystanton

This comment has been minimized.

Copy link
Owner Author

@benjystanton 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
@benjystanton

This comment has been minimized.

Copy link
Owner Author

@benjystanton benjystanton commented Nov 28, 2020

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