The latest accessibility updates in the Maps JavaScript API

In recognition of Global Accessibility Awareness Day last month, Google wanted to provide a follow-up to last year’s work and share more recent updates to improve accessibility in the Maps JavaScript API and Maps Embed API.

Their work since last year has continued to focus on some fundamental improvements in the Embed API, including ‘tab’ order, keyboard and screen reader interactivity, adding accessibility labels, and increasing color contrast of various map 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 they’ve been able to achieve.

UI visibility in high contrast mode

Google also improved maps in high color contrast mode to help make some buttons and checkboxes easier to see and more visible. They implemented this by making changes to the CSS in our codebase to help adapt the map to high contrast scenarios.

InfoWindow improvements

Moreover, Google continued adding improvements to one of the most-used UI components on maps: InfoWindow. Developers now have the ability to set an accessibility label and programmatically set focus on InfoWindows when they become visible.

  const infoWindow = new google.maps.InfoWindow({
  ariaLabel: 'Hello Accessibility',
  content: '<h2>Hello Accessibility!</h2>',
});

infoWindow.addListener('visible', () => {
  infoWindow.focus();
});

infoWindow.open({
  anchor: marker,
  shouldFocus: false,
});

Screen reader support for markers

And finally, Google added screen reader instructions for markers keyboard navigation. This is especially useful for first-time users who don’t know upfront how to navigate through interactive markers (those who have a registered click event listener) using a keyboard. See the “Make a marker accessible” guide and “Marker Accessibility” code sample to learn about how to make markers more accessible.

Help us improve accessibility

Google hope you will try out these new improvements, give them feedback on the changes, and file new bugs to help them 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 they rely on your feedback to help guide our efforts to make Google Maps Platform features more accessible for everyone. Please also 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 basemap provided by the Maps JavaScript API. The goal is to give developers the tools they need to ensure the map is built for everyone.
Google plan to continue making accessibility improvements to the Maps JavaScript and Embed UIs and APIs, and they know that they still have much more work to do. You can track the progress of the Maps JavaScript and Embed APIs on the Release Notes page.

For more information on Google Maps Platform, visit the website.