Skip to content
Products
Solutions
By industry
By use case
Resources
Products
Solutions
By industry
By use case
Resources
Products
Solutions
By industry
By use case
Resources
2023 Accessibility updates in the Maps JavaScript API
Aleh Medzviadziuk
Software Engineer, Maps JavaScript API
May 18, 2023
Try Google Maps Platform
Unlock access to real-world data and insights with a monthly $200 Google Maps Platform credit.
Get started

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.

Visual of how keyboard shortcuts are used in Street View.

Tab order is left-to-right and top-to-bottom, the Spacebar and the Enter activate buttons, and color contrast is better.

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();
  }
});
Copied to clipboard!
The panorama is closed by pressing the 'Esc' key.

Focus is automatically set on the default Street View panorama when it's open. The panorama is closed by pressing the 'Esc' key.

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'
});
Copied to clipboard!
Video demonstrating how using keyboard controls allows dragging markers, zooming, and dropping markers.

Dragging markers using keyboard arrow keys, zooming is performed by pressing '+' and 'minus' keys, canceling the drag by pressing the `Esc` key, dropping the marker by pressing the 'Enter' key.

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.

Demonstration of keyboard shortcuts used for tilt and rotate

Keyboard shortcuts for tilt and rotate are available in the keyboard shortcuts dialog. A screen reader reads keyboard shortcuts when a focus is set on the map.

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.

Clay cityscape
Clay cityscape
Google Maps Platform
Get going with Google Maps Platform