How can I help you?
Accessibility in EJ2 TypeScript Maps component
6 Feb 20267 minutes to read
Accessibility enables users with disabilities to interact with the Maps component through assistive technologies such as screen readers and keyboard navigation. The Maps component is designed to comply with ADA, Section 508, WCAG 2.2 standards, and WCAG roles.
The following table summarizes the accessibility compliance of the Maps component.
| Accessibility Criteria | Compatibility |
|---|---|
| WCAG 2.2 Support |  |
| Section 508 Support | |
| Screen Reader Support | |
| Right-To-Left Support | Not Applicable |
| Color Contrast | |
| Mobile Device Support | |
| Keyboard Navigation Support | |
| Accessibility Checker Validation | |
| Axe-core Accessibility Validation | |
- All features of the component meet the requirement.
- Some features of the component do not meet the requirement.
- The component does not meet the requirement.WAI-ARIA attributes
To meet accessibility standards, the Maps component follows to the WAI-ARIA patterns. In the Maps component, the following ARIA attributes are used:
| Attributes | Purpose |
|---|---|
role=region |
It specifies the Maps areas that do not support interactive functions such as selection and highlight. |
role=button |
It specifies the Maps areas where interactive functions such as selection and highlight are available. |
aria-label |
Provides an accessible name for Map elements such as geometric shapes, title, subtitle, legend title, legend item labels, and data labels. For more details, see the following section. |
Screen reading in Maps
Accessibility in the Maps component ensures that all users, regardless of ability or disability, can use screen reading. The following Map elements will be read aloud using screen reading software, such as Narrator for Windows.
| Elements | Description |
|---|---|
| Shapes in the layer | Reads the names of the geographical shapes (such as countries, states, and regions) that appear on the Maps. |
| Title | Reads the title content in the Maps. |
| Subtitle | Reads the title below the main title content in the Maps. |
| Legend title | Reads the contents of the legend’s title as specified in Maps. |
| Legend item label | Reads the label of a legend item in Maps. |
| Data label | Reads the label specified for the shapes in the Maps layer. |
| Annotation | Reads the content specified in the annotation. |
| Marker template | Reads the content provided in the marker template. |
| Tooltip template | Reads the content provided in the tooltip template. |
| Data label template | Reads the content provided in the data label template. |
Keyboard navigation
The Maps component supports keyboard navigation to enable users to interact with the map without a mouse. The following table lists the supported key combinations and their corresponding actions.
| 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. |
Ensuring accessibility
The Maps component’s accessibility levels are ensured using an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the Maps component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Maps component with accessibility tools.