The Latest Accessibility Updates In The Maps JavaScript API

In recognition of Global Accessibility Awareness Day last month, I 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.

Our 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 we’ve been able to achieve.

Partner with aster.cloud
for your next big idea.
Let us know here.

From our partners:

CITI.IO :: Business. Institutions. Society. Global Political Economy.

CYBERPOGO.COM :: For the Arts, Sciences, and Technology.

DADAHACKS.COM :: Parenting For The Rest Of Us.

ZEDISTA.COM :: Entertainment. Sports. Culture. Escape.

TAKUMAKU.COM :: For The Hearth And Home.

ASTER.CLOUD :: From The Cloud And Beyond.

LIWAIWAI.COM :: Intelligence, Inside and Outside.

GLOBALCLOUDPLATFORMS.COM :: For The World's Computing Needs.

FIREGULAMAN.COM :: For The Fire In The Belly Of The Coder.

ASTERCASTER.COM :: Supra Astra. Beyond The Stars.

BARTDAY.COM :: Prosperity For Everyone.

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

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

Buttons and checkboxes are visible in the high contrast mode.

InfoWindow improvements

Moreover, we 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,
});

Providing an accessibility label for an InfoWindow and programmatically setting focus on it when it becomes visible.

And finally, we 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 our “Make a marker accessible” guide and “Marker Accessibility” code sample to learn about how to make markers more accessible.

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. 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. 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 and Embed UIs and APIs, and we know that we still have much more work to do. You can track the progress of the Maps JavaScript and Embed APIs on our Release Notes page.

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

By: Aleh Medzviadziuk (Software Engineer, Maps JavaScript API)

Source: Google Cloud Blog