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.

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

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.

Tab order
Buttons and checkboxes are visible in the high contrast mode.

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,
});
Accessibility label
Providing an accessibility label for an InfoWindow and programmatically setting focus on it when it becomes visible.

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.

Screen reader
Screen reader instructions for markers keyboard navigation.

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.