Keyboard accessible markers with Google maps js api

Question

As per the WCAG and section 508, all the informations on a website must be accessible using only the keyboard.

I have a google maps with some markers on it that open a modal with dedicated informations.

The problem is that Markers with google maps js API are invisible to keyboard and can't be focused using TAB key. So a keyboard user can't access the contents behind the Markers.

Is there a way around this ? I haven't found anything in the API documentation and no mention of "focus" on markers.

Any solution is welcome.

Needy

Please see updated answer at https://mcmap.net/q/1757901/-keyboard-accessible-markers-with-google-maps-js-api. – Dictaphone

Answer 1

Instead of native Markers you may create the markers by using custom overlays.

The overlay in this case would be accessible when it is a link (or does have a tabIndex-property)

Shan

Thanks for the workaround. I see no other solution. Too bad google didn't implement anything for this use case ... – Needy

Answer 2

Google does now (serveral years later) support keyboard navigation for markers - https://developers.google.com/maps/documentation/javascript/examples/marker-accessibility. Whatever markers are in the current extent can be accessed via the arrow keys and enter or spacebar will open the info window.

Exonerate