Search results

Accessibility in React Maps component

05 Oct 2022 / 2 minutes to read

Maps provides built-in compliance with the WAI-ARIA specifications. The WAI-ARIA accessibility support is achieved through the attribute like aria-label in the SVG element. It helps to provide information about elements in a document for assistive technology. This attribute sets the text label with some default description for the following elements in Maps.

Element Default description
Maps container Specifies the Maps component.
Maps title Specifies the title of the Maps.
Maps subtitle Specifies the sub-title of the Maps.
Legend title Specifies the title of legend in the Maps.

To change this default description, use the description property available in legendSettings, titleSettings, subtitleSettings and Maps. It helps the screen reader to read for an assistive purpose.

Keyboard Navigation

All the Maps actions can be controlled via keyboard keys. The applicable key combinations and their relative functionalities are listed below for the appropriate UI features available in the component.

Interaction Keys Description
Tab Moves to the next focusable element on the map, such as the legend or shape.
Shift + Tab Moves to the previous focusable element on the map, such as the legend or shape.
+ When zooming is enabled, zoom in operation can be performed.
- When zooming is enabled, zoom out operation can be performed.
Left arrow When zoomed in, the map can be scrolled to the left.
Right arrow When zoomed in, the map can be scrolled to the right.
Up arrow When zoomed in, the map can be scrolled upward.
Down arrow When zoomed in, the map can be scrolled downward.
R When zooming is enabled, reset operation can be performed.
Enter The page can be navigated to the next and previous states in legend. Similarly, the selection can be made while navigating over the shape.