Now an actual, real life blog post: https://www.benjystanton.co.uk/blog/a-plan-for-accessible-maps/
- 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?)
- 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"
(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
- 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
<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>
- Ability to reveal more detail when clicking on an interactive element (e.g. labels, points, polygons and polylines) but make sure content is available elsewhere too, e.g. in a nearby table or list
- Tooltip should be keyboard accessible
- See Heydon Pickering’s inclusive tooltips
- See Steve Faulkner's Simple standalone toggletip widget pattern
- Interactive maps doc from Defra's design wiki
- Maps issue from the GOV.UK design system backlog
- Design Accessible Maps from Phase
- OS Open Zoomstack styles for colour blind users from Ordnance Survey
- A plan for accessible charts by Benjy Stanton
- What's the best way to mark-up an SVG map? by Benjy Stanton
- Accessible digital map experiences: a mountain climb or a walk in the park? from David Sloan
- MapItUK by My Society
- Search for schools and colleges to compare on GOV.UK
- Flood map for planning on GOV.UK
- Flood warnings for England on GOV.UK
- Alpha local gov service pattern: Apply for a resident's parking permit
- Prototype organisation page from Digital Land
- UK: New COVID cases in the last week from The Guardian
- My Maps by Google Maps
- Static Images API Playground by mapbox
- Mapstarter is a tool for turning a geographic data file into a map for the web
- Edit GEOJSON in the browser with a map and code editor
- Colour generator for maps
Update linksCheck Robin's tweet for resources and tips (remember to thank people)Check my tweet for resources and tips (remember to thank people)Turn this into a blog post
