Accessibility in React HeatMap component
28 Jun 20244 minutes to read
The HeatMap component 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 component is outlined below.
| 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 | Not Applicable |
| 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
HeatMap component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the HeatMap component.
| 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 component allows all users, regardless of ability or disability, to use the component. 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 component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the HeatMap component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the HeatMap component with accessibility tools.