Friday, March 29, 2024
No menu items!
HomeCloud Computing2023 Accessibility updates in the Maps JavaScript API

2023 Accessibility updates in the Maps JavaScript API

In recognition of Global Accessibility Awareness Day on May 18, we wanted to share work we’ve done over the last year to improve accessibility in the Maps JavaScript API since our latest update last year.

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

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

Street View improvements

We also introduced a new behavior 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.

code_block[StructValue([(u’code’, u”const streetView = new google.maps.StreetViewPanorama(container, {position});rnrnstreetView.addListener(‘visible_changed’, () => {rn if (streetView.getVisible()) {rn streetView.focus();rn }rn});”), (u’language’, u”), (u’caption’, <wagtail.wagtailcore.rich_text.RichText object at 0x3ed6d40cf790>)])]

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, we continued making improvements to markers, one of our 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). We 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 canceled at any time by pressing the ‘Esc’ key or by simply tabbing away. We 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.

code_block[StructValue([(u’code’, u”const marker = new google.maps.marker.AdvancedMarkerElement({rn map,rn position,rn gmpDraggable: true,rn title: ‘Draggable marker’rn});”), (u’language’, u”), (u’caption’, <wagtail.wagtailcore.rich_text.RichText object at 0x3ed6d73d7150>)])]

Dragging markers using keyboard arrow keys, zooming is performed by pressing ‘+’ and ‘minus’ keys, canceling the drag by pressing the `Esc` key, dropping the marker by pressing the ‘Enter’ key.

Instructions for keyboard shortcuts

And finally, we added additional help to our keyboard shortcuts dialog. Now when tilt and/or rotation is enabled for vector maps, corresponding shortcuts will appear in the dialog. We 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 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. 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. 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 API, and we know that we still have much more work to do. You can track the progress of the Maps JavaScript API on our Release Notes page.

Cloud BlogRead More

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments