In recognition of Global Accessibility Awareness Day on May 18, Google wanted to share the work that they have done over the last year to improve accessibility in the Maps JavaScript API since their latest update last year.
Google’s work 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 colour 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 they’ve been able to achieve.
Street View improvements
Google also introduced a new behaviour 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();
}
});
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,Google continued making improvements to markers, one of their 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). They 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 cancelled at any time by pressing the 'Esc' key or by simply tabbing away. Google 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'
});
Dragging markers using keyboard arrow keys, zooming is performed by pressing '+' and 'minus' keys, cancelling the drag by pressing the `Esc` key, dropping the marker by pressing the 'Enter' key.
Instructions for keyboard shortcuts
And finally, Google added additional help to their keyboard shortcuts dialog. Now when tilt and/or rotation is enabled for vector maps, corresponding shortcuts will appear in the dialog. Google 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.
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 Google improve accessibility
Google hopes you will try out these new improvements, give them feedback on the changes, and file new bugs to help them prioritise 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 Google relies on your feedback to help guide their 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. Google’s goal is to give developers the tools they need to ensure the map is built for everyone. As a trusted Google partner, we would like to hear from you! Get in touch with us today to discuss your Google Maps needs.
(Source: https://cloud.google.com/blog/products/maps-platform/2023-accessibility-updates-maps-javascript-api)
Comments