google-mapsgoogle-maps-api-3accessibilitysection508wcag2.0

Keyboard accessible markers with Google maps js api


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.


Solution

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