Today I’m sharing some recent work by the Google Maps Platform JavaScript team focused on improving accessibility in the Maps JavaScript API. Last year we began a renewed effort to become more accessible ‘out of the box’, and to provide more hooks for developers to make accessible experiences.
We are committed to continuously making accessibility improvements to the Maps JavaScript UIs and APIs, and we know we have much more work to do. We hope you will try out these new features in the weekly channel, 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 many different ways, and we rely on your feedback to help guide our efforts to make Google Maps Platform features accessible for everyone.
Our earliest work in 2020 focused on some of the most fundamental issues. The team streamlined the tab order, enabled keyboard and screen reader interactivity, added screen reader descriptions, and increased the color contrast of controls on each map. Here’s a look at the before and after of that work:
The tab order was non-normative, and the spacebar did not activate buttons.
Tab order is left-to-right and top-to-bottom, the spacebar does activate buttons, and color contrast is better.
We also took a hard look at the markers that developers add to the map. Markers now default to the “img” accessibility role, or the “button” accessibility role if they are interactive (such as when a click event listener is registered). Interactive markers are also keyboard navigable, using arrow keys to iterate through each. When developers supply a title for a marker, this text is also used for the accessibility label. Please note that these improvements only apply to markers that are not optimized. To learn more, see our new “Make a marker accessible” guide and “Marker Accessibility” code sample.
Markers which are keyboard navigable with arrow keys, with accessibility labels and roles.
One of the most-used UI components on maps is the InfoWindow. Among other improvements, InfoWindows now have the ability to automatically manage tab focus into and out of the InfoWindow when opened and closed. By default, we use a heuristic to determine whether open() automatically moves focus or not - developers are encouraged to make an explicit choice by using the shouldFocus option when opening an InfoWindow.
const infoWindow = new google.maps.InfoWindow({
content: "Hello Accessibility!",
});
infoWindow.open({
anchor: marker,
shouldFocus: true,
});
When an InfoWindow opens it opens the first focusable element (either in developer-supplied content, or the built-in close button). When closed, the focus is then restored.
The Maps JavaScript API has supported keyboard controls for map interactions like panning and zooming since 2005, but it has been difficult for users to discover what the keyboard shortcuts are. This month, we added a new keyboard shortcuts dialog to the UI, to help users discover what controls are available. These keyboard shortcuts are in effect when the map itself is focused.
Activating the “Keyboard shortcuts” button on the map shows a dialog with the available controls.
What’s Next
Every day across the web, millions of people around the world use the Google 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 are committed to continuously making accessibility improvements to the Maps JavaScript UIs and APIs, and we know we have much more work to do. These improvements are only the beginning. We hope you will try out these new features, give us feedback, and track the progress of the Maps JavaScript API on our Release Notes page. Please also search for existing bugs and +1 those that impact your websites, take a look at the bugs we’ve fixed to date, and file new bug reports with feedback and issues that you encounter.
Happy mapping!
For more information on Google Maps Platform, visit our website.
