The Australian Government coat of Arms

Communities of practice

Communities of practice

Guidelines for Interactive Maps


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 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?


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

FYI Vision Australia have information about the accessibility support they’ve added to Google maps


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 -


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

1 Like

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

1 Like