Accessibility in Blazor Maps Component
11 Apr 20223 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 MapsLegendTitle, MapsTitleSettings, MapsSubtitleSettings and SfMaps. 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. |