Accessibility in EJ2 TypeScript HeatMap chart control
19 Mar 20244 minutes to read
The HeatMap control follows commonly used accessibility guidelines and standards, such as ADA, Section 508, WCAG 2.2 standards, and WCAG roles.
The accessibility compliance for the HeatMap control is outlined below.
| Accessibility Criteria | Compatibility |
|---|---|
| WCAG 2.2 Support |  |
| Section 508 Support | |
| Screen Reader Support |  |
| Color Contrast | |
| Mobile Device Support | |
| Accessibility Checker Validation | |
| Axe-core Accessibility Validation | |
- All features of the control meet the requirement. - Some features of the control do not meet the requirement.
- The control does not meet the requirement.WAI-ARIA attributes
HeatMap control followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the HeatMap control.
| Attributes | Purpose |
|---|---|
role=img |
It is specified in the legend and border of the HeatMap. This role is provided to specify the information in a visual manner. |
role=region |
It specifies the HeatMap areas that do not support interactive functions like cell selection. |
aria-label |
Provides an accessible name for the title, legend title, legend item labels, axis labels, cell labels and multilevel labels. |
Screen reading in HeatMap
HeatMap has built-in accessibility features like screen reading. Screen reading in the HeatMap control allows all users, regardless of ability or disability, to use the control. The following HeatMap elements will be read aloud with screen reading software like Narrator for Windows.
| Elements | Description |
|---|---|
| Title | Reads the contents of the HeatMap chart’s title. |
| Axis labels | Reads the x and y axis labels of the HeatMap chart. |
| Multilevel labels | Reads the multilevel labels in the x and y axis of the HeatMap chart. |
| Cell labels | Reads the labels from the cells in the Heatmap chart. |
| Legend title | Reads the contents of the legend’s title as specified in HeatMap chart. |
| Legend item label | Reads the label of a legend item in HeatMap chart. |
Ensuring accessibility
The HeatMap control’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the HeatMap control is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the HeatMap control with accessibility tools.