In recognition of Global Accessibility Awareness Day on May 18, we wanted to share work we’ve done over the last year to improve accessibility in the Maps JavaScript API since our latest update last year.

Our work in over the past year has been focused on making some fundamental improvements to Street View rendering service, including ‘tab’ order, keyboard and screen reader interactivity, adding accessibility labels, and increasing color contrast of various Street View controls. These updates enable more inclusive maps for vision-impaired users, along with anyone using a screen reader or keyboard navigation. Here’s a deeper look at a few of the improvements we’ve been able to achieve.

Street View improvements

We also introduced a new behavior for the default Street View panorama. When it's open, a focus will be automatically set on it. The panorama then can be closed by simply pressing an 'Esc' key. Developers now have the ability to programmatically set focus on Street View when it becomes visible.

const streetView = new google.maps.StreetViewPanorama(container, {position});

streetView.addListener('visible_changed', () => {
  if (streetView.getVisible()) {
    streetView.focus();
  }
});

Accessible drag & drop

Moreover, we continued making improvements to markers, one of our most-used UI components on maps. When draggability is enabled, users will be able to drag the marker using keyboard or mouse (this is only available for Advanced Markers). We also made a single pointer gesture available, so that users can now long press on the draggable marker (this will enable a dragging state) and click on any place on the map to drop the marker. The drag action can be canceled at any time by pressing the 'Esc' key or by simply tabbing away. We also made sure that users can continue zooming the map when dragging the marker to find an exact location where the marker should be dropped. Zooming can be performed in this case by either the mouse wheel or keyboard '+' and '-' keys.

const marker = new google.maps.marker.AdvancedMarkerElement({
  map,
  position,
  gmpDraggable: true,
  title: 'Draggable marker'
});

Instructions for keyboard shortcuts

And finally, we added additional help to our keyboard shortcuts dialog. Now when tilt and/or rotation is enabled for vector maps, corresponding shortcuts will appear in the dialog. We also added keyboard shortcuts instructions for screen readers, so now when focus is set on the map or street view, screen readers are able to read the corresponding instructions.

Help us improve accessibility

We hope you will try out these new improvements, give us feedback on the changes, and file new bugs to help us prioritize the areas that will have the most impact. Please +1 existing bugs that impact your websites and file new bug reports. 

Accessibility is a complex topic that affects many different people and communities in a variety of ways, and we rely on your feedback to help guide our efforts to make Google Maps Platform features more accessible for everyone. We encourage you to stay informed to get up-to-date information about accessibility features and improvements in the Maps JavaScript and Embed APIs.

What’s Next

Every day across the web, millions of people around the world use the Google Maps map provided by the Maps JavaScript API. Our goal is to give developers the tools they need to ensure the map is built for everyone.

We plan to continue making accessibility improvements to the Maps JavaScript API, and we know that we still have much more work to do. You can track the progress of the Maps JavaScript API on our Release Notes page.