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 Intermediate
Section 508 Support Intermediate
Screen Reader Support Yes
Color Contrast Yes
Mobile Device Support Yes
Accessibility Checker Validation Yes
Axe-core Accessibility Validation Yes
Yes - All features of the control meet the requirement.
Intermediate - Some features of the control do not meet the requirement.
No - 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.

See also