The Australian Government coat of Arms

Communities of practice

Communities of practice

Guidelines for Interactive Maps

#1

Hi Folks! Not sure where this thread should go, or even if it should be a new component.

What are people’s thoughts around design guidelines for interactive maps (e.g. Google Maps), especially around accessibility.

I’ve been rebuilding https://disabilityadvocacyfinder.dss.gov.au/disability/ndap/ and I think we do a good job of pairing up markers with large selectable cards on the left-hand side; but what about clickable info windows? or the type of icons we use on the map?

#2

It does seem pretty specific to become a component immediately, it would be good to see if others are solving the same problem and how they are solving it before making it a component.

As far as accessibility a few things come to mind which it seems you are already doing :slightly_smiling_face:

  • Try to avoid the scroll trap that can happen on touch devices when you have a full viewport map/iframe.
    (Which doesn’t seem like an issue in yours because you’ve got the toggle map on/off button)

  • Have a text alternative to the map (which you do with the cards list)

I did notice you’re missing a <noscript> message
Ideally you would have a backup for no-js as well, but a <noscript> message about why things aren’t working would help people understand why the site isn’t working.

1 Like
#3

FYI Vision Australia have information about the accessibility support they’ve added to Google maps https://www.visionaustralia.org/services/digital-access/resources/google-map

4 Likes
#4

LeafletJS has reasonably-good accessibility support OOB, too. Once focus is applied to the map, arrow keys will pan, and zooming in/out is performed via + and -

#5

This is a map icon clustering guideline I created while working at the BOM:

1 Like
#6

@gordon.grace - I have had good luck with Leaflet and making the controls keyboard accessible.

1 Like